블로그 제목, 이미지로 꾸미고 링크걸기
블로그 상단을 꾸미는 일은 블로그를 운영하는 사람이라면 누구나가 바라는 소원일것입니다. 하지만 여러가지 제약이나 능력의 부재로 인하여 손을 못 대고 있는 분들이 참 많습니다.
꾸미는 법을 몰라서 못 꾸미는 사람, 디자인을 못해서 못 꾸미는 사람, 태그를 몰라서 못 꾸미는 사람, 어디서 부터 해야 할지 도무지 감을 잡을 수가 없어서 애초부터 시도조차 못해본 사람... ^^
저의 경우는 디자인이 쑥맥이라 멋있게 꾸미지를 못하고 있답니다.
블로그 이름을 이미지로 하면 제법 그럴싸하게 보이기 때문에 많은 분들이 블로그 이름을 이미지로 꾸몄으면 하는 마음을 가지고 있습니다.
오늘은 블로그 제목을 이미지로 꾸미는 방법에 대해서 간단하게 설명을 해볼까 합니다.
역시 티스토리 블로그 기준이므로 다른 블로그에서는 다를 수가 있습니다.
티스토리에 제목을 이미지로 꾸미는 일은 그다지 쉬운일은 아니지만 그렇다고 어려운일도 아닙니다.
이미지로 만든 블로그 타이틀
위의 블로그처럼 블로그 상단에 블로그 이미지를 표시하고 블로그이름을 클릭하면 블로그 메인으로 연결이 되도록 하는 방법에 대해서 알아보도록 하겠습니다.
티스토리 제목을 이미지로 꾸미기
먼저 아래와 같이 배경색과 어울리도록 블로그 타이틀을 이미지로 만듦니다.
이미지를 웹사이트에 업로드를 합니다. 저의 경우는 마땅하게 올릴곳이 없어서 블로그 스킨자료실에 올렸습니다. 올리는 방법은 "관리페이지 - 스킨 - HTML/CSS 클릭 - 파일업로드"를 통하여 파일을 업로드 합니다.
업로드 한 파일의 이름이 "bni_logo0.jpg" 라고 할때 파일의 경로는 아래와 같습니다.
스킨자료실 파일의 절대경로: http://cfs.tistory.com/custom/blog/16/160651/skin/images/bni_logo0.jpg
160651(빨강색) : 본인의 BlogAPI ID 입니다. 확인은 "환경설정-BlogAPI 설정"에서 확인가능
16 (빨강색) : BlogAPI ID의 앞의 2글자
파랑색글자(bni_logo0.jpg) : 업로드한 파일이름
초간단 경로 : ./images/bni_logo0.jpg
파일의 경로를 잘 메모해두시고... 다음으로 넘어갑니다.
이제 skin.html을 편집해야합니다.
"관리페이지 - 스킨-HTML/CSS"를 클릭하면 skin.html을 편집할 수가 있습니다. 편집전에 혹시나 있을 사고에 대비하여 먼저 "스킨 저장"을 해두시기 바랍니다.
skin.html에서 블로그 제목에 해당하는 부분은 위 그림에서 빨간사격형 부분입니다.
이미지로 만든 블로그 제목을 표시하기 위해서 이 부분을 수정해야 합니다. 위 소스는 상단에 위치하고 있으며 <body>부분 아래에 있으므로 쉽게 찾을 수가 있습니다.
이제 미리보기를 한다음 이상이 없으면 저장을 하면 됩니다. ^^
<h1><a href="[ ##_blog_link_## ]" title="[ ##_title_## ]">[ ##_title_## ]</a></h1>
변경 後
<h1><a href="[ ##_blog_link_ ##]" title="[ ##_title_## ]"><img height=80 width=199 src="http://cfs.tistory.com/custom/blog/16/160051/skin/images/bni_logo0.jpg" border=0></a></h1>
파랑색 글자부분을 추가하면 됩니다. 물론 src= 다음에 오는 내용은 타이틀이미지의 경로입니다.
소스중의 [ 과 ## , ## 과 ] 사이는 모두 붙여야합니다.
쉽게 설명한다고 했지만 역시나 글로 짧게 설명한다는 것은 무리인가봅니다.
잘 이해가 안가시는 분은 댓글 남겨주세요! ^^
'블로그기초 > 블로그 꾸미기' 카테고리의 다른 글
| 사진삽입시 테두리 없애기 (18) | 2009.05.07 |
|---|---|
| 티스토리 사이드바에 배너 넣기 (24) | 2009.04.22 |
| 댓글에 블로그아이콘달고 초보티 벗어나기 (36) | 2008.12.09 |
| 블로그에 파비콘을 달아보자. (51) | 2008.12.09 |
| 카테고리 클릭시 리스트만 표시하기 (10) | 2008.11.24 |