티스토리 블로그 티애디션 타이틀을 이미지로 적용하기
- 블로그 관련 정보
- 2013. 12. 18.
티스토리 블로그 티애디션 타이틀을 이미지로 적용하기
오늘은 티스토리 블로그의 티애디션에서 표현되는 타이틀을 텍스트가 아닌 이미지로 적용하는 방법을 알려드립니다. 저 또한 과거 오래도록 티애디션의 타이틀을 이미지화 시켜 적용하였던 적이 있으며, 최근에도 티애디션의 타이틀을 이미지로 적용하고자 하시는 분들이 많은 것 같습니다. 즉, 수요가 있지만 티스토리 자체에서는 그 어떠한 가이드라인이나 방법론이 제시되지 않고 있기 때문에 블로거 개개인이 직접 수작업으로 HTML 소스코드를 수정하는 방법 외에는 마땅한 대책이 없는 실정입니다.
티애디션의 타이틀을 이미지로 적용한 모습 ▲
티애디션의 타이틀을 이미지로 적용한다는 것은, 자신의 블로그 첫화면을 티애디션으로 구성한 다음 마치 잡지나 컬렉션, 카탈로그처럼 독자에게 보여지기 위함일 것입니다. 곧 따분한 티애디션의 모습이 아니라 세련된 디자인의 타이틀 이미지를 통해 자신의 콘텐츠를 더욱 돋보이게 하기 위함입니다. 이렇게 하기 위해 사용자가 해야 할 일은 딱 2가지 입니다.
- 이미지를 제작하여,
- 해당 이미지의 소스코드를 얻은 다음, 티애디션 HTML에 넣어주기
수정하고자 하는 티애디션 항목을 클릭한 다음 HTML수정을 클릭하여 다음과 같은 소스코드를 찾아냅니다. 큰 이변이 없다면 최상단에 위치해 있을 것입니다. (아이템마다 소스코드가 약간씩 다를 순 있습니다만 치환자는 동일합니다.)
이 소스코드에서 h2 class=tt-item-title은 없어도 무방합니다만, tt-item-title-bg와 tt-item-title-inner에 해당하는 클래스는 지워버릴 경우 이미지가 티애디션의 틀을 벗어나는 등의 문제가 있으니 살려두어야 합니다.
수정해야 할 소스코드는 바로 위의 소스코드에 있는 치환자 샵샵 _ item _ title _ 샵샵 부분입니다. 이 치환자를 삭제한 후, 다음의 소스코드를 해당 위치에 넣어주면 티애디션의 타이틀은 이제 텍스트가 아니라 사용자가 지정한 이미지로 대체됩니다.
Note
티애디션은 일반적으로 텍스트 보다는 이미지 위주로 설정됩니다. 티애디션이 디자인되면 디자인 될수록 보는 사람 입장에서는 매우 수려합니다만 많은 이미지를 한꺼번에 불러오고 링크시키는 과정이 이루어지면서 로딩 속도에 큰 영향을 주고 있습니다. 만약 여러분의 블로그가 티애디션을 사용하지 않는다면 블로그 접속 속도를 매우 향상시킬 수 있을 것입니다. 즉, 티애디션은 기능과 디자인 중 기능을 일부 포기하는 대신에 선택하는 아이템이라 할 수 있습니다.
PC나 데스크탑 환경에서는 인터넷 속도가 빠르고 안정적이기 때문에 큰 문제가 없을 것입니다만 모바일 환경처럼 인터넷 속도를 가늠할 수 없다면 무리한 티애디션의 설정은 지양해야 될 부분이 되겠습니다. 티스토리 자체에서 제공 중인 모바일 스킨에서 티애디션을 지원하지 않는 이유와도 일맥상통합니다. 만약 블로그 스킨이 반응형이라면 PC화면과 모바일 화면의 티애디션이 조금 다르게 디자인하는 편이 좋아보입니다.
기본적으로 티애디션은 타이틀을 텍스트로 지정해두고 있습니다. 오늘의 이 방법은 텍스트를 강제로 이미지로 바꾸는 것입니다. 따라서 더 많은 이미지가 한꺼번에 로딩되면서, 블로그 첫화면을 불러오는 속도에 더 많은 영향을 줄 것으로 예상됩니다. 결국 티애디션의 타이틀 이미지는 용량이 작고 간략하게 디자인되면 될수록 더 괜찮은 사용자 경험을 제공할 것입니다.