티스토리 글목록 사진(썸네일)으로 변경하기

블로그에 글목록이 아니라 사진목록으로 표시하는 방법!

티스토리 블로그를 운영하면서 어떻게 하면 조금더 가독성이 좋은,

보기좋은 또는 이쁘게 블로그를 꾸밀까? 모두들 한번쯤은 하는 고민입니다.

저도 그 중의 한명이고 또한 남들보다 집착이 심한부류중의 하나입니다. 내가 생각하는

디자인은 무조건 내 생각대로 해야 직성이 풀립니다.

그렇지 않으면 엄청난 스트레스를 받기에 몇 날 몇일을 가능한 방법을 쥐어짜며

인터넷을 뒤지고 뒤져서라도 변경하고야 맙니다.

오늘 소개할 방법도 저를 엄청난 스트레스를 받게 한 기능중의 하나입니다.

네이버 블로그의 경우에는 글목록과 갤러리(썸네일)형태로 볼수있는 기능이 있지만,

티스토리같은경우 기본적으로 글목록의 형태로만 볼 수 있도록 지원하고 있습니다.

하지만 저는 이 글목록이 아닌 사진과 글제목이 포함된 썸네일의 형태로 변경하려고

하는데요, 어느 블로거가 이러한 기능을 개선하고자 티스토리측에 문의하였지만 글목록을 썸네일 형태로 바꾸려면 전체적인 구조가 변경이 되야하는

매우 크고 위험한 작업인지라 티스토리측에서도 이러한 문제점을 알고는 있으나 섣불리 변경하기가 쉽지 않다고 답변이 왔다고 합니다.

그러나 개개인의 블로그라면 소스를 조금만 추가하고 태그도 조금만 변경하면 이러한 기능도 가능합니다. 하지만 생각보다 쉽지는 않더군요...

인터넷을 뒤지고 뒤져서 결국엔 썸네일의 형태로 변경하는 방법을 찾아 여러분께 공유해드립니다.

썸네일만들기에 필요한 소스와 만드는 방법입니다.

▶ 관련포스팅 : 키워드 분석추출 프로그램을 사용하여 단기간에 돈버는 글 작성방법!
▶ 관련포스팅 : 블로그로 돈을 벌려면 먼저 SEO최적화 방법을 배워라!
▶ 관련포스팅 : 블로그 유입률을 높이는 메타블로그 가입하기 1탄입니다.
▶ 관련포스팅 : 블로그 유입률을 높이는 메타블로그 가입하기 2탄입니다.
▶ 관련포스팅 : 크롤링이란? 방문자수에 절대적인 영향을 끼치는 크롤링 알아두기!
▶ 관련포스팅 : 저품질블로그의 원인과 해결방법 총정리!(구글에서 "저품질" 만 입력해도 제 포스팅이 첫번째로 나옵니다. ^^)

1. 일단 티스토리 HTML편집화면에서 style.css로 들어가 아래의 소스를 아무곳에 붙여넣기 하시면 됩니다. 저는 헷갈리지 않게 맨 하단에 붙여넣기 하였

는데 여러분도 하단부분에 하는게 좋습니다.

썸네일소스.txt

/* fixed_img_col */
.fixed_img_col .hx{margin:0;background:#035e4c;padding:6px 10px;font-size:15px;line-height:normal;color:#fff;margin-top:5px;/*@title-font-
family=font-family:*/ font-family: Verdana,Malgun Gothic,nanumgothic,sans-serif /*@*/;}
.fixed_img_col .hx em{color:#fff;font-size:11px;font-style:normal}
.fixed_img_col ul{overflow:hidden;position:relative;margin:0;padding:0;border:1px solid #ddd;border-left:0;border-right:0;font-size:12px;font-
family:Tahoma, Geneva, sans-serif;list-style:none;*zoom:1}
.fixed_img_col ul:after{display:block;clear:both;content:""}
.fixed_img_col li{overflow:hidden;float:left;position:relative;top:1px;width:320px;padding-left:15px;height:260px;border-bottom:1px solid #eee}
.fixed_img_col li.odd{padding-left:0}
.fixed_img_col .thumb{display:block;overflow:hidden;position:relative;width:318px;height:180px;background:#eee;color:#666;line-height:180px;
text-align:center;white-space:nowrap;border:1px solid #e7e5e6}
.fixed_img_col .thumb img{display:block;width:318px;height:180px;border:0}
.fixed_img_col a{display:block;width:320px;margin:0 auto;padding:20px 0 0 0;text-decoration:none;cursor:pointer}
.fixed_img_col a strong{display:inline-block;margin:8px 0 0 0;color:#333}
.fixed_img_col p{width:320px;margin:0 auto;font-size:11px;color:#767676}
.fixed_img_col a:hover strong,
.fixed_img_col a:active strong,
.fixed_img_col a:focus strong{text-decoration:underline}
.fixed_img_col a:hover .thumb,
.fixed_img_col a:active .thumb,
.fixed_img_col a:focus .thumb{border:1px solid #999}
.fixed_img_col .thumb .dno{display:none}
.fixed_img_col .w180 li{width:180px;padding-left:10px;height:165px}
.fixed_img_col .w180 .thumb{width:172px;height:90px}
.fixed_img_col .w180 .thumb img{width:172px;height:90px}
.fixed_img_col .w180 a{width:180px}

위 소스는 너비(width)가 320크기와 180크기 두 가지를 제공하고 있습니다. 그리고 한 줄마다(열 마다)몇 개의 썸네일(포스팅)을 지정할 수 있는 기능을

제공하고 있습니다. 그러나 스타일 시트의 편집을 통해 이 외의 다른 너비도 사용이 가능합니다.

위에서 빨갛게 표시해놓은 부분만 본인의 원하는크기로 수정을 해주시면 됩니다. 적용하기 어렵다고 생각하시는 분은 위의 소스를 그대로 적용해주셔도

무방하지만 위 소스대로 사용할시 썸네일의 너비는 320, 또는 180만 사용하실 수 있습니다.

혹여, 이미지(썸네일)끼리의 사이간격을 조정하시려면 파랗게 표시된 padding-left:15px 부분에서 숫자만 본인이 원하는 간격으로 수정해주시면 됩니다.

저도 조금씩조금씩 수정하면서 제 블로그에 딱 보기좋게 수정했습니다. 저는 너비 233에 간격 24px 로 했더니 딱 맞네요 ㅎㅎ

2. skin.html에서 Ctrl+F 누르시고 <s_list_rep>을 검색해주세요. 그러면 <s_list_rep> 바로 위에 <ol>부분이 있을건데 바로 그 위에 아래 소스를

붙여넣어주세요. (위 첨부파일에 소스있음)

<div class="fixed_img_col">

<h1 class="hx">[ ##_list_conform_## ] <em>+[ ##_list_count_## ]</em></h1>

<ul>

<s_list_rep>

<li>

<a href="[ ##_list_rep_link_## ]"><span class="thumb"><img src="img/@thumbSquare.jpg" alt="" class="dno"><span id="str">Loading..</span></span> <strong>[ ##_list_rep_title_## ]<span class="cmt">[ ##_list_rep_rp_cnt_## ]</span></strong></a>

<p>[ ##_list_rep_regdate_## ]</p>

</li>

</s_list_rep>

</ul>

</div>

이때 썸네일의 너비를 180으로 사용하고자 하실때에는 빨갛게 표시해둔 <ul>부분을 <ul class="w180">으로 수정해주시면 됩니다.