블로그의 글을 읽다보면 눈에 띄게 예쁜 소제목들이 있습니다. 피터님이나 이츠하크님, 아하라한님처럼 예쁜 이미지로 만들어 놓은 소제목을 볼때면 탐이나지만 아쉬운점들이 많이 있었습니다.  
 
 오늘글은 이미지 소제목을 <hx>태그로 변환하는 방법에 대해 포스팅해봤습니다. 평소 소제목때문에 고민 하셨던 분이라면 참고하시면 좋을 것 같습니다.


이미지 소제목의 단점 3가지 
 
 블로그 소제목을 이미지로 만들면 아래와 같은 단점들이 있습니다.

- 매번 포토샵이나 파워포인트 작업을 해줘야 되서 번거롭다.
- 포탈 검색에 불리해진다. 
- 모바일 페이지에서는 이미지의 크기가 자동전환이 되지 않는다.


이미지 소제목 <h>태그로 변환하는 법  

변환할 이미지 소제목  ( 출처 : 피터님 )



1. 글자 표시가 없는 소제목 배경이미지를 만든다. 



2. 배경이 포함되어있는 <h>태그를 만들어준다. 

블로그관리 > html/css편집 > css부분에 배경이 포험된 <h>태그를 만들어주면 됩니다. 
Life in mono 스킨은 .article h1태그가 지정이 되어있지 않아 하단의 h태그.txt 파일의 내용을 css 제일 하단에 추가만 해주시면 됩니다. 단, 스킨에 따라 .article h1 태그가 이미 지정이 되어있다면 그 내용만 수정해주시면 됩니다. 


-  피터님이 제작한 소제목은 바탕체, 폰트크기는 20pt정도(?) / pt와 px은 단위가 다릅니다.
- <h>태그속 제목의 위치는 padding으로 조절이 가능합니다. 
- <h>태그 전체의 위치조정은 margin으로 하시면 됩니다. 
- 이미지는 비공개게시글에 올리거나 스킨 업로드를 이용하시면 됩니다. 
- .article h1이 이미 지정이 되어있다면 내용만 수정해주시면 됩니다.  


3. 글쓰기에 <h>태그 설정해주기  

1. 글쓰기 우측 상단에 HTML을 체크합니다.



2. 원하는 소제목을 만들 내용에 
<h>태그를 적용시키면 됩니다.


테스트 1234


<h>태그는 <h1>~</h1> 쌍을 맞춰주셔야합니다. 즉, <h1> 내용 </h1> 이렇게 내용 사이를 <h>태그로 감싸주시면 됩니다. h2로 설정하셨다면 <h2> 내용 </h2>라고 설정하시면 됩니다.

완성된 모습 비교  


이미지 소제목



<h>태그 소제목

박카스D와 리포비탄D,과연 누가 표절인가?



후기

 거의 비슷하지 않나요 ? 마우스로 <h>태그 소제목을 드래그 해보면 아시겠지만 아래 <h>태그 소제목은 텍스트입니다. 확인해보세요 ^^; ( 오늘 하루만 마우스 오른쪽 잠금을 풀어두었습니다. )

 티스토리 블로그를 하면서 소제목때문에 신경쓰이셨던 분들은 오늘 <h>태그를 이용하셔서 검색과 가독성에도 도움이되고 사용하기 편리한 소제목을 만들어 보시길 바랍니다. 내일은 <h>태그에 대한 더 자세한 내용과 활용하는 방법을 포스팅할 계획입니다.

<h>태그를 잘 활용한 Seen님 블로그 구경하러가기 : http://www.think-tank.co.kr/135


신고

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 블로그 처음 시작할때 이것저것 해볼때가 재미있었죠..ㅋ
    지금은 그냥 귀찮고 한번 손대면 또 다른걸 손대고 싶어져서 그냥 글쓰기에만 집중하고 있지요 ㅎㅎ
    나중에 날잡아 한번 인테리어 해야 하는데.. ㅎㅎㅎ

    2011.03.17 21:52 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 저도 괜찮은 이미지 소제목 하나 만들어야 하는데~ ㅋㅋㅋㅋ
    아직까지도 귀찮아서 못만들고 있다는 --;
    흐음.. 이거야 말로 귀차니즘 종결자~ ㅋ
    SEEN님의 깔끔한 소제목을 보니까 만들고 싶어지네요~ 흐음..
    주말에 한번 도전해봐야겠습니다.
    모바일 스킨도 해야 하고 할게 많네요~ ㅋㅋㅋㅋㅋㅋ

    2011.03.18 10:32 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 어려워보이긴 하지만 한번 해두면 아주 유용할 듯 싶어요
    근데 그 귀차니즘이 젤 문제인듯ㅎㅎ
    즐거운 금욜 되세요 티비님^^

    2011.03.18 10:41 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 물론, 애플의 소프트웨어는 거리의 혜택을 유지. 사실 마이크로 소프트 준 관련된 여러 상당히 우울 숫자 반대로 소프트웨어를 포함한 모든 유형의 다양한이야. '마이크로 소프트'기능이 전략은 특히 온라인 게임의 전체 세계에, 그럼에도 불구하고 내가 네 요구 사항에 매우 중요합니다 다가오는 상세 패싯에 대한 도박을 할 수 있습니다 모르겠어요. 아이팟 따라서 종종 우수한 대안입니다.

    2011.08.14 00:43 신고 [ ADDR : EDIT/ DEL : REPLY ]
  6. 티비의 세상구경,
    좋은 정보 감사! ㅎㅎ

    2011.09.09 01:52 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. 와... ㅠㅠ 정말 유용한 글 감사합니다.
    서식등 고민을 했었는데... 일일이 이미지만들어 놓고 글자만 계속 수정할까 했는데...
    정답이 여기있군요!! ㅎㅎ

    2011.10.01 00:17 신고 [ ADDR : EDIT/ DEL : REPLY ]
  8. 아주 신 기한

    2011.10.09 09:42 신고 [ ADDR : EDIT/ DEL : REPLY ]
  9. 여기에 귀하의 사이트에 멋진 정보입니다. 귀하의 블로그에서 유용한 정보를 얻을 수 있기 때문에 나는이 게시물을 사랑 해요. 난 너희들에서 더 많은 게시물을 기대합니다

    2011.11.16 10:47 신고 [ ADDR : EDIT/ DEL : REPLY ]
  10. 어려우시더

    2011.12.01 15:13 신고 [ ADDR : EDIT/ DEL : REPLY ]
  11. 요~ 너무

    2011.12.01 15:13 신고 [ ADDR : EDIT/ DEL : REPLY ]
  12. 높이는데

    2011.12.01 15:14 신고 [ ADDR : EDIT/ DEL : REPLY ]
  13. 제목을 사용

    2011.12.01 15:14 신고 [ ADDR : EDIT/ DEL : REPLY ]
  14. 시면요~ 너

    2011.12.01 15:14 신고 [ ADDR : EDIT/ DEL : REPLY ]
  15. 이 게시물을 작성하는 시간을내어 주셔서 감사합니다, 난 당신이 내 친구들과 함께 작성한 내용을 여러 사람과 공유해야합니다.

    2012.11.01 16:49 신고 [ ADDR : EDIT/ DEL : REPLY ]
  16. 게시물이 아주 좋은 방식으로 작성하고 나를 위해 많은 유용한 정보를 수반합니다.

    2012.11.14 20:00 신고 [ ADDR : EDIT/ DEL : REPLY ]


  17. 블로그,
    다음,
    프로필,
    자기소개,
    마이콘,
    별명,
    만들기,
    개설,
    기본정보,
    기본프로필

    2013.06.12 19:48 신고 [ ADDR : EDIT/ DEL : REPLY ]
  18. 方得到這方面的信息在這樣一個完整的書面的方式嗎?我有一個演示文稿傳入的一周,我在尋找這樣的信息。

    2013.07.01 17:12 신고 [ ADDR : EDIT/ DEL : REPLY ]
  19. 를 개최합니다.이번 파티는 지난 6월에 진행된 블로그 축제에서 선정된 우수 글 책 발간을 축하하는 자리로
    이벤트에 참여한 사람 중

    2013.07.29 14:24 신고 [ ADDR : EDIT/ DEL : REPLY ]
  20. 글 잘봤습니다!!

    한가지, hx태그가 왜 검색에 불리한지 궁금합니다!!

    2013.10.31 17:16 신고 [ ADDR : EDIT/ DEL : REPLY ]
  21. 저는 왜 안될까요?
    제가 jpg 만들어서 파일업로더 후 url주소만 hx태그.txt파일에 수정하고 html/css에서 css의 article 란 밑에 넣었어요.
    글쓰기에서 html 누르고 <h1>123</h1>쓴 후 html 다시 눌렀는데 왜 이미지가 안나타날까요? ㅠㅠ
    조언 좀 해주세요 ㅠㅠ

    2014.08.22 23:16 신고 [ ADDR : EDIT/ DEL : REPLY ]

티스토리 툴바