티스토리 블로그 타이틀 대문 이미지에 홈으로 링크 걸어보자.

오늘은 티스토리 블로그의 타이틀 대문 백그라운드 이미지에 홈으로 링크 거는 방법에 대해 알아보도록 하겠습니다. 네이버 블로그와 다음 블로그는 백그라운드 이미지인 대문을 클릭하면 홈으로 가는 기능이 있다. 하지만 티스토리는 타이틀 텍스트를 클릭해야지만 홈으로 간다. 블로그 서핑 중에 홈으로 가고 싶어 클릭하려면 쪼매난 타이틀을 클릭하거나 더 작은 <홈> 버튼을 찾아야해서 여간 번거러운 일이 아니다. 요런 불편을 해소하기 위해서 오늘은 필자의 블로그 처럼 대문 이미지만 클릭하면 블로그의 첫화면인 홈으로 가는 설정을 해 보겠다. 방법은 매우 간단하니 HTML CSS 따위 잘 몰라도 할 수 있으니 잘 보고 따라하세요.

※ 참고로 다른 스킨에서는 약간 다를 수 있으니 참고하세요.

 

 

 

 

 

 

 

1. 이미지 업로드

 

먼저 자신이 블로그 대문의 백그라운드 이미지를 업로드 합니다.

HTML/CSS 편집 -> 파일업로드 에서 그림파일을 업로드 한 다음 제대로 올라갔는지 확인합시다.

 

 

 

 

 

 

2. 기존 대문 이미지 삭제

 

그리고 꼭!!! 작업하기 전 스킨저장을 잊지마세요!!!

티스토리 스킨 꼬이면 다시 복구하는데 시간이 많이 걸려요!!!

 

 

 

 

 

 

스킨저장을 하셨으면 ③번 '스킨위자드'를 클릭해서 스킨 위자드를 실행합니다.

타이틀 탭에서 기존에 올린 이미지를 사용하지 않게 설정합니다.

타이틀 이미지는 백그라운드 이미지라 링크를 걸 수 없으니 과감히 삭제~!!!

 

 

 

 

 

3. 기존 타이틀 Text 삭제 (블로그 제목 삭제)

 

그럼 볼품없이 블로그 왼쪽 상단에 있는 블로그 제목을 먼저 삭제해 보겠습니다.

skin.html에서 Ctrl+F 를 눌러 <h1> 태그를 찾습니다. 아래 그림 처럼...

그리고 저 줄을 과감히 삭제해 줍니다.

 

 

 

 

 

<h1> 태그를 삭제하고 미리보기를 눌러보니 타이틀 글자는 사라졌는데 검색바가 위로 툭 올라갔군요.

블로그 제목이 차지하던 공간이 없어져서 아래에 있는 것들이 밀려 올라간 것입니다.

조금 있다 조정을 할테니 걱정말고 다음 작업으로 들어갑니다.

 

 

 

 

 

 

4. 타이틀에 백그라운드 이미지 삽입 및 링크걸기

 

<h1>태그를 지운 부분에 아래의 소스를 삽입해 줍니다.

 

<center><a href="[@@_blog_link_@@]"><img src="./images/이미지파일명"></a></center>

※ 위 코드에서 @를 #으로 바꿔야합니다.

 

위의 코드를 삽입하면 이미지가 대문의 가운데로 정렬됩니다.

자운데 정렬이 싫으시면 위 코드에서 파란색 center 태그를 지우면 됩니다.

 

 

코드 다운로드 ->대문링크.txt

 

 

 

 

 

자 이제 타이틀 TEXT 링크대신 이미지 링크가 완성되었습니다.

이제 아까 위로 치켜올라간 검색바를 다시 원위치 시켜야겠죠?

스킨위자드에서 타이틀->텍스트 탭에서 블로그 타이틀 높이를 조정하시면 됩니다.

자신이 올린 대문이미지의 크기에 따라 적절이 조정하시면 끝~!!!

 

 

 

 

 

 

쨔라쟌~ 대문 이미지 위에 올린 마우스 커서의 모양이 보이시죠?

링크가 있단 뜻이지요 ㅎㅎㅎ 누르면 홈으로 돌아갑니다.

 

 

참 쉽지요?