나만의 다이어리 같은 예쁜 디자인으로 블로그 할 때 프라치노 노트북 스킨을 사용합니다. 얼마전 애드센스 수익형 블로그를 해보고싶어서 스킨을 바꿨습니다. 구글 SEO에 최적화된 라코 스킨을 구매했는데 가볍고 빠르고 편해서 좋아요.
티스토리를 오래전부터 사용해오면서 무료스킨 뿐만 아니라 유료스킨도 많이 써봤습니다. 저번에 대표 유료스킨들의 속도 비교를 해보니 라코가 1위였습니다. 하루에 100불 찍기 전까지는 이 스킨으로 갈 생각입니다.
사용 후 몇 가지 장점이 있습니다.
페이지 상단에 빵 부스러기를 보여주어 SEO에 좋고 방문자가 사이트의 구성을 직관적으로 알 수 있습니다.
자동 목차 생성 기능이 있습니다. 요즘 이 목차를 지원하지 않는 스킨이 없는 것 같은데, 한가지 마음에 들었던 점은 제목 1(H2 태그) 바로 위에 자동으로 넣어준다는 점입니다.
JB스킨의 경우 포스팅 상단에 자동으로 나타나게 하거나 수동으로 원하는 위치에 넣어야 하는데, 목차가 상단에 고정되어 나오는 것이 마음에 들지 않았습니다. 애드센스 광고 역시 방문자가 설명에 해당하는 소개 문구를 먼저 보는 것이 바람직하기 때문에 상단에 배치하지 않습니다.
그러면 결국 원하는 위치에 짧은 코드를 수동으로 삽입해야 하는데, 이 또한 상당히 귀찮은 일입니다. 하지만 라코스킨에서는 자동으로 Title 1 위에 올려지므로 딱 적당한 위치입니다. 설명 – 광고 – 단어나 목차 추가 – 제목 1 내용의 시작 나는 종종 이 순서로 포스팅을 정리한다.
또한 하단의 다른 카테고리에도 신경을 많이 썼습니다. 티스토리의 기본 디자인이 보기가 쉽지 않아 큰 사이즈로 변경했고, 이전 포스트와 다음 포스트를 볼 수 있는 별도의 버튼도 삽입했습니다.
블로그 성장을 위해 가장 중요한 것은 일탈하지 않고 사람들이 더 오래 머물면서 더 많은 게시물을 읽게 만드는 것입니다. 그런 의미에서 굉장히 바람직한 방향으로 구성된 스킨이라고 할 수 있습니다.
단 하나의 하이퍼링크 디자인은 노트북 스킨을 사용할 때 원래의 형태를 유지하고 싶어서 스킨을 약간 수정했습니다.
/*링크*/
.entry-content a {
color: #1a0dab !important;
border-bottom: 3px solid #FCFFA5;
box-shadow: inset 0 0px 0 white, inset 0 -8px 0 #FCFFA5;
}
.entry-content a:hover,
.entry-content a.touch{
color: #1a0dab;
background: #FCFFA5;
padding-top: 0px;
}
.bf-breadcrumb .bf-breadcrumb-items a{
border-bottom: 0px solid #FCFFA5;
box-shadow: inset 0 0px 0 white, inset 0 0px 0 #FCFFA5;
}
.book-toc a{
color: #676767 !important;
border-bottom: 0px solid #FCFFA5;
box-shadow: inset 0 0px 0 white, inset 0 0px 0 #FCFFA5;
}하이퍼링크의 텍스트를 구글 검색 결과의 파란색에 맞춰 노란색 밑줄로 강조하는 형태로 넣었습니다.
이와 같이 본문에 대한 내부 또는 외부 링크를 연결하여 참조할 기사도 모아놓고 참조한 기사에 표시를 한다.