지식 누리/블로그/인터넷

블로그 타이틀을 이미지로 바꾸기

nuon 2010. 4. 4. 21:30
반응형
텍스트로 출력되는 블로그 타이틀

티스토리의 블로그 제목은 따로 소스를 수정하지 않는다면 텍스트로 출력됩니다.

하지만 텍스트의 경우엔 폰트의 제약도 있고, 디자인을 마음대로 수정할 수 없는 게 아쉽죠.

간단한 방법으로 블로그 스킨과 어울리는 이미지로 타이틀을 바꿀 수 있습니다.



티스토리 기본 제공 스킨 중 하나인 'Tiskin - Green Dayz'

클릭해서 크게 보세요


티스토리 기본 제공 스킨 중 하나인 [Tiskin - Green Dayz]입니다.

여기서 위쪽의 'nuon nuri'가 이 블로그의 제목입니다. 이것을 텍스트에서 이미지로 바꿔 보겠습니다.



타이틀 이미지 업로드하기

클릭해서 크게 보세요


블로그 타이틀로 쓸 이미지 파일을 스킨 관리 메뉴에서 업로드합니다.



skin.html 수정하기

클릭해서 크게 보세요


이미지 파일을 올린 뒤에는 HTML/CSS편집으로 가서 skin.html파일을 편집해야 합니다.
스샷에서 선택된 [샵샵_title_샵샵]은 블로그 타이틀 치환자인데, 사용자가 설정한 블로그 제목을 화면에 텍스트로 출력해 줍니다. 이 부분을 이미지로 바꾸겠습니다.



skin.html 수정하기

클릭해서 크게 보세요


[샵샵_title_샵샵]을 <img> 태그로 바꿔 줍니다.

<img src="./images/타이틀이미지 파일이름.gif" />

alt 속성을 이용해 블로그 제목을 이미지의 대체 텍스트로 출력해 주면 더 좋습니다.

<img src="./images/타이틀이미지 파일이름.gif" alt="[샵샵_title_샵샵]" />

(여기서 '샵샵'은 꼭 '##'으로 바꿔 주세요.)




이 방법으로 바꾼 블로그 타이틀입니다.

이미지로 바뀐 블로그 타이틀

클릭해서 크게 보세요






반응형