귀찮아서 그렇지 그리 어렵지 않습니다. 한 시간 정도만 투자하면 티스토리 첫 화면 인덱스 페이지에 썸네일형 글 목록을 사용할 수 있습니다. html을 조금만 알고 있다면 5분도 채 안걸릴 겁니다.
인덱스 페이지의 썸네일형 글 목록은 티스토리 반응형 스킨 #2의 소스를 살짝 변경하여 적용하면 됩니다. 몽리넷 블로그에는 최근까지 사용하던 마크쿼리 티에디션 최근 글 목록처럼 대표 썸네일 이미지가 좌측에 표시되게 하였습니다. 사이드바가 우측에 있어 썸네일 위치를 변경한 것인데요. 사이드바가 좌측인 스킨은 대표 썸네일을 우측에 놓고 사용하는 것이 좋습니다.
귀찮은 것을 왜 하냐굽쇼? 마크쿼리 스킨의 썸네일형 글 목록은 티에디션을 변경하기 위해 미리 준비했던 것입니다. 8월 말 티스토리 SSL 적용이 예정되어 있었기에 SSL 적용 후 사용할 수 없는 것들을 미리 파악해 놓았었네요.
티스토리 첫 화면에 썸네일형 글 목록 사용하기
마크쿼리의 티에디션은 http주소로 된 이미지를 사용하여 위와 같이 '이 사이트의 보안 연결(HTTPS)은 완벽하지 않습니다.'로 경고가 뜹니다. 비슷한 형태의 티에디션 최근 글 목록을 사용한다면 아마도 보안 문제가 발생될 것입니다. 녹색의 안전 마크를 획득하고 싶다면 https 이미지 주소를 사용하는 것으로 변경해주어야 합니다.
사실 저도 한 귀차니즘 합니다. 그래서 두 가지를 준비했었습니다. 비교적 쉽게 적용할 수 있는 일치하는 콘텐츠를 티에디션에 배치 했었습니다. 사이드바에도 일치하는 콘텐츠를 위젯으로 사용하면 좋을 것 같아 미리 적용해 놓았었고요. 그런데 이 일치하는 콘텐츠가 문제가 조금 생기더군요. 디자인도 문제이었지만 더 큰 문제가 있더라고요.
PV와 체류 시간 높이는 것이 목적이었기에 수익 창출 기능을 비활성 시키고 사용하였는데요. 기대했던 PV는 찔끔 오르고 수익은 대 폭락~ 몽리넷 블로그의 경우는 역효과만 발생하여 사이드바에 추가했던 일치하는 콘텐츠 위젯을 제거하였습니다.
최근순으로 설정하여 그랬을까요. 인덱스 페이지의 최근 글 목록과 일치하는 콘텐츠에 노출되는 글이 거의 비슷하더라고요. 잡설이 너무 길었졌네요. 여튼
티스토리 인덱스 페이지의 썸네일형 최근 글 목록은 티스토리에서 제공하는 소스와 티스토리 반응형 스킨 #2의 소스를 참고하여 적용하면 됩니다. 우선 티스토리 스킨 가이드에 방문하여 치환자와 구조를 확인하시고요.
반응형 스킨 #2의 썸네일형 최근 글 목록 소스는 #2 소스에서 복사하시면 됩니다. 응? #2 스킨에서 해당 html 및 css 소스를 찾아 복사하려면 조금 귀찮으니 정리되어 있는 '티스토리 인덱스 페이지 썸네일 글 목록 사용하기' 글에 방문하여 복사 하시면 되겠습니다. 소스 적용 방법과 기본적인 소스 변경 방법도 잘 정리 되어 있으니 꼼꼼히 읽어 보시고요.
기본 형태가 마음에 들지 않는다거나 좀 더 세밀하게 디자인을 변경하고 싶다면, 브라우저의 개발자 도구를 이용하여 스타일을 변경하시면 됩니다. 파이어폭스의 개발자 도구에 익숙하지만 사용하는 사람들이 거의 없으니 크롬 개발자 도구로 설명드리겠습니다.
스타일을 변경하고자 하는 요소(텍스트, 이미지, 선 등)에서 마우스 우클릭 버튼을 클릭한 후 검사를 클릭합니다. F12 키를 누르면 개발자 도구가 열리지만 문맥 메뉴의 검사를 이용해야 해당 요소의 스타일을 빠르게 확인할 수 있습니다.
문맥 메뉴의 검사를 클릭하면 크롬 브라우저가 반으로 갈라지며 우측에 개발자 도구가 열립니다. 개발자 도구 화면 요소(Elements) 창에서 소스 부분을 선택하면 좌측 웹페이지 화면에 해당 부분이 하일라이트 됩니다. 요소 창에서 글 목록 박스 부분의 소스를 클릭하면 해당 부분이 하일라이트 되며 우측 스타일 창에 해당 글 목록 박스의 스타일 소스가 표시 됩니다.
요소 창에서 썸네일 이미지 링크 <a href="/2100" class="thumbnail_post">썸네일 주소 소스</a>를 클릭하면 우측에 썸네일 이미지 부분의 스타일 소스가 주륵 표시 됩니다.
.list_content .thumbnail_post {
float: right;
width: 150px;
height: 150px;
margin: 6px 0 5px 30px;
}
위와 같은 부분이 표시될 것인데요. 해당 요소의 스타일을 변경하여 썸네일 이미지의 정렬 위치, 가로 크기, 세로 크기, 외부 여백 부분을 변경할 수 있습니다.
썸네일 크기는 기본적으로 html 소스 중 <img src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/99AB9B395B8F8F8508"> 부분에서 설정할 수 있습니다.
썸네일 이미지 크기는 C150x150으로 되어 있는데요. 이부분을 변경하면 썸네일 비율 및 크기 등을 변경할 수 있습니다. R200x200, P200x200, C200x200 등과 같은 형식으로 변경하면 됩니다.
CSS에서 해당 요소의 스타일을 검색합니다. Ctrl + F 키를 누른 후 검색하면 됩니다.
노란색으로 하일라이트 된 부분의 소스를 변경하면 썸네일 이미지의 위치, 크기, 여백, 색상 등을 변경할 수 있습니다. 아래쪽의 보라색 부분 @media (max-width:767px){ 스타일 소스 } 부분은 모바일용 스타일입니다.
이런 눈치 못채셨다굽쇼? 위의 캡쳐 이미지가 몽리넷 블로그의 썸네일형 최근 글 목록 css 소스입니다. 참고하여 자신의 블로그에 맞게 변경하시면 되겠습니다. 그럼 끝~
