본문 바로가기
Blog Tip/Design

티스토리 카테고리 목록 갤러리 형태로 보기

by 카쿠覺 2013. 8. 5.


제가 만든 소스가 아니기 때문에 소개해드리지 않으려고 했지만 문의하시는 분들이 많아서 간략하게 소개하려고 합니다. 본래 이 소스를 만드신 분의 블로그는 http://www.yongzz.com 이고, 최근 사이트를 운영하고 계시지 않은것 같아서 허락을 득하지 못하고 이곳에 글을 싣습니다. 혹시라도 문제되면 바로 삭제하도록 하겠습니다.


네이버 블로그의 경우 카테고리 목록을 갤러리 형태로 볼 수 있는 기능을 지원하지만 티스토리의 경우에는 이를 지원하지 않습니다. 오늘 소개해드리고자 하는 소스는 티스토리에서도 이러한 갤러리 형태의 카테고리 목록을 사용 가능하도록 도와주는 소스로, 이를 적용한 예제는 본 블로그에서 카테고리 목록을 확인해주시면 됩니다.


※ 필요한 소스의 내용은 글의 하단에 txt파일로 첨부했습니다.


적용하는 방법


1. 다음 스타일 시트에서 필요한 부분을 수정 후 style.css파일의 적당한 곳에 추가합니다.


/* 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}


해당 소스는 너비가 320인 것과 180인 크기 두 가지를 제공하고 있고, 여기서 칼럼의 수(열의 수)를 지정할 수 있는 기능을 제공하고 있습니다. 그러나 스타일 시트의 편집을 통해 이 외의 다른 너비도 사용이 가능합니다. 제가 빨갛게 표시해놓은 부분만 적절하게 수정을 해주시면 됩니다. 적용하기 어렵다고 생각하시는 분은 위의 소스를 그대로 적용해주셔도 무방합니다. 다만 썸네일의 너비는 320, 또는 180만 사용하실 수 있다는 점만 확인해주시면 됩니다.


2. skin.html에서 카테고리 부분을 아래의 내용으로 대신합니다.


<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>


카테고리 부분을 찾으시는 방법은 skin.html파일에서 위에 나타나 있는 치환자(##으로 쌓여있는 것을 의미합니다)를 찾으신 후, 해당 내용이 담겨져 있는 레이어 전체를(또는 해당 내용 부분을) 위의 내용으로 대신해주시면 됩니다. 이때 썸네일의 너비를 180으로 사용하고자 하실때에는 빨갛게 표시해둔 부분을 <ul class="w180">으로 수정해주시면 됩니다.


3. 다음의 내용을 skin.html 내부의 <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의 경우는 한 페이지에서 출력될 칼럼의 수(열의 수)이며, 아래의 var width는 썸네일의 크기입니다. 또한 해당 소스를 보시면 스크립트 파일을 다른 곳에서 불러와 로딩하고 있음을 확인하실 수 있는데, 이 파일을 직접 자신의 블로그에 업로드 한 뒤 이용하시는 편을 권장드립니다. 이 경우는 해당 스크립트 파일을 다운로드 받은 후 파일업로드 기능을 통해 업로드 하며, 스크립트 주소는 ./images/vgal.js로 수정해주시면 됩니다.


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

※ 일부 스킨의 경우 해당 기능이 정상적으로 작동하지 않을 수 있으며(특히 본 블로그의 스킨에서는 정상적으로 작동하지 않는것을 확인했습니다) 이 경우 기존에 사용중인 제이쿼리 부분과 충돌하여 생기는 경우가 많기 때문에 해당 스킨의 내용을 수정하신 뒤 적용하셔야 썸네일 기능이 정상적으로 작동합니다.


궁금하신 점은 이곳에 남겨주시거나, 또는 http://www.yongzz.com/view.php?bbs=know&no=4 이곳에 남겨주시면 됩니다. 다만 원작자의 사이트는 현재 관리가 되고 있지 않은 것 같아 답변을 받으시기는 어려울 것으로 보입니다.



반응형

댓글