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

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

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

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

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

 

 

 

 

 

 

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

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

 

 

참 쉽지요?

 

 

저작자 표시 비영리 변경 금지
신고

언젠간날고말거야

언젠간날고말거야™의 여행블로그. 국내여행기, 해외여행기, 영화리뷰 등을 다룹니다.

    이미지 맵

    강좌&IT/블로그 다른 글

    댓글 19

      • 좋은 방법 알려주셔서 감사합니다.
        아직 티스토리에 대해서 잘 몰라서 헤메이고 있습니다...ㅎㅎ
        천천히 따라해 봐야겠습니다.
        행복한 월요일 보내세요!

      • 처음에 낮설어서 그렇지 적응되면 쉽습니다. 차근차근 해보세요. 앞으로 계속 꼭필요한 티스토리 강좌가 올라오니 자주 들러주시고요 ^^

      • 저 타이틀을 바꾸면 글을 올리면 글 전체가 오른쪽으로 쏠려서 오른쪽 끝이 짤리는데요, 어떻게 하나요ㅠㅠ

      • 그건 에디터에서 그렇게 설정을 하신거 아닐까요?
        아니면 위치를 잘 못 잡아서 넣으셨나..지금 적용을 안해 놓으셔서 잘 모르겠군요. 그리고 위의 태그는 가운데 정렬인데 왜 오른쪽으로 갈까요...강좌 차근차근 보시고 </center> 태그나 기타 오른쪽 정렬을 하셨다면 관련 태그 닫으셨는지 꼭 확인하세요. 닫지 않으면 블로그 전체가 한쪽방향으로 치우칠 수가 있습니다.

      • ㅡㅡ;; 클라인하트님께 드리는 댓글이 아닌데 다른 분이 문제가 해결되었다고 댓글을 지워버렸네요. 살짝 어이상실 ㅎㅎㅎ 그래도 다른 분이 이 글을 보고 해결할 수 있으니 제 댓글은 그대로 둘께요. ^^*
        ================== 제가 그분꼐 달아드린 댓글 ================
        소스보니까 해더 윗부분에 이런 부분이 있습니다. <div style="margin:0px; padding:0px; border:none; background:none; float:none; clear:none; z-index:0"></div>
        여기서 float:none; 이것 때문에 오른쪽으로 정렬되는거에요. 그걸 지우면됩니다.

    *

    *

    이전 글

    다음 글