티스토리 블로그 티애디션 타이틀을 이미지로 적용하기

반응형

티스토리 블로그 티애디션 타이틀을 이미지로 적용하기

오늘은 티스토리 블로그의 티애디션에서 표현되는 타이틀을 텍스트가 아닌 이미지로 적용하는 방법을 알려드립니다. 저 또한 과거 오래도록 티애디션의 타이틀을 이미지화 시켜 적용하였던 적이 있으며, 최근에도 티애디션의 타이틀을 이미지로 적용하고자 하시는 분들이 많은 것 같습니다. 즉, 수요가 있지만 티스토리 자체에서는 그 어떠한 가이드라인이나 방법론이 제시되지 않고 있기 때문에 블로거 개개인이 직접 수작업으로 HTML 소스코드를 수정하는 방법 외에는 마땅한 대책이 없는 실정입니다.

 


티애디션의 타이틀을 이미지로 적용한 모습 ▲


티애디션의 타이틀을 이미지로 적용한다는 것은, 자신의 블로그 첫화면을 티애디션으로 구성한 다음 마치 잡지나 컬렉션, 카탈로그처럼 독자에게 보여지기 위함일 것입니다. 곧 따분한 티애디션의 모습이 아니라 세련된 디자인의 타이틀 이미지를 통해 자신의 콘텐츠를 더욱 돋보이게 하기 위함입니다. 이렇게 하기 위해 사용자가 해야 할 일은 딱 2가지 입니다.

  1. 이미지를 제작하여,
  2. 해당 이미지의 소스코드를 얻은 다음, 티애디션 HTML에 넣어주기



수정하고자 하는 티애디션 항목을 클릭한 다음 HTML수정을 클릭하여 다음과 같은 소스코드를 찾아냅니다. 큰 이변이 없다면 최상단에 위치해 있을 것입니다. (아이템마다 소스코드가 약간씩 다를 순 있습니다만 치환자는 동일합니다.)



이 소스코드에서 h2 class=tt-item-title은 없어도 무방합니다만, tt-item-title-bgtt-item-title-inner에 해당하는 클래스는 지워버릴 경우 이미지가 티애디션의 틀을 벗어나는 등의 문제가 있으니 살려두어야 합니다.


수정해야 할 소스코드는 바로 위의 소스코드에 있는 치환자 샵샵 _ item _ title _ 샵샵 부분입니다. 이 치환자를 삭제한 후, 다음의 소스코드를 해당 위치에 넣어주면 티애디션의 타이틀은 이제 텍스트가 아니라 사용자가 지정한 이미지로 대체됩니다.




Note

티애디션은 일반적으로 텍스트 보다는 이미지 위주로 설정됩니다. 티애디션이 디자인되면 디자인 될수록 보는 사람 입장에서는 매우 수려합니다만 많은 이미지를 한꺼번에 불러오고 링크시키는 과정이 이루어지면서 로딩 속도에 큰 영향을 주고 있습니다. 만약 여러분의 블로그가 티애디션을 사용하지 않는다면 블로그 접속 속도를 매우 향상시킬 수 있을 것입니다. 즉, 티애디션은 기능과 디자인 중 기능을 일부 포기하는 대신에 선택하는 아이템이라 할 수 있습니다.
PC나 데스크탑 환경에서는 인터넷 속도가 빠르고 안정적이기 때문에 큰 문제가 없을 것입니다만 모바일 환경처럼 인터넷 속도를 가늠할 수 없다면 무리한 티애디션의 설정은 지양해야 될 부분이 되겠습니다. 티스토리 자체에서 제공 중인 모바일 스킨에서 티애디션을 지원하지 않는 이유와도 일맥상통합니다. 만약 블로그 스킨이 반응형이라면 PC화면과 모바일 화면의 티애디션이 조금 다르게 디자인하는 편이 좋아보입니다.

기본적으로 티애디션은 타이틀을 텍스트로 지정해두고 있습니다. 오늘의 이 방법은 텍스트를 강제로 이미지로 바꾸는 것입니다. 따라서 더 많은 이미지가 한꺼번에 로딩되면서, 블로그 첫화면을 불러오는 속도에 더 많은 영향을 줄 것으로 예상됩니다. 결국 티애디션의 타이틀 이미지는 용량이 작고 간략하게 디자인되면 될수록 더 괜찮은 사용자 경험을 제공할 것입니다.



반응형

댓글(37)

  • 알 수 없는 사용자
    2013.12.18 11:13

    와 좋은 정보잘보고갑니다. 항상 배우고갑니다

  • 2013.12.18 11:22

    간지나는 블로그를 위한 방법인데,
    속도를 신경쓰면... 어쨌든, 즐거운 고민인거죠~ㅎㅎ

    • 2013.12.20 09:11 신고

      반대로보면 씁쓸해요...ㅎㅎ 더 멋진 디자인을 위해 속도를 포기해야 한다니....

  • 2013.12.18 11:48 신고

    항상 신기하게 보고가네요. 이런 쪽으로는 초보라거,,

  • 알 수 없는 사용자
    2013.12.18 14:09

    역시나 어렵군요.ㅎ
    저는 아직 멀었나봐요.ㅎ

  • 알 수 없는 사용자
    2013.12.18 14:51

    이렇게 보니 정말 블로그가 어려운거 같아요.ㅠ

  • 알 수 없는 사용자
    2013.12.18 18:28

    에고... 만들어둔 이미지가 없어서 연습을 할 수가 없네요. ^^ 포스팅 잘 보았습니다.

  • 알 수 없는 사용자
    2013.12.18 20:37

    저도 잘 배우고갑니다

  • 익명
    2013.12.18 21:27

    비밀댓글입니다

  • 2013.12.18 22:09 신고

    잘 알아 간답니다 ~ ^^
    요런 꾸미기가 티스토리의 재미이죠~ ㅎㅎ

  • 2013.12.18 22:42 신고

    이건 생각보다 쉽네요. 자체 이미지가 없는 것도 가능한가요?

  • 알 수 없는 사용자
    2013.12.18 22:53

    덕분에 잘 알아 갑니다^^
    꾸미기 잼있지요^^

  • 2013.12.19 00:17 신고

    저는 아직도 테더데스크를 쓰고 있어요 ㅠㅠ
    음 티에디션으로 바꿔봐야나..고민 중이에요.
    좀더 깔끔한 것 같아요. ^^;

    • 2013.12.20 09:13 신고

      아하 그렇군요 ㅎㅎㅎ
      테더데스크도 잘 쓰면 참 좋던데 관리하기가 조금 티애디션보다 불편한 것 같아서 ㅎㅎ

  • 2013.12.19 02:46

    따로 갖고있는 개인 블로그에 테스트 한번 해봐야겠네요.ㅎㅎ
    좋은 정보 감사합니다. 요런게 티스토리의 장점이죠~^^

  • 2013.12.19 08:44 신고

    포스팅 감사합니다!
    바로 테스트 해 보았구요...해당 이미지가 들어 가긴 하는데...
    이상하게도 예시로 주신 이미지처럼 티에디션 박스 안으로 들어가는 것이 아니라,
    상단의 빈 공간으로 이미지가 삽입되어 모양새가 이상하게 되었네요....
    이를테면 <img src ="http://image.allmusic.com/00/amg/cov200/drg600/g634/g63456wfiaq.jpg"> 이런 식으로 삽입했는데, 제가 선택한 티에디션 area 안으로 안들어가고 위로 삐져왔네요....제가 뭔가 기본적인 걸 모르는 듯 합니다^^

    좋은 정보 감사드립니다!

    • 2013.12.19 09:17 신고

      기본적으로 티애디션에서 이미지를 표시하는 곳과 타이틀이 들어가는 박스가 다르게 설정되어 있습니다. 주소를 주신 정사각형 모양의 이미지를 테스트 해보았으나 정상적으로 삽입되는 것으로 테스트 되었습니다. 제 생각엔 아마 지금 적용하신 아이템이 정상적으로 들어간 듯한 모양새 입니다.^^

    • 2013.12.20 09:31 신고

      감사합니다~
      제가 완전 착각을^^ 티에디션에 대표 이미지를 넣는 방법을 몰라서요..기본이 안된 질문을...ㅠㅠ 주신 내용은 제목을 이미지로 넣는 것이였군요....
      티스토리를 하나씩 알아가는 재미가 쏠쏠합니다^^(사실 이전에 블로그를 한적이 없어서요~)

      좋은 정보 너무너무 감사합니다. 저도 내일 블로그 오픈 하느라..오늘은 일 후다닥 끝내고 준비해야 겠네요...

      아참, '인생을 바꾸는 기적의 블로그' 읽고 저도 블로그 하기로 마음 먹은 사람 중 한명 입니다. 좋은 책 감사드리구요...

      오늘도 파이팅 하세요~~

    • 2013.12.20 09:57 신고

      아하. 그렇군요. ㅎㅎ 해석에 오류가 있었네요;;

      사용하시는 에디터에 따라 2가지 방법이 있습니다.
      (관리자 화면 - 글 설정에서 에디터 현황을 알아볼 수 있습니다)

      1. 이전 에디터를 사용하실 경우 대표이미지는 가장 처음에 업로드 된 이미지로 처리됩니다.
      2. 새 에디터를 사용하실 경우 우측 사이드바에서 직접 설정할 수 있습니다. 참고 : http://underclub.tistory.com/1237

  • 익명
    2013.12.31 21:47

    비밀댓글입니다

    • 2014.01.01 10:54 신고

      방금 이것저것 살펴 보았는데, 큰 문제점이나 이상한 점은 눈에 띄지 않습니다.^^

  • 익명
    2014.01.02 00:47

    비밀댓글입니다

  • 2014.09.18 15:51 신고

    안녕하세요.
    마크쿼리님의 두비두 스킨을 사용 중인데요.
    님께서 현재 사용중인 스킨을 보면, 최상단 메뉴가 스크롤을 하여도 항상 고정적으로
    상단에 위치해 있는데, 이 부분은 혹시 어떤 부분을 수정해야 하는지 도움을 받을 수 있을까요?

    • 2014.09.18 18:21 신고

      제 스킨은 두비두는 아니고 스켈레톤인데 스켈레톤은 1단으로 변경한 케이스입니다.
      또한 마크쿼리 스킨의 예전버전으로서 2.x 버전이라서 상단메뉴가 고정되어 있는 형태입니다. :)

    • 2014.09.19 09:40 신고

      빠른 답변 감사합니다.
      스켈레톤으로 찾아보도록 하겠습니다.

    • 2014.09.19 09:47 신고

      2버전을 찾아보세요. 마크쿼리님 github에 공개되어 있을거에요~

Designed by JB FACTORY