블로그 스킨 개편 (TIRIUM SKIN) & 커스터마이징

예전부터 블로그 스킨을 바꾸려고 마음만 먹고, 귀차니즘과 까먹음으로 스킨 교체를 못했다.

그런데 하필 오늘 뭔가 기분 전환이 필요해서 어쩌다 보니 스킨을 땋 하고 교체해 버렸다.

기존에 쓰던 마크쿼리님의 spder-web 3.0이 버전업이 되어 4.0이 나왔단 얘기를 듣고 쓰려 했으나..

언젠가 부터의 마크쿼리님 사이트의 폭파;; 그리고 4.0 버전에서 내가 사용하는 Bootstrap class와의 호환 문제 등(예로 alert class가 안먹는다;;)으로 다른 Bootstrap 기반 스킨을 알아보던 중 눈에 들어온 Trium 스킨으로 갈아탔다.

TIRIUM 0.83b

이전 스킨이 사이드바, 상단메뉴, 본문내용 표시로 혼잡한 느낌이 있었다면 TIRIUM 은 간결한 느낌을 줘서 좋다.

개인적으로 이미지 측면에 설명을 붙는 기능이 정말 마음에 든다. 당신이 보고 있는 지금 이 기능.

티리움 스킨은 본문 내용의 태그에 따라 CSS가 적용되고, 이미지 파일에 입력된 내용을 측면에 표시해 주는 등 편리한 기능이 많다.

댓글도 사용자의 프로필 사진을 기반으로 깔끔하게 표시된다.

그래도 스킨하나 바꿨을 뿐인데 블로그를 새로 시작하는 느낌이라 좋다.

티리움(Tirium) 스킨 커스터마이징 (4.23 updated : add github)

티리움 스킨을 사용하는데 있어 불편한 사항이 몇 가지 있어 추가한다. 이 두가지는 티리움 스킨 패포 페이지에 댓글로도 언급된 문제들이나 이에 대한 제작자의 코멘트는 딱히 없는 듯하다. 아래 커스터마이징 방법은 배포 페이지에 댓글로도 작성해두었다.

그리고 여전히 관련 문의가 많아 그냥 Github로 소스코드 공개한다. (블로그 포스팅 / Github)

1. 페이스북 링크 공유시 메타 태그 문제

티리움 스킨을 사용하는데 있어 자신의 게시물을 페이스북에 공유하면 작성자가 "Vanns kang" 이라고 스킨 제작자의 이름이 표시된다. skin.html의 meta 태그로 스킨 작성자의 이름이 author로 입력되어 있어 발생한 문제다. skin.html을 열어 상단의 메타 태그를 수정해 주면 문제 해결.

<meta name="author" content="Vanns Kang">

밑줄 친 부분을 작성자로 표시할 이름으로 바꿔주자. 

※ 이미 한번이상 페이스북에 공유되어 캐싱이 되었다면 메타 태그를 수정해도 여전히 vannas kang이라고 표시될 것이다. 페이스북 개발자 사이트의 디버그 툴로 들어가자. 여기서 게시물 주소 넣으시고 Debug 버튼 누르면 해당 게시물에 대한 정보가 나타날 것이다. 다시 fetch new scrape information 버튼 누르면 새롭게 캐싱이 되고 이 때부터는 작성자가 제대로 나타난다.

2. 마우스 over시 이미지 블러 효과 해제

티리움 스킨에서는 이미지에 마우스 오버시 blur 효과가 발생한다. 개인차가 있지만 일부 사용자는 이미지 가독성에 불편함을 느끼고 있어 해당 효과를 해제 했다. 효과 해제를 위해 image/tiriumContent.css 에서 다음 부분을 삭제하거나 주석처리 해준뒤 해당 css 파일을 재업로드 해주면 된다.

.imageblock>span>img:hover{-webkit-filter:blur(5px)}

참고로 css 파일이 압축되어 있어 개행 구분이 없는 것이 불편할 수 있다. 검색 기능으로 "blur"를 찾으면 바로 찾을 수 있다.

3. TIRIUM 스킨 본문 가로 사이즈 조정

티리움 스킨의 본문 너비 사이즈(max-width)도 역시 image/tiriumContent.css에 영향을 받는다. 스킨 제작자가 700px로 초기값을 설정했는데, 애드센스를 사용하는 입장으로는 730px 정도가 적당한 듯하다. 하여튼 tiriumContent.css를 까보면 다음과 같은 CSS 구문이 있다.

.entry,.searchList,.searchRplist,.searchTblist,.taglog,.localog,.entryNotice,.entryProtected {

margin-top:5em;

margin-left:auto;

margin-right:auto;

max-width:700px;

word-wrap:break-word

}

max-width:700px 를 적당한 값으로 수정해주면 된다.

4. 방문자 수 표시 (Total, Today, Yesterday)

티리움 스킨은 기본적으로 방문자 수치를 제공하지 않는다. but 내 블로그 하단에는 방문자 수를 제공하는데 개인적으로 추가한 기능이다. skin.html을 까면 끝부분에 다음과 같은 html 구문이 있다. (392 line 쯤)

<div class="col-md-12">

<div class="copyright text-white text-center" style="font-size:11px;">

<br><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Tirium</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://vannskang.com/105" property="cc:attributionName" rel="cc:attributionURL">Vanns Kang</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">Creative Commons Attribution-NonCommercial 4.0 International License</a>.<br>

</div>

</div>

나는 이 html 하단에 today 기능을 다음과 같이 추가했다.

<div class="col-md-12">

<div class="copyright text-white text-center" style="font-size:11px;">

<br><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Tirium</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://vannskang.com/105" property="cc:attributionName" rel="cc:attributionURL">Vanns Kang</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">Creative Commons Attribution-NonCommercial 4.0 International License</a>.<br>

</div>

<div class="copyright text-white text-center" style="font-size:11px;">

<!-- YoWu Add Code Part (count add) st-->

Total : [ ##_count_total_## ] | Today : [ ##_count_today_## ] | Yesterday : [ ##_count_yesterday_## ]<br/>

<!-- YoWu Add Code Part (count add) ed-->

</div>

</div>

[ ##_count_total_## ] 과 같은 태그는 티스토리에서 제공하는 치환자로써 [] 사이에 공백을 제거해야 올바른 값이 출력된다. 여기서는 본문내용을 제대로 출력하기 위해 임의로 공백을 삽입했다.