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

Posted by 만웅이 만웅이
블로그 노하우/블로그꾸미기

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


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

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


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

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


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

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


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


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

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


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

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


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


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

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







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





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">으로 수정해주시면 됩니다.





3. skin.html에서 아래소스를 body 와 /body 중간사이 아무데나 붙여넣으세요. 전 body 바로 아래에 붙였습니다. (위 첨부파일에 소스있음)


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

var col = 3;

var width = 320;

</script>

<script src="http://cfs.tistory.com/custom/blog/149/1491216/skin/images/ygal.js"></script>





이때 빨갛게 표시해둔 var col = 3; 와 var width = 320; 부분은 본인의 블로그에맞게 수정해주셔야 합니다. var col = 의 경우는 한 열(줄)에 표시될

포스팅(썸네일)의 수이며, var width = 는 썸네일의 크기입니다.


즉 가로너비크기이며 320을 사용하실 분들은 320을, 180을 사용하실 분들은 180을 입력해주시면 됩니다.

그러니 180을 사용하실분들은 2번의 <ul class="w180">와 3번의 var width = 180; 이렇게 고쳐주시면됩니다.


자 이제 작업이 다 끝났습니다. 제대로 적용되었는지 확인을 해보도록 하겠습니다.





아주 깔끔하게 적용이 되었습니다. 저는 여러번의 너비와 이미지간격 수정을 통해 제 블로그에 딱 맞게 적용한것이니 여러분도 본인의 블로그에 맞게

너비와 이미지 간격을 수정하셔야 될겁니다. 그냥 그대로 쓰셔도 상관없구요. ^^


그리고 3번 스크립트를 보시면 스크립트 파일을 다른 곳, <script src="http://cfs.tistory.com/custom/blog/149/1491216/skin/images/ygal.js">에서

불러와 로딩하고 있음을 확인하실 수 있는데, 이 파일을 직접 자신의 블로그에 업로드 한 뒤 이용하시는 편을 권장드립니다.


왜냐하면, 해당블로그의 스킨이 변경되거나 업로드된 스크립트 파일이 삭제될 시 썸네일 기능이 제대로 작동하지 않기때문입니다.


실험결과 저 스크립트 주소를 지우니 썸네일의 틀은 그대로이나 사진이 뜨지 않더라구요. 해서 해당 스크립트 파일을 다운로드 받은 후 파일업로드 기능을

통해 업로드 한후, 업로드된 주소를 기존<script src="http://cfs.tistory.com/custom/blog/149/1491216/skin/images/ygal.js"> 에서

<script src="본인의 블로그에 업로드된 주소">로 수정해주시면 됩니다. (해당 스크립트파일을 다운받아 아래 첨부파일에 추가하였습니다.)





vgal.js


아래사진처럼 해당파일을 본인블로그에 업로드하시면 됩니다.







※ 제이쿼리(jquery)를 이미 블로그에 사용하고 있는 경우에는 jquery내용을 추가로 두 번 불러올 필요는 없습니다.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ㅡ 이 내용


※ 일부 스킨의 경우 해당 기능이 정상적으로 작동하지 않을 수 있는데 이 경우 기존에 사용중인 제이쿼리(jquery) 부분과 충돌하여 생기는 경우가 많기

때문에 해당 스킨의 내용을 수정하신 뒤 적용하셔야 썸네일 기능이 정상적으로 작동합니다.


이 소스는 http://www.yongzz.com/view.php?bbs=know&no=4 에서 참고하였습니다.







이 댓글을 비밀 댓글로
    • 2015.12.14 10:57
    비밀댓글입니다
    • 2015.12.23 11:45
    비밀댓글입니다
    • s list가 없다면 안됩니다. s list가있는 스킨에 적용하세요
    • 그냥 스킨을 바꾸세요. 저도 기존다른스킨쓰다가 반응형스킨인FastBoot 스킨으로 변경했습니다. 기본으로섬네일이 장착되있구요, 모바일에서도 방문자유입이 더 많네요. 스킨의 중요성을 실감했네요
    • 2016.01.21 01:21
    비밀댓글입니다
    • 2016.03.03 01:13
    비밀댓글입니다
    • 훔냥훔냥;;; 저도 손 놓은지 오래돼서 기억이 훔냥훔냥 하네요..
      다만 썸네일에서 소스를 건드는게 아니라 html본문에서 수정하셔야 할거에요. 구글검색 ㄱㄱ 많은 도움 드리지 못해 죄송해요 ^^;
  1. 갑자기 갤러리 목록의 썸네일이 안떠서 검색해 보았더니 여기가 나오네요.
    ygal.js를 다른 곳에서 불러왔는데, 직접 업로드해서 해결했습니다.

    감사합니다.
    • 2016.08.09 00:22
    비밀댓글입니다
    • 음...제가쓰는스킨의 기본카테고리라 제가따로건든부분이 없어요. 다른스킨을 사용하는데 저렇게 카테고리를 바꾸려면 전문가아니면 거의 불가능하지 않나 싶어요. 그냥 스킨을 바꾸시는게...^^;
  2. 너무 어려워서 이해하기 힘드네요. 잘 읽지못하고 갑니다
  3. 헉 잘봤습니다~~찾고있던건데 이제야 찾았네요 제블로그는 반응형이고 원래 썸네일더보기였는데 제 블로그에도 이게적용 가능한건가요..
  4. 글 잘 읽었습니다.
    질문이 있습니다.
    님의 블로그 카테고리를 클릭하면 오른쪽 상단에 갤러리, 리스트, 타이틀, 이렇게 선택하게 되었 있더라구요.
    이 기능은 원래 스킨 자체에 있는 기능 인가요?
    알려주신 대로 카테고리 수정해도 갤러리, 리스트, 타이틀 선택 기능도 추가 되나요?

    그것이 알고 싶습니다. 즐거운 주말 되시구요 ^^
    • 본래 스킨자체에 있는 기능입니다. 썸네일로 수정하신다고 해도 해당 스킨처럼 리스트나 갤러리형버튼은 추가되지 않고 썸네일 형태로만 유지됩니다.