티스토리 인덱스 페이지 꾸미기

티스토리 첫 화면에 썸네일형 글 목록 사용하기

귀찮아서 그렇지 그리 어렵지 않습니다. 한 시간 정도만 투자하면 티스토리 첫 화면 인덱스 페이지에 썸네일형 글 목록을 사용할 수 있습니다. html을 조금만 알고 있다면 5분도 채 안걸릴 겁니다.


몽리넷 인덱스 페이지


인덱스 페이지의 썸네일형 글 목록은 티스토리 반응형 스킨 #2의 소스를 살짝 변경하여 적용하면 됩니다. 몽리넷 블로그에는 최근까지 사용하던 마크쿼리 티에디션 최근 글 목록처럼 대표 썸네일 이미지가 좌측에 표시되게 하였습니다. 사이드바가 우측에 있어 썸네일 위치를 변경한 것인데요. 사이드바가 좌측인 스킨은 대표 썸네일을 우측에 놓고 사용하는 것이 좋습니다.


귀찮은 것을 왜 하냐굽쇼? 마크쿼리 스킨의 썸네일형 글 목록은 티에디션을 변경하기 위해 미리 준비했던 것입니다. 8월 말 티스토리 SSL 적용이 예정되어 있었기에 SSL 적용 후 사용할 수 없는 것들을 미리 파악해 놓았었네요.


꿈속으로 블로그 SSL 적용 전


마크쿼리의 티에디션은 http주소로 된 이미지를 사용하여 위와 같이 '이 사이트의 보안 연결(HTTPS)은 완벽하지 않습니다.'로 경고가 뜹니다. 비슷한 형태의 티에디션 최근 글 목록을 사용한다면 아마도 보안 문제가 발생될 것입니다. 녹색의 안전 마크를 획득하고 싶다면 https 이미지 주소를 사용하는 것으로 변경해주어야 합니다.


꿈속으로 블로그 썸네일형 최근 글 목록과 사이드바의 일치하는 콘텐츠


사실 저도 한 귀차니즘 합니다. 그래서 두 가지를 준비했었습니다. 비교적 쉽게 적용할 수 있는 일치하는 콘텐츠를 티에디션에 배치 했었습니다. 사이드바에도 일치하는 콘텐츠를 위젯으로 사용하면 좋을 것 같아 미리 적용해 놓았었고요. 그런데 이 일치하는 콘텐츠가 문제가 조금 생기더군요. 디자인도 문제이었지만 더 큰 문제가 있더라고요.


애드센스 일치하는 콘텐츠 설정


PV와 체류 시간 높이는 것이 목적이었기에 수익 창출 기능을 비활성 시키고 사용하였는데요. 기대했던 PV는 찔끔 오르고 수익은 대 폭락~ 몽리넷 블로그의 경우는 역효과만 발생하여 사이드바에 추가했던 일치하는 콘텐츠 위젯을 제거하였습니다.


꿈속으로 블로그 모바일 접속 시


최근순으로 설정하여 그랬을까요. 인덱스 페이지의 최근 글 목록과 일치하는 콘텐츠에 노출되는 글이 거의 비슷하더라고요. 잡설이 너무 길었졌네요. 여튼


티스토리 인덱스 페이지 html 소스 및 치환자


티스토리 인덱스 페이지의 썸네일형 최근 글 목록은 티스토리에서 제공하는 소스와 티스토리 반응형 스킨 #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=[##_article_rep_thumbnail_raw_url_##]"> 부분에서 설정할 수 있습니다.


썸네일 이미지 크기는 C150x150으로 되어 있는데요. 이부분을 변경하면 썸네일 비율 및 크기 등을 변경할 수 있습니다. R200x200, P200x200, C200x200 등과 같은 형식으로 변경하면 됩니다.


티스토리 CSS 편집에서 검색


CSS에서 해당 요소의 스타일을 검색합니다. Ctrl + F 키를 누른 후 검색하면 됩니다.


티스토리 인덱스 페이지 css 스타일 소스


노란색으로 하일라이트 된 부분의 소스를 변경하면 썸네일 이미지의 위치, 크기, 여백, 색상 등을 변경할 수 있습니다. 아래쪽의 보라색 부분 @media (max-width:767px){ 스타일 소스 } 부분은 모바일용 스타일입니다.


이런 눈치 못채셨다굽쇼? 위의 캡쳐 이미지가 몽리넷 블로그의 썸네일형 최근 글 목록 css 소스입니다. 참고하여 자신의 블로그에 맞게 변경하시면 되겠습니다. 그럼 끝~


관련 게시물

티스토리 신고 버튼 제거하기

마크쿼리 댓글 신고 버튼 수정하기

티스토리 댓글의 URL 자동 링크하기

티스토리 카테고리의 다른글 썸네일 표시하기

마크쿼리 스킨 불필요한 소스 삭제하기


©꿈속으로(mongri.net), 무단전재 및 재배포 금지. 공유와 직접 링크를 선호합니다.
[저작권 규약, 운영 원칙 및 이용자 준수 사항]