블로그 타이틀을 클릭하면 블로그의 홈으로 이동하는 것과 블로그 이름을 없애는 법을 알고 싶었습니다. 네이버 블로그를 하셨다면 타이틀 이미지를 클릭하면 블로그 홈으로 이동하는 것을 당연시 할 것 같습니다. 그러나 네이버 블로그의 리모콘과 비슷한 티스토리의 스킨위자드를 이용하는 것이 아니라 스킨을 수정해야 하는데 그것에 대해 적어보려 합니다. 아마 이 글을 읽으시면 아래 그림처럼 될 것 같습니다.


여기 글에서 설명할 스킨은 티스토리 스킨에 있고 티스토리에서 블로그를 만들면 기본적으로 되는  아래 그림에서 보이는 BASIC 2008 스킨에서는 어떻게 되는지 알아보겠습니다. 현재 저의 블로그는 타이틀 이미지를 클릭하면 홈으로 가게 하지 않았습니다.


티스토리에서 타이틀 설정 부분 유추와 링크하기


 타이틀 이미지의 크기 알기 : 타스킨에서 타이틀을 설정하는 부분은 보통 header와 title 부분을 찾으면 됩니다. BASIC 2008 스킨의 style.css에서는 아래그림에서처럼 Header 부분을 보면 됩니다. Header 부분에서 width(가로폭)와 height(세로높이)로 타이틀 이미지의 크기가  920*109가 된다는 것을 알았습니다.  예로 Basic 2008 스킨 초기에는 본문폭이 630인데 만약 700으로 한다면 700에 290을 더한 990이 됩니다. 아래 그림을 보시면 본문폭에 920 옆의 숫자인 290를 본문폭을 더하면 타이틀 이미지의 가로폭이  됩니다. 그래서 저는 포토스케이프라는 무료 그래픽 프로그램을 이용해서 타이틀을 만들었습니다. 포토스케이프 다운로드는 여기를 클릭하시고 이왕이면 포토스케이프를 다루는 간단한 것을 보시기 바랍니다. 참로고 저는 BASIC 2008에서 말하는 것이로 자신의 스킨에서는 아래 그림과 같지 않다고 하지마세요.저는 무료 프로그램인 포토스케이프를 사용해서 블로그 타이틀을 만들었습니다. 


타이틀 이미지 올리고 적용 부분 보기 : 블로그 타이틀 이미지를 만들었으면 블로그에 이미지를 올립니다. 네이버 블로그는 이미지를 포함한 파일만을 올리는 곳은 없지만 티스토리에는 있습니다. 티스토리에서 블로그의 타이틀 설정은 skin.html있습니다. 그리고 보통 header나 title이라는 이름이 들어갈 것 같으면 됩니다. 저는 BASIC 2008 스킨에서 찾으니 블로그 타이틀 설정을 아래 그림에서 했다라고요.코드에  * 를 더한 이유는 *을 더하지 않으면 코드로 읽기 때문니 이해하시기 바랍니다. [*##_title_##*]의 저나 여러분이 블로그 타이틀(블로그 이름)입니다. 그리고 <a href="[*##_blog_link##*]">블로그 첫화면으로 가는 링크이고 대부분 <a href=""></a>는 링크입니다.
 

  • 엔팩스 : 회원가입시 무료로 11번 팩스보내기
     
  • 블로그 타이틀에 링크 적용하기 : 타이틀 이미지로 올렸고 타이틀 설정 부분은 알았으니 그곳을 수정하려면 다음 글을 읽고 아래처럼 되어야 합니다. 위에서 블로그의 타이틀 글자인 블로그 타이틀 이름은 [*##_title_##*]라고 했으니 저는 그것을 지웠습니다. 그리고 블로그 타이틀 이미지로 하기 위해 <img src="./images/title.JPG">라고 했습니다. 타이틀 이미지에 마우스 포인터를 가져가면 풍선 도움말이 나오게 하기 위해 title="홈으로"를 더해서 <img src="./images/title.JPG title="홈으로">라고 하고 끝으로 <h1></h1> 을 지웠습니다. 그러면 위 그림을 아래 그림과 같이 했습니다. 결과는 http://study3.tistory.com/ 에서 보실 수 있는데 블로그 타이틀 이미지에 마우스 포인터를 가져가 보세요. 참고로 윈도우에서는 파일 이름이 대소문자를 구별하지 않지만 유닉스 등에서는 대소문자를 구별하므로 title.jpg와 tilte.JPG가 다른 것입니다. 이미지가 나타나지 않으면 타이틀 이름이 대문자인데 소문자로 적으지도 보세요. 

    하나팩스 : 회원가입시 무료로 팩스 보내기 23번 -

    네이버 블로그와 다음 블로그에서 타이틀 이미지를 클릭하면 홈으로 간다고 설정할 필요없고 자동입니다. 위에서 보셨듯이 티스토리는 스킨을 수정해야 했습니다.


    아래부터 네이버 블로그와 다음 블로그에서 타이틀 설정에 대해 간단히 알아보겠습니다.  
     


    네이버 블로그에서 타이틀 설정


    타이틀 제목을 설정할 수 있는 옵션이 있네요 : 티스토리 블로거나 다음 블로거를 위해 네이버 블로그에서 타이틀 설정하는 것을 간단히 설명하겠습니다. 위에서 설명했듯이 티스토리에서는 타이틀 이미지를 클릭하면 블로그 홈으로 가도록 하기 위해서는 스킨의 skin.html을 수정해야 했습니다. 그러니 다음 블로그나 네이버 블로그에서 왔다면 어려울 것입니다.

    아래는 티스토리의 스킨위자드와 비슷한 네이버 블로그의 리모콘으로 타이틀 설정은 클릭으로만 되니 간단할 것입니다. 타이틀 이미지의 크기를 계산할 필요도 없습니다. 그리고 타이틀 제목은 지울 필요없이 아래 그림의 빨간색박스에서 제어할 수 있었습니다. 아래에서 설명하지만 다음 블로그는 타이틀 제목만 아니라 블로그 설명도 편집할 수 있더라고요.

    하나팩스 : 회원가입시 무료로 팩스 보내기 23번 -


    다음 블로그에서 타이틀 설정


    블로그 설명을 편집할 수 있네요 : 다음 블로그에서 타이틀 설정에서 네이버 블로그나 티스토리에서 안 보았던 타이틀에 효과를 줄 수 있네요.그리고 아래 그림에 보듯이 블로그 설명도 편집할 수 있네요. 네이버 블로그에서는 글만 편집할 수 있습니다. 아래 그림을 보듯이 다음 블로그에서는 블로그 설명에 폰트종류,폰트크기,폰트색,효과 등을 설정할 수 있네요. 그런데 네이버 블로그와 다음 블로그에서 타이틀 설정은 티스토리는 스킨의 HTML/CSS를 편집할 수 있으므로 모든 것이 가능할 것 같습니다. 하지만 CSS나 HTML 태그에 울렁증이 있으면 어려울 것 같습니다.

    엔팩스 : 회원가입시 무료로 11번 팩스보내기 -
     

    네이버 블로그나 다음 블로그에서는 타이틀 설정을 마우스 클릭만으로 간단히 해결했습니다. 그러나  티스토리에서는 모든 스킨은 아니지만 스킨위자드가 있으면 간단하겠지만 있어도 스킨을 수정해야 하니 어려울 것 같습니다.아래 그림을 보듯이 네이버 블로그의 리모콘에 비하면 티스토리 스킨위자드에서 제공하는 것이 별로 없네요. 


    BY 싸이렌24


    '블로그' 관련된 글

    1. 이전 댓글 더보기
    2. BlogIcon 아이엠피터 2011.06.03 09:33 신고  댓글주소  수정/삭제  댓글쓰기

      나중에 백전백승님 블로그 포스팅을 가지고 블로그 강의를 해야겠습니다.
      티스토리 오려는 사람에게 완벽한 지침서가 될 듯 싶어집니다.

      • BlogIcon . 백전백승 2011.06.03 13:10 신고  댓글주소  수정/삭제

        아이엠피터님은 강의를 많이 다니시는데 저의 글을 참고하시는데 100% 정확한 것은 아닙니다. 내일 무엇이 업그레이드 될지 모르니까요.

    3. BlogIcon 신기한별 2011.06.03 10:00 신고  댓글주소  수정/삭제  댓글쓰기

      오늘도 좋은 정보 잘 보고 갑니당~

    4. 2011.06.03 10:00  댓글주소  수정/삭제  댓글쓰기

      비밀댓글입니다

    5. BlogIcon 로사아빠! 2011.06.03 10:38 신고  댓글주소  수정/삭제  댓글쓰기

      오늘도 좋은 정보네요
      나중에 블로그운영하기 책으로 엮으셔도 좋을거 같아요
      즐거운 금요일 되세용

    6. BlogIcon 판타시티 2011.06.03 10:46 신고  댓글주소  수정/삭제  댓글쓰기

      ㅋㅋㅋ 전현직 웹디가 아니라고 하는데 왜이렇게 웃긴지요 ㅋㅋ

    7. BlogIcon 재아 2011.06.03 11:08 신고  댓글주소  수정/삭제  댓글쓰기

      확장면에서는 확실히 편하긴 티스토리가 좋긴 합니다..

      단지 좀 불편할뿐인데... 불편함을 ㅋㅋ 노련함으로 극복한다면 네이버보다는 최고죠^^;

    8. BlogIcon 스마일타운 2011.06.03 11:53 신고  댓글주소  수정/삭제  댓글쓰기

      나중에 책 한권 펴내셔도 될거같습니다. ㅎㅎ
      좋은 정보 잘보고 갑니다. 행복한 하루 되세요.

    9. BlogIcon 샤프심 2011.06.03 12:12 신고  댓글주소  수정/삭제  댓글쓰기

      네이버 블로그도 자율적으로 변경할수 있는 부분이 조금더
      넓어졌으면 좋을텐데요,..

    10. BlogIcon †마법루시퍼† 2011.06.03 13:30 신고  댓글주소  수정/삭제  댓글쓰기

      백전백승님, 아무래도 티스토리는 html이나 태그 소스를 아는 사람이 유리하지요. ^^

    11. BlogIcon 아하라한 2011.06.03 14:01 신고  댓글주소  수정/삭제  댓글쓰기

      크흑...타이틀 이미지에 링크 걸고 싶기는 한데...정말 백전백승님께는 죄송하지만...
      언제나 따라할려고 해도 겁나더라구요...
      나중에 좀 내공이 생기면 도전해야할 과제가 저에게는 '스킨 & html' 이랍니다. ^^

    12. 2011.06.03 14:25  댓글주소  수정/삭제  댓글쓰기

      비밀댓글입니다

    13. BlogIcon 아이S'티 2011.06.03 15:10 신고  댓글주소  수정/삭제  댓글쓰기

      한번더 읽어봐야겟네요 ㅠㅠ

    14. BlogIcon 날아라뽀 2011.06.03 17:36 신고  댓글주소  수정/삭제  댓글쓰기

      아 좋은 정보 감사해요.
      근데 나는 왜이렇게 잘 못하죠.ㅠ

    15. BlogIcon 솜다리™ 2011.06.03 20:08 신고  댓글주소  수정/삭제  댓글쓰기

      어려워서 그냥 패스합니다^^

    16. BlogIcon 이베이날다 2011.06.03 23:16  댓글주소  수정/삭제  댓글쓰기

      제가 백전백승님을 블로그 초창기에 알았다면,
      좀더 블로그에 쉽게 접근할 수 있었을텐데 말이죠 ..ㅋㅋ

      지금이라도 많은 도움받고 있어서 다행이네여 ^^

    17. BlogIcon +요롱이+ 2011.06.06 16:05 신고  댓글주소  수정/삭제  댓글쓰기

      요롱이 왔어요!!
      이거 너무너무너무 필요한 정보였는데!!
      감사합니다!!

    18. BlogIcon ducreative 2012.01.20 19:52  댓글주소  수정/삭제  댓글쓰기

      큰 도움 됐어요. 감사합니다. ^^

    19. BlogIcon 수에르떼 2012.02.16 02:07 신고  댓글주소  수정/삭제  댓글쓰기

      감사합니다. 덕분에 해결했어요~^0^

    20. BlogIcon 양요섭내반쪽 2012.09.29 00:32 신고  댓글주소  수정/삭제  댓글쓰기

      정보 감사합니다~
      그런데 '홈으로' 버튼이 엑박이 뜨는데 어떡해야하죠?ㅠㅠ

      • BlogIcon . 백전백승 2012.09.29 18:37 신고  댓글주소  수정/삭제

        소스는 보니 엑박이 나오는 주소 설정에서 https://ts.daumcdn.net/custom/blog/107/1070175/skin/images/
        http://cfs.tistory.com/custom/blog/107/1070175/skin/images/1000_150%20복사.png 됐던데 https://ts.daumcdn.net/custom/blog/107/1070175/skin/images/을 빼고 http://cfs.tistory.com/custom/blog/107/1070175/skin/images/1000_150%20복사.png 라고만 해야 하는데요. http://은 한 번만 정의돼야 합니다.

    21. BlogIcon Edge Basser™ 2014.02.18 23:56 신고  댓글주소  수정/삭제  댓글쓰기

      아 아직 생소하지만 배워갑니다. 다시 오겠습니다.