티스토리 카테고리 달기
카테고리가 바로 보여지는 스킨이 아니여서 카테고리만 우측공간에 보여주고 싶다라는 생각이 들었습니다.
카테고리가 보여질 때 페이지 뷰 횟수가 더 늘 것 같다라는 생각이 들었기 때문이기도 하죠.
간단하게 달아 보았는데 그 내용에 대하여 포스팅을 해 봅니다.
카테고리를 달기 위해서는 티스토리에서 제공되는 카테고리 정보에 대하여 먼저 알아야 합니다.
먼저 치환자 부분입니다.
폴더 형식과 리스트 형식 두가지 형태의 치환자가 제공됩니다. 제가 추가로 설치 해 본 것은 폴더 형식 입니다.
티스토리 스킨 가이드 화면을 보면 친절하게 사용 예시 부분도 적혀 있습니다.
치환자
|
다음으로 티스토리에서 제공되는 스타일 부분 입니다.
스타일 부분은 테이블 형태로 생성 된 코드에 CSS를 적용하는 부분입니다.
크게 세가지 부분을 제공해 주고 있습니다. 카테고리 텍스트 및 이미지를 포함하고 있는 셀의 스타일 <TD> 영역 클래스(class) 명인 ib 와 branch3 입니다.
사용예시의 cursor:pointer 은 마우스 모양을 설정 하는 부분입니다. 손 모양으로 바뀌게 하는 역할을 합니다.
개발자 도구를 이용하여 branch3 이란 class명이 있는지 확인 해 보도록 하겠습니다.
다음 사용예시의 .c_cnt 는 갯수 부분의 스타일을 설정 합니다.
저는 갯수 부분을 안보이도록 하였습니다. 즉 CSS 부분에 display:none 로 설정을 하였습니다.
저의 경우 반응형 스킨이기 때문에 media 부분 설정을 해주어야 합니다. PC환경에서 볼 경우(큰 사이즈)만 카테고리를 보이도록 해 주기 위해서 입니다. 작은 사이즈에서도 보여진다면 보기에 좋지 않기 때문입니다.
예를 들어 다음과 같이 추가 하였습니다.
@media only screen and (max-width:320px)
{
s_sidebar_element {display:none;}
}
마지막으로 제가 추가한 코드는 다음과 같습니다.
HTML
<s_sidebar_element>
<div id="category"><!-- 카테고리 모듈 -->
|
</div>
</s_sidebar_element>
CSS
s_sidebar_element {float:right; width:150px; display:block;}.ib { cursor:pointer;} /* 카테고리 - 이미지 버튼 */
.branch3 { cursor:pointer;} /* 카테고리 - 트리 셀 */
.c_cnt { display:none; font:0.75em Tahoma, Helvetica, Arial, Gulim, sans-serif; color:#f30;} /* 카테고리 - 카테고리 옆 개수 스타일 */
#category {position:fixed; font-family:'고딕', sans-serif; margin:50px 0px 0px;}
#category img {border:0;}
#category td {line-height:1.0; font-size:12px; font-family: Georgia, "맑은 고딕", serif; color:#666666;}
@media only screen and (max-width:738px){
/* 우측영역 - 카테고리 */
s_sidebar_element {display:none;}
}
@media only screen and (max-width:320px)
{
s_sidebar_element {display:none;}
}
@media only screen and (min-width:738px) and (max-width:1262px){
/* 우측영역 - 카테고리 */
s_sidebar_element {display:none;}
}
결과 모습
우측 상단에 고정형식으로 추가하였는데 디자인 감각이 없어 꾸미지 않고 최대한 깔끔하게 해 보았습니다.
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
jQuery를 이용한 스크롤 이동하기 구현 방법 (2) | 2018.02.24 |
---|---|
CSS를 이용한 레이어 그림자 효과 주기 (2) | 2018.02.22 |
자바스크립트 사용자 정의 함수 사용법 익히기 (6) | 2018.02.20 |
보이기와 감추기 - visibility 와 display (4) | 2018.02.18 |
HTML/CSS 레이어(Layer) 란 (7) | 2018.02.13 |