티스토리, '태그 클라우드'를 나만의 스타일로~

내가 원하는 태그만 돋보이게 바꿔보자!

[Demo] 티스토리, 태그 클라우드를 나만의 스타일로 바꾸기

5초 뒤에 태그 클라우드로 이동합니다. 여기를 클릭하면 바로 이동!

dd-stuff.tistory.com

<!-- HTML -->

<!-- Poster 스킨의 태그 클라우드 예시 -->
<body id="tt-body-tag">
  <div class="tags">
    <div class="items">
      <a href="/tag/COVID-19">COVID-19</a>
      <a href="/tag/티스토리">티스토리</a>
      <a href="/tag/2020년%20장마">2020년 장마</a>
      <a href="/tag/태그">태그</a>
      <a href="/tag/나만의%20스타일로">나만의 스타일로</a>
      <a href="/tag/보여주기">보여주기</a>
    </div>
  </div>
</body>

/* CSS */

/* 태그 */
body#tt-body-tag .tc1 { font-size:38px; color:aqua }
body#tt-body-tag .tc2 { font-size:32px; color:blueviolet }
body#tt-body-tag .tc3 { font-size:26px; color:darksalmon }
body#tt-body-tag .tc4 { font-size:18px; color:crimson }

/* 태그에 마우스 올렸을 때 */
body#tt-body-tag .tc1:hover { background:aqua; color:#000 }
body#tt-body-tag .tc2:hover { background:blueviolet; color:#000 }
body#tt-body-tag .tc3:hover { background:darksalmon; color:#000 }
body#tt-body-tag .tc4:hover { background:crimson; color:#000 }

/* Javascript */

/* 바꾸려는 태그의 class를 변경. '.tags .items'는 사용중인 스킨에 맞게 수정되어야 함
아래 예시는 티스토리에서 제공하는 Poster 스킨의 예시임 */

if ( document.querySelector("body").id == "tt-body-tag" ) {
  let tags = document.querySelectorAll(".tags .items a").forEach(function(e){
      if ( e.innerText.indexOf("Jack") != -1 ) {
          e.classList.add("tc3")
      }
      if ( e.innerText.indexOf("Covid-19") != -1 ) {
          e.classList.add("tc1")
      }
      if ( e.innerText.indexOf("2020년 장마") != -1 ) {
          e.classList.add("tc2")
      }
  })
}