[티스토리 숏강좌 #5] 스킨변경하기 - 태그 클라우드를 약간 더 존재감있게 만들기 (Whatever 스킨)

Whatever 스킨의 오리지날 버전의 경우에는 사이드바가 푸터쪽 아래에 위치한다.

그래서 데스크 탑 상에서는 오른쪽 사이드에 사이드바가 나타나지 않기 때문에

어차피 태그 클라우드도 존재감이 없다.

그런데 티스토리의 스킨 메뉴 부분을 찾아보면 돋보기 김선생이라는 분이 리디자인한

Whatever Sidebar 버전이 존재하는데 이 버전을 이용하면

사이드바를 아래쪽에서 사이드로도 옮길수가 있다.

 

디자인 자체는 간단하고 미니멀한 심플한 것을 추구해서 인지

그다지 이쁘다는 생각은 들지는 않는다.  그래도 이 스킨의 장점은

모바일환경에서도 사이드바를 보여줄수가 있으며

특히나 애드센스나 쿠팡파트너스 등의 광고를 사이드바에 삽입시킬때

모바일 환경에서도 광고를 보여줄수 있다는것이 장점이라면 장점이다.

 

그러나 나는 Whaever 사이드바의 존재감을

좀더 살려 눈길을 끌어보고자

사이드바쪽에 있는 태그 클라우드를 좀 칼라풀하게

바꾸어 보았다. 

사실 메뉴나 카테고리 구분이 글들의 네비게이션 역할을

대부분 도맡아 하고는 있지만,

나는 태그도 많은 활용 측면이 있다고 생각한다.

그래서 글마다 주요한 태그를 달아주면

어떤 태그가 가장 많이 쓰였냐의 빈도에 따라 그 태그를 더 강하고

큰 폰트로 보여주어 태그 클라우드를 보면 그 블로그가

어떤 성향의 글인지 어떤 글들이 많이 쓰여지고 있는지 금방 보여줄수가 있다.

 

그래서 태그마다 색깔을 다르게

그리고 태그의 빈도수에 따라 폰트 굵기나 크기를 다르게 해주면

그런데로 눈길을 끄는 칼라풀한 태그 구름이 만들어 질수 있다.

 

위의 밑밑한 태그 클라우드가

아래의 경우처럼 칼라풀하게 보이고 빈도수에 따라서 더 크게 보이게도 하는 것이다.

이 외에도, 원래의 태그사이의 공간의 폭이 넓게 보이는 화이트스페이스를,

태그 사이의 폭을 더 좁게 줄였다.

 

 

 

바꾸는 방법은 아주 간단하다.

style.css

skin.html

의 두 파일에서 태그 클라우드에 관련된 부분만 찾아서 살짝 바꾸어 주면 된다.

 

이 두파일은  

관리자 페이지 >  꾸미기 > 스킨 변경 > HTML 변경  의 메뉴 혹은 버튼을 찾아 차례로 눌러서

도달할수 있다.

 

1.  style.css 바꾸기

 

관리자 페이지 >  꾸미기 > 스킨 변경 > HTML 변경. 에서 CSS 를 눌러주고

마우스를  css 에디터 본문에 한번 콕 찍어준 다음에,  cloud1 을 검색해야 한다. 검색방법은 피시에서는 콘트롤키와 F(맥에서는 커맨드 키와 F키) 를 눌러준후

cloud1 을 입력하고 엔터키를 눌러주면 된다.

대략 1230 라인 근방에서 cloud1,....cloud5 를 찾을수 있다.

이 부분을 아래처럼 바꾸어 주면 된다.

 

바꾼후 적용을 클릭해주면 된다.

폰트의 색깔이나 크기는 본인이 맞는것을 찾아서 바꾸셔되도 좋겠다.

다만 여기서는 클라우드1이 빈도수가 가장 높은 태그라서

색깔도 더 찐하고 폰트크기도 좀 더 크게 했다. 말하자면

내 예의 태그 글라우드에서는 "방탄소년단"이라는 태그에 해당된다.

 

클라우드5가 빈도수가 가장 낮은 태그다.

2. Skin.html 바꾸기

이것은 사실 안바꾸어도 되지만, 태그들 사이의 공간을 좀 줄여주기 위해서

아래처럼 각 라인들을 한라인으로 바꾸어 주었다.

 

이것도 바꾼후 적용을 클릭해주면 된다.

 

자, 그러면 사이드바의 태그 클라우드가 칼라풀하게 바뀐다.

 

이번글은이상입니다.

감사합니다.