티스토리, 카테고리 리스트 이미지(갤러리)형태로 노출 시키는 방법

보통 티스토리의 카테고리 목록을 보면 리스트로만 나와서 보기가 별로 안 좋습니다. 특히 사진 위주로 포스팅을 하시는 분들은 갤러리로 리스트가 나왔으면 하는 바램이 더 크실 것 같아요. 오늘은 어떻게 갤러리 방식으로 포스팅 할 수 있는지 알아보도록 하겠습니다.

 

현재 제 블로그의 카테고리 리스트를 보시면 이렇게 갤러리 방식으로 나오고 있는 것이 보이실 겁니다. 그럼, 이렇게 변경하는 방법에 대해서 알아보도록 하겠습니다. 순서대로 잘 따라 하시면 누구든지 쉽게 변경하실 수 있습니다.

Ygal.js 파일 업로드

[HTML/CSS 편집] – [파일업로드] 

ygal.js

블로그에 공유되어 있는 Ygal.js파일을 본인의 블로그에 업로드 시킵니다.

Html 편집 첫번째

[HTML/CSS 편집] – [skin.html] 의 </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="./images/ygal.js"></script>

<!-- 카테고리 갤러리 -->

* 3 부분을 수정하시면 한 줄에 노출되는 이미지 개수를 수정하실 수 있습니다.

  

Html 편집 두번째

을 검색하여 카테고리 리스트 위치를 찾아갑니다. 카테고리 리스트에 해당하는 <div> </div>를 찾아서 아래 내용으로 교체합니다.

<!-- 카테고리 갤러리 -->

<div class="fixed_img_col">

<h1 class="hx"> <em>+</em></h1>

<ul class="w180">

<s_list_rep>

<li>

<a href=""><span class="thumb"><img src="img/@thumbSquare.jpg" alt="" class="dno"><span id="str">Loading..</span></span> <strong><span class="cmt"></span></strong></a>

<p></p>

</li>

</s_list_rep>

</ul>

</div>

<!-- 카테고리 갤러리 --> 

*180사이즈와 320사이즈 두 가지가 있는데요. 현재 180사이즈로 작업되어 있습니다.

*날짜가 노출되는 부분은 제외되어 있습니다.

  

Css 추가

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: 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:맑은 고딕, 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:230px;padding-left:10px;height:185px}

.fixed_img_col .w180 .thumb{width:222px;height:110px}

.fixed_img_col .w180 .thumb img{width:222px;height:110px}

.fixed_img_col .w180 a{width:230px}

*모든 글꼴은 맑은 고딕으로 설정하였습니다.

*css세부 조정 팁

세부 조정은 css파일 위주로 수정을 하면 되는데요. 간단한 팁 몇 가지를 알려드리도록 하겠습니다.

.fixed_img_col .w180 li{width:230px;padding-left:10px;height:185px} -> 230px, 185px는 빨간색 전체 크기 입니다.

.fixed_img_col .w180 .thumb{width:222px;height:110px} -> 220px, 110px는 파란색 부분인 이미지 크기 입니다.

.fixed_img_col .w180 .thumb img{width:222px;height:110px}

.fixed_img_col .w180 a{width:230px}

 

이 부분을 수정하시면 상단에 표시되는 배경의 색상과 폰트의 색상을 수정하실 수 있습니다.

.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: Malgun Gothic,nanumgothic,sans-serif /*@*/;}