태그 - 강조 차등 적용 (+ 보너스)

01

훨씬 보기 편하쥬? ㅋ

 

원래 태그가 등록 빈도에 따라 5단계로 나눠지는거였군요?!

 

그렇다면 각 단계별로 다르게 표현할 수 있겠네요. ^^

 

알아보니 태그에는 cloud1 부터 5 까지 순위별로 클래스가 적용될 수 있습니다. (1 = 제일 많이 등록된 태그)

(북클럽 스킨에선 역시나 누락된 내용이군요... 췟..)

 

적용 대상

• 사이드 바 > 랜덤태그 목록
• 메뉴 > 태그 페이지

(위 두 곳 외에도 글 하단에 나오는 태그도 있죠? 그러나 거긴 빈도레벨 구분 적용이 안되서 패스합니다)

 

적용 방법

1. 스킨 html 수정

(북클럽 기준으로 작성한 내용입니다. 다른 스킨이고 이미 적용되어 있다면 굿!)

<s_tag>
  <div class="post-header">
    <h1>태그</h1>
  </div>
  <div class="tags">
    <s_tag_rep>
  	  <a href="" class=""></a>
    </s_tag_rep>
  </div>
</s_tag>

...
...
...

<s_sidebar_element>
<!-- 태그 -->
  <div class="tags">
    <h2>태그</h2>
    <s_random_tags>
    	<a href="" class=""></a>
    </s_random_tags>
  </div>
</s_sidebar_element>

위 7, 21번 줄처럼 가 들어있는 <a 태그 두 곳에 class="" 를 추가해줍니다.

 

2. 스타일 추가

.tags .cloud1 {color: #4E92DF; border: 1px solid #4E92DF;}
.tags .cloud2 {color: #000; border: 1px solid #000;}
.tags .cloud3 {color: #444; border: 1px solid #555;}
.tags .cloud4 {color: #999; border: 1px solid #aaa;}
.tags .cloud5 {color: #ccc; border: 1px solid #ddd;}

.tags a:hover, .tags a:focus {
	background: lavender;
	text-decoration: none;
	color:#4E92DF;
}

태그를 감싸는 영역의 class 가 tags 일 것으로 간주했습니다. 아닌 경우 맞춰서 변경!

 

스킨 css 하단에 넣으시거나, html 하단에 <style> ... </style> 로 감싸서 넣으셔도 됩니다.

 

7~11번줄은 마우스 올렸을 때 스타일이니 입맛에 맞춰 조정/삭제 하시면 되겠습니다.

 

단계별 색상은 원하시는대로 수정하시면 되고요, .tags .cloud1의 경우 스킨 설정의 포인트컬러를 활용하도록 추가할 수도 있겠습니다. (포인트컬러 활용법 보기)

 

보너스

사이드 바 > 랜덤태그 목록의 태그들 끝에 [더보기] 추가하는 법

 

스킨 html 을 수정할 때 아래처럼 </s_random_tags> 뒤로 링크를 추가해줍니다.

<s_random_tags>
    <a href="" class=""></a>
</s_random_tags> ... <a href="https://alikong.tistory.com/tag">[더보기]</a>