블로그 타이틀을 이미지로 바꿀때

블로그 타이틀을 이미지로 바꿀때

보통 자기만의 개성이나 아이덴티티(정체성)을 부각시키기위한 것이 도메인이나 일관된 주제의 포스트, 또는 스킨, 위젯 등 여러가지 있겠지만, 게중에서도 블로그 첫머리에 오는 '블로그타이틀'만한게 없는 것 같습니다. 그래서 블로그타이틀을 일반적인 텍스트로 표현하기보다 이미지로 많이 사용하는 것 같은데, 블로그 타이틀을 텍스트에서 이미지로 바꿀때 팁을 소개해 볼까 합니다.

웹 문서에 있어 H1, H2, H3... 태그를 사용하면 보다 효과적인 문서구조화를 할 수 있고, 즉 나아가 검색노출의 이점(우위)을 취할 수 있다는 것 아시죠? 보통 TT, TC, Tistory 블로그에서 이 블로그타이틀부분이 H1태그에 해당되는데, 이를 텍스트에서 이미지로 바꿔버리면, 그만큼의 효과는 떨어지게 마련입니다.

방법은 (친절한 금자씨인냥) 이미지와 텍스트 두가지 다 H1 태그안에 넣어두는 것입니다. 대신 텍스트부분은 css를 사용해서 보이지 않게 하는 것이지요. *제 블로그도 보시면 'seevaa,'요렇게 보이지만 요건 이미지구요, 실제로 <h1> 안에는 'seevaa의 잡다구리한 이야기'요렇게 되어 있고, 검색에도 그렇게 나온답니다.

보통의 예

skin.html의 블로그 타이틀 부분(H1 태그 안)을 아래와 같이 이미지와 텍스트를 모두 넣고, 대신에 텍스트부분은 span 으로 감싸줍니다. *치환자[] 대신에 ()로 표시

<h1><a href="(##_blog_link_##)" title="(##_title_##)"><img src="http://~~/이미지.jpg" width="200px" height="100px" alt="블로그 타이틀 이미지" /><span>(##_title_##)</span></a></h1>

그리고 style.css에 아래와 같이 텍스트 부분만 보이지 않게 합니다. *보통 header에 위치하기에

#header h1 a span { display:none;}

어때요, 간단하죠? 쉽게 보셨다면 '블로그타이틀'을 그냥 이미지로만 하지 마시고, 텍스트와 같이 넣어주세요~

저의 적용 예 *블로그 타이틀이 텍스트 같지만 이미지입니다.

skin.html *저는 이미지도 css로 돌렸습니다. style.css를 불러올 수 없을 경우 이미지말고 텍스트만 나오게끔~ *치환자[] 대신에 ()로 표시

<h1><a href="(##_blog_link_##)" title="(##_title_##)"><span>(##_title_##)</span></a></h1>

style.css

#header h1 a { display:block; width:250px; height:78px; background:url("images/title-seevaa.gif") left top no-repeat;}

#header h1 a:hover { background:url("images/title-seevaa-on.gif") left top no-repeat;}

#header h1 a span { display:none;}

앗, 일모리님께서 알려주신 방법을 더해보면

span으로 감싸줄 필요없이 텍스트부분은 text-indent(문단첫머리들여쓰기) 태그를 사용해서 보이는 페이지 밖으로 보내버리고, a 태그에 배경으로 이미지를 넣는 방법입니다. 

skin.html *치환자[] 대신에 ()로 표시

<h1><a href="(##_blog_link_##)" title="(##_title_##)">(##_title_##)</a></h1>

style.css

#header h1 { text-indent: -999em;} 

#header h1 a { display:block; width:250px; height:78px; background:url("images/title-seevaa.gif") left top no-repeat;}

#header h1 a:hover { background:url("images/title-seevaa-on.gif") left top no-repeat;}

#header h1 a:active, 

#header h1 a:focus{ outline:none;}