티스토리 태그 클라우드 CSS 수정하기

와이프랑 같이 운영하고 있는 홈페이지인데 이전부터 무한정으로 나열되어있는 태그가 마음에 들지 않았다. 중요도도 맞지 않고 빈도도 반영되지 않은 이 디자인... 어떡할까 고민하다가 그냥 잊고 있었는데, 오늘 티스토리 치환자를 공부하다 보니 수정방향이 떠올라서 뜯어고치게 되었다. 그 기록을 글로 남긴다.

태그 클라우드의 주소는 "/tag"

티스토리에는 url domain에 "/tag"를 달아주면 태그 모음창으로 가게 되어있다. 그리고 그 태그 치환자는 다음과 같다. 치환자도 처음에 봤을때는 너무 낯설었는데, 이제 보다보니 많이 익숙해졌다. 아래 구조에 의해서 계속 출력되게 되는 것이었다.

<!-- 스킨 -->
<s_tag>
    <div class="taglog">
        <h3>태그</h3>
        <ul>
            <s_tag_rep>
            <li>
                <a href="[##_tag_link" class="[##_tag_class">[##_tag_name</a>
            </li>
            </s_tag_rep>
        </ul>
    </div>
</s_tag>

문제가 되었던 홈페이지의 태그 클라우드 디자인

운영중인 다른 티스토리에는 태그를 운영하지 않아서 전혀 상관없었지만, 아래 홈페이지는 태그가 의미가 있다고 생각해서 남겨두었었다. 그런데 아무런 의미도 없이 나열만 되는 태그들이어서...수정이 필요했다. 

내가 사용한 스킨의 치환자는 아래와 같이...

osh 라는 분이 콤마로 고민을 한 차례 한 것 같은 느낌의 주석이 달려있는 스킨 마크업이다. 사용빈도에 따라서 class가 'cloud1'부터 'cloud5' 로 분류된다고 한다. 그럼... 일단 cloud 5정도는 없애도 되지 않을까? 라는 생각에 CSS를 조정해서 Cloud5 클래스에 해당하는 녀석은 보이지 않게 했다. [CSS] display:none!important;)

<s_tag>
	<div class="box_tag_trail">
		<h3 class="tit_box">태그</h3>
			<div class="tag_cont">
			<!-- 마지막 콤마(,) 를 javascript 로 지워줘야 하나. by osh -->
				<s_tag_rep>
					<a href="[##_tag_link" class="[##_tag_class">[##_tag_name</a>,
				</s_tag_rep>
			</div>
	</div>
</s_tag>

 

첫번째 문제점 봉착

콤마를 넣게 디자인을 해놓았다 보니, 점만 무수히 찍혀 있는 결과를 얻게 되었다. 위의 치환자가 있는 곳의 콤마를 찾아서 지우고 나니 깔끔해졌다.

<s_tag_rep>
	<a href="[##_tag_link" class="[##_tag_class">[##_tag_name</a>,
</s_tag_rep>

마지막에 들어있는, 즉 </a> 다음에 있는 녀석이 콤마를 찍어주는 것이다.

두번째 문제점

태그별 사용빈도에 따라 Class가 다르게 부여되는데, 특별한 CSS가 지정되어있지 않아서 아무런 차이가 없었다. 그래서 아래와 같이 cloud1부터 cloud5 까지 다 지정해두었다. 

※ 주의 : 처음에 section_btm_area를 지정하지 않았더니, 글 밑에 달리는 태그도 같이 디자인이 바뀌어 버렸다. 더 세부적으로 지정해줄 필요가 있었던 것이다.

/* tag cloud design start*/
.cloud1 {
    font-size: 1.5rem!important;
    color: #fff!important;
    background-color: #f25555;
}
.cloud2{
	font-size:1.2rem!important;
	color: #fff!important;
  background-color: #f25555;
}
.cloud3{
	font-size:1.0rem!important;
		color:#333333!important;
}
.cloud4{
	font-size:1.0rem!important;
	color: #333333!important;
}
.cloud5{
	display:none!important;
}
.section_btm_area .tag_cont a {
    border: solid 1px #f25555;
    word-break: keep-all;
    padding: 0.25rem;
    line-height: 2;
    margin: 0.25rem;
    display: inline-block;
    border-radius: 8px;
}
.section_btm_area .tag_cont{
	text-align:center;
}

/* tag cloud design fin */

수정 결과는 아래와 같다

실컷 고민하고 핀터레스트도 열어보고 난리를 쳤지만 디자인은 디자이너의 몫이다.... 쩝...

▲cloud 5의 css 를 display:none으로 처리하면 무수한 콤마만 남는다. 쩝... 저건 html을 뜯어 고쳐야할 사항이다.

▲두번째 문제점 봉착 : 빈도가 반영되지 않음

▲ 최종 결과물이다. 디자인은 디자이너가 건드리는게 훨 낫겠다.

 

그 부부의 동부이촌동