블로그 타이틀 이미지로 변경하기

기본적으로 티스토리의 블로그는 타이틀을 텍스트로 하고 있습니다.
이는 블로그를 개설할때 블로그의 이름이 표현되는 부분인데요, 이 부분을 이미지로 바꾸고 싶어 하는분이 많습니다.

제 블로그 역시 상단에 보면, 이미지로 되어 있는것을 확인할수 있는데요~
이렇게 블로그의 타이틀을 이미지로 바꾸는 방법에 대하여 오늘은 알아볼까 합니다.

처음하셔야 할것은 블로그 타이틀 (로고)를 만드는 일을 해야 하는데요~
포토샵을 하시든지, 이미지를 하시든지 상관은 없습니다.

이런식으로 의 로고가 필요합니다. 꼭 이런 스타일이 아니어도 상관은 없습니다.
포토샵으로 만드셔도 되고~ 개구리, 오리, 말 등 아무꺼나 하셔도 되겠죠!

이런 스타일의 로고도 만들어 낼수 있습니다.

▶ 인터넷에서 로고를 바로 만들어 저장할수 있는 사이트

http://supalogo.com/
http://www.glitteryourway.com/
http://textanim.com/

▶ 아래 블로그왕 이라는 블로그 이름을 jaea라는 로고 이미지로 바꿉니다.

아래 블로그 타이틀을 바꾸는 작업을 한번 해보겠습니다.

로고 이미지가 준비되었다면 기억하기 쉽게 파일명을  logo.png 라고 합시다.
자신의 블로그 스킨에 로고 파일을 업로드를 해야합니다.

환경설정 -> 스킨 -> 파일 업로드  -> logo.png 업로드 -> 확인

파일이 업로드 됨으로써 적용이 되었습니다.
이제 글자로 출력되는 타이틀 부분을 방금 올려놓은 로고 파일이 출력되도록 변경할 예정입니다.

▶ 스킨 수정을 통하여 텍스트가 이미지로 출력되게 소스 수정

스킨 -> HTML/CSS편집 에서 수정합니다.

아래와 같은 부분을 찾습니다. (10번째 줄정도에 있습니다.)

<h1><a href="[샵샵_blog_link_샵샵]" title="[샵샵_title_샵샵]">[샵샵_title_샵샵]</a></h1>

찾았으면 위에 [샵샵_title_샵샵]  이부분을 아래처럼 빨간 부분으로 변경하여 줍니다.

<h1><a href="[샵샵_blog_link_샵샵]" title="[샵샵_title_샵샵]"><img src="./images/logo.png"></a></h1>

위에 파랑색으로 표시된 부분을 방금 알려드린 빨간색 으로 변경하여 주면 됩니다.
다른 부분은 만지지 않으셔도 되는 부분이니다.


그렇게 최종 적인 소스는 아래와 같아야 합니다.

이렇게 만들어 지면 됩니다.

그리고 나서 확인을 누르면 아래와 같이 나오게 됩니다.

▶ 스킨 위자드와 CSS를 통하여 상단의 헤드 영역의 폭을 늘려줍니다.

이는 텍스트가 가지고 있는 세로폭의 기준이 있는데, 이 기준을 벗어나서 출력이 되기 때문에 위에보시는것처럼 메뉴바와 겹치게 됩니다. 그럼으로 메뉴바를 내려 주는 작업을 하는데 실질적으로 메뉴바를 내린다는 말보다는 헤더 영역의 세로 px를 늘리는게 맞는 말입니다.

위처럼 스킨 위자드를 이용하여 스킨 -> 스킨위자드 -> 타이틀 -> 텍스트 ->  높이 지정 을 해주면 됩니다. 저는 150정도 하니깐 아래처럼 알맞게 보이네요~

150이라는 숫자를 넣었습니다.

▶ 다음에도 이렇게 복잡하게 해야 하나요?? 그렇지 않습니다.

다음에도 이렇게.//? 스킨 위자드를 통하여 세로의 폭을 지정해야 하나요? 라고 할수 있는데오 그렇게 할 필요는 없습니다.
위처럼 스킨위자드에서 한번 작업을 하게되면 style.css에 자동적으로 기입이 되며 해당 위치는 아래와 같습니다.

style.css
#header .head-container {width:/*@post-width:267=*/950px/*@*/; height:/*@title-height=*/150px/*@*/; margin:0px auto; }

이 부분에서 150px 라고 나와 있는 부분이 방금 제가 입력한 150px부분입니다.
그럼으로 다음에도 스킨위자드를 통하지 않고, 바로 변경하셔도 되는 부분입니다.

지금의 로고가 마음에 들수도 있고, 시간이 되어서 또 로고 작업을 하거나 변경할수도 있는데요 그럴때마다 아마 로고 사이즈가 틀리게 작업이 될것으로 생각이 듭니다.

이럴때는 파일명만 logo.png로 저장하셔서 업로드 하시면 로고는 자동으로 바뀌게 되고요!
위처럼 로고에 따라 세로폭을 조정을 해야 하기 때문에 위처럼 150px라고 되어 있는 부분을 조정 해주시면 됩니다.