티스토리 스킨_태그 구름 꾸미기

티스토리는 블로그 스킨을 쉽게 만들고 관리할 수 있도록 치환자를 제공하고 있다. 글을 쓰면서 꼬리표를 잘 달지는 않지만 다른 사람 블로그를 찾았을 때 태그를 살펴보는 습관이 있다. 잘 정리된 블로그는 태그만 보고 주된 관심사를 쉽게 파악할 수 있다. 또 카테고리를 보여주지 않는 스킨을 쓸 때는 태그를 잘 달아서 글갈래를 잘 나누어 주면 좋다.

직접 만든 스킨을 쓰다가 왓에버 스킨으로 바꾸고 몇 가지 손을 보고 있다. 오늘은 태그 클라우드를 고쳐 본다. 참고로 이 블로그에서 '태그'는 '꼬리표'로 바꿔 부르고 있다. 꼬리표 구름으로 해석하면 되겠다. 일반적인 설명은 아래 글을 읽으면 알 수 있다.

 

태그 클라우드 · GitBook

태그 클라우드 치환자

태그 클라우드는 사용한 태그 리스트를 출력합니다.

• url : /tag

태그 그룹

• <s_tag> : 태그 클라우드 그룹 치환자

태그 정보

• <s_tag_rep> : 개별 태그 그룹 치환자
  •  : 태그가 포함된 글을 출력하기 위한 URL
  •  : 총 5단계가 있는데 자주 사용한 순서로 cloud1-cloud5가 표시됩니다.
  •  : 태그의 이름

사이드바에 있는 태그 클라우드가 아니라 메뉴를 누르면 본문 영역에 보이는 태그 클라우드를 고치려고 한다.

아래 빨간 부분을 새로 넣었다. 필요한 부분을 빨리 찾으려면 편집 화면에서 'CTRL + F'를 누르고 'tags section'를 입력하면 된다.

<s_tag>
<div class="hgroup tag">
  <h2>태그</h2>
</div>
   <div class="tags section">
        <div class="items">
              <s_tag_rep>
                   <li><a href="" class=''></a></li>
              </s_tag_rep>
       </div>
  </div>
</s_tag>

위에 있는 설명대로 치환자 는 cloud1부터 cloud5까지 만든다. 이제 css 파일에 아래와 같이 단계에 따라 다르게 보이게 만들면 된다. 당연히 단계는 개수가 많은 태그 순이다. 글자 크기도 바꿀 수 있지만 우선 색깔만 다르게 보이게 만들자.

.items li { display: inline; }  /* 줄 바꿈 없이 한 줄로 보이게 만든다. */

.items li .cloud1{
  color: #ff7878;
  font-size: 2.0em;
}
.items li .cloud2{
  color: #ffb2b2;
  font-size: 1.5em;
}
.items li .cloud3{
  color: #b2ffb2;
  font-size: 1.2em;
}
.items li .cloud4{
  color: #b2b2ff;
  font-size: 1.0em;
}
.items li .cloud5{
  color: #cee5d0;
  font-size: 1.0em;
}

색깔만 잘 바꿔도 보기 좋게 만들 수 있다. 일단은 좀 파스텔 느낌 나는 색을 넣고 크기도 다르게 만들어 보았다.