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

블로그 스킨중에서 타이틀은 상당이 중요합니다. 이 부분을 텍스트가 아닌 이미지로 변경하는법을 살펴보도록 하겠습니다.
변경하기전 단순이 타이틀 부분을 단순이 배경으로 처리하는것이 있지만 이 경우는 그닥 추천하는 바는 아닙니다.
왜냐면 링크가 사라지기 때문이죠.

즉 링크도 살리면서 타이틀 부분을 이미지로 변경해보겠습니다.
하나의 스킨을 예로 들면 다른 스킨들도 모두 비슷하니 응용해보세요.
일단 html 에서 _blog_link_ 치환자를 검색해보시면 대략 <h1>과 </h1> 사이에 있을겁니다.

html 에서 h1 태그로 블로그 타이틀을 한것은 그만큼 중요하다는 뜻입니다. 이걸 변경해서 h2 나 h3으로 수정해서 폰트크기를 조절하는것은 비추하는 바입니다.
계속해서 아래와 같은 코드로 돼있는지 보시고 안되어 있다면 변경해주시기 바랍니다. 

<!--
티스토리 치환자인 [#\#_title_##] 를 검색하시면 블로그제목에 대한 부분을 볼 수 있습니다.
블로그 제목에 대한 부분은 아래와 비슷한 구조로 되어 있습니다.
-->
<h1><a href="[#\#_blog_link_##]" title="처음으로"><span>[#\#_title_##]</span></a></h1>

한가지 예로 제가 배포한 스킨 studiopress_adsense ver_2 을 보면 아래처럼 되어 있습니다.

<div id="header" class="clearfix">
	<div id="leftHeader">
		<h1><a href="[#\#_blog_link_##]" title="처음으로"><span>[#\#_title_##]</span></a></h1>
	</div>
<!--//leftHeader close-->
	<div id="rightHeader">
		<!-- 468-60 구글광고 자리 -->
	</div>
<!--//rightHeader close-->
</div>
<!--//header close-->

위의 코드에서보면 header 부분을 둘로 나누어서 왼쪽,오른쪽으로 나누어서 사용합니다.
왼쪽부분에 title이 들어가 있으므로 이 부분만 이미지로 하면 css에서 정의한 크기만큼만 사용할수 있습니다.
즉 css 에 보시면 #leftHeader 에 width:400px 로 되어있으므로 왼쪽 400px 크기의 이미지만을 사용할수 있습니다. 

!! 왼쪽만 이미지로 변경하기

이럴땐 간단이 400*70짜리 이미지를 만든후 스킨편집에서 업로드합니다.
업로드한 이미지명은 logo.gif 라고 가정합니다.
그럼 간단하게 html을 아래처럼 변경합니다.

<h1><a href="[#\#_blog_link_##]" title="[#\#_title_##]"><img src="./images/logo.gif" alt="[#\#_title_##]"><span>[#\#_title_##]</span></a></h1>

그런다음 css 에서 span에 해당하는부분만 추가하면 됩니다.
즉 header 에 h1 부분에 a 부분에 span 에 해당하는 부분이죠. 아래처럼 한줄 추가합니다.

#header h1 a span{display:none;}

그럼 끝입니다. 간단하죠.
이번에는 작업을 좀 더 해야하는 방법입니다. 즉 우측에 공간을 사용하지 않고 통으로 전부 사용하고자 할경우 입니다.

!! 왼쪽 오른쪽 모두 통으로 사용하기(타이틀 이미지로 변경하기)

제목이 길군요^^
뭔말이냐 제 스킨을 사용하시는 분이면 아시겠지만 모르시는분을 위해 .... 추가설명.
현재 header 안에 왼쪽(leftHeader), 오른쪽(rightHeader) 이렇게 두군대로 나뉘어 있습니다. 위의 html 코드를 보시면 알겁니다.

추가합니다.
통으로 전부를 사용하시고 타이틀을 이미지로 변경하실경우 기존의 css를 모두 삭제하셔야 합니다.
그리고 html 도 수정하셔야 합니다.

css부분 삭제하기

#leftHeader 부분부터 #rightHeader 부분까지 모두 삭제하세요.
그다음 html 부분도 아래처럼 변경해주시기 바랍니다.

이걸 왼쪽 오른쪽 모두 삭제하고 하나의 공간으로 사용하고 그곳에 있는 타이틀을 이미지로 변경하는 것입니다.
단 위와 다른점은 통으로 사용하기 때문에 공간이 더 큽니다.
즉 header에 보면 width:970px; height:70px 라고 되있기 때문에 이미지를 970*70 크기로 만들어서 logo.gif 라는 이름으로 업로드하세요.
그런다음 아래처럼 맨위에 예제로 보여줬던 코드를 아래처럼 변경합니다.

<div id="header">
	<h1><a href="[#\#_blog_link_##]" title="[#\#_title_##]"><img src="./images/logo.gif" alt="[#\#_title_##]"><span>[#\#_title_##]</span></a></h1>
</div>

마찬가지로 css 부분에 위와같이 한줄 추가합니다.

#header h1 a span{display:none;}

그럼 이것도 끝입니다. 간단하죠.

발행되는 글이 한두개가 아닙니다. 스킨도 한두개가 아니고 어느부분을 이야기 하는지 모릅니다.
질문을 하실때는 그글에 댓글로 질문을 해주셨으면 좋겠습니다. 제가 찾아다니지 않게......
제가 발행한 글이라해도 모두 알수 있는것이 아닙니다.

위의 글에서 이해가 안되면 허심탄회하게 질문하세요.힘닿는데까지 알려드리겠습니다.

참고

이미지 처리하는 방법(확장자)
이미지 처리하는 방법(배경색을 입히고 이미지 그리기)
스크롤을 따라다니는 플로팅 메뉴(floating menu)
사이드바에 위젯마다 테두리 넣기
사이드바에 더보기 기능 적용하기
스크롤을 따라다니는 플로팅 메뉴(floating menu)
사이드바에 위젯마다 테두리 넣기
사이드바에 더보기 기능 적용하기
이미지 처리하는 방법(Image Replacement , Image Sprite)