티스토리 뷰

반응형


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

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

기존에 쓰던 마크쿼리님의 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_## ] 과 같은 태그는 티스토리에서 제공하는 치환자로써 [] 사이에 공백을 제거해야 올바른 값이 출력된다. 여기서는 본문내용을 제대로 출력하기 위해 임의로 공백을 삽입했다.


반응형
프로필사진

Yowu (Yu Yongwoo)

흔한 Node.js/Java 백엔드 개발자입니다
Ubuntu와 MacOS 데스크탑 개발 환경을 선호합니다
최근에는 vscode와 IntelliJ를 사용하고 있습니다
vscode에는 neovim, IntelliJ는 ideaVim
개발용 키보드는 역시 HHKB Pro 2 무각입니다
락 밴드에서 드럼을 쳤습니다

  • 프로필사진 BlogIcon 조아하자 저 blur 효과 적용된 다른 사이트 본 적이 있는데 개인적으로는 좀 불편하더군요. 제 스킨에서는 당연히 저런 기능을 사용하고 있지는 않습니다. 사실 잘 모르는 속성이기도 하구요. 2015.03.15 21:17 신고
  • 프로필사진 BlogIcon Yowu 오. 나화영님 블로그 들어가봤는데 스킨이 굉장히 깔끔하고 보기 좋습니다. 가벼운것 같기도 하구요. 거기다 반응형이라니. 직접 만드신건가요? 2015.03.16 13:08 신고
  • 프로필사진 BlogIcon 조아하자 넵. 직접 만들었고 공개되어 있습니다. 전 웹퍼블리싱 하는게 제 직업이에요... 2015.03.16 13:27 신고
  • 프로필사진 BlogIcon Yowu 뭔가 퍼블리싱 하시는 분을 실제로 보는건 처음이라 신기합니다. 뭐랄까 순수 기능개발하게될 저희랑은 가까우면서 먼 느낌이랄까..ㅠㅜ 2015.03.16 13:42 신고
  • 프로필사진 BlogIcon 조아하자 ^^ 앞으로 블로그에서라도 친하게 지내요 ^^ 2015.03.16 13:47 신고
  • 프로필사진 BlogIcon Yowu 네 감사합니다. ㅎㅎ 별볼일 없는 블로그지만 잘 부탁드립니다. 2015.03.17 19:12 신고
  • 프로필사진 BlogIcon 야핫 안녕하세요~ YoWu님.
    오늘 막 개인적인 블로그를 시작해서 티리움 스킨을 받아 쓰고 있습니다.
    블러효과가 거슬렸는데 제거하는 법 잘보고 가요! 매우 감사합니다 ㅎㅎ

    그리고 죄송하지만..
    혹시 본문 폰트 바꾸는 법과 인용문을 큰따옴표(")로 나타낼 수 있는 방법이 있을까요?
    요것들만 해결되면 딱 제가 생각하는 스킨이라서요 ㅎㅎ
    스스로 공부하자니 지식이 너무 없어 힘드네요...
    안된다면 할 수 없지만, 가능하다면 지식공유 부탁드립니다..
    2015.03.27 16:39 신고
  • 프로필사진 BlogIcon Yowu 간략하게 뜯어본 결과 폰트는 images/tiriumFont.css에서 관리하고 있습니다. 이 곳에서 구글 웹폰트로 적용되는데, 원하시는 웹폰트의 링크를 추가하시고 마찬기로 tiriumFont.css 내의 CSS 클래 article의 font-family를 수정해주시면 될 듯합니다.
    웹폰트 설정은 http://www.cmsfactory.net/node/10009 을 참고하세요. 저도 시간나면 폰트를 바꾸고 포스트 본문에 추가해야겠네요.
    그리고 인용문은 정확히 어떤 것을 말씀하시는지 정확히 감이 안옵니다 ^^;;
    2015.03.28 10:38 신고
  • 프로필사진 BlogIcon 야핫 답변 감사합니다. 한번 뜯어봐야겠어요.
    인용문은 회색 막대기 옆으로 글이 나오는건데..
    인용구 (ctrl+Q) 버튼 눌러서 쓰는거요 ㅎㅎ 제가 잘못 썼었네요.
    2015.03.28 23:34 신고
  • 프로필사진 BlogIcon SeaLine 아~! 저도 본문폰트 바꾸는 방법 궁금했어요 :) 도움이 됐네요! 이거 관련해서 추가로 또 궁금한게 있어요!

    1) 웹폰트를 스킨에 적용했을 경우, 기존에 포스팅한 글에도 적용이 되나요?
    2) 포스팅할 때 (글을 쓸 때) 폰트를 선택을 해버리면 완료 후에는 웹폰트로 보이나요? 아니면 선택한 폰트로 보이나요?

    물어보는 이유는 위에 두가지 사항이 안되는 것 같네요 ㅠㅠ
    2015.09.13 06:47 신고
  • 프로필사진 BlogIcon Yowu 1) 웹 폰트를 css로 지정해주게 되면 기본적으로 기존 포스팅에 적용되게 됩니다.
    다만 티스토리에서 사용하는 에디터(위지윅 에디터)의 경우 html <p>태그에 font-family 속성에서 폰트를 찍어주는 경우가 많은데 이 때는 css 우선순위 때문에 웹 폰트가 표시되지 않게 됩니다.
    2) 위와 같은 이유로 포스팅할 때 폰트를 선택한다면 선택한 포트로 보이게 됩니다.
    2015.09.16 21:49 신고
  • 프로필사진 >< 안녕하세요 티리움 스킨 블러효과를 해제하는 방법을 찾다가 댓글보고 방문하게 되었습니다. 덕분에 블로그 최대 넓이까지 잘 해결되었어요 감사합니다^^ 그리고 혹시 YoWu님처럼 블로그 하단에도 제 닉네임을 넣고 스킨 제작자분을 간단하게 나타내고 싶은데 어느 부분을 수정해야 하는지 알려주실 수 있으신가요? 저는 이런 웹쪽(?)에 지식이 하나도 없어서 ... 혹시 댓글 보신다면 부탁드려요 (_ _) 2015.04.21 03:46
  • 프로필사진 BlogIcon Yowu https://github.com/uyu423/Tirium-LuckyYoWu/blob/master/skin.html#L411
    의 411 line에서 435 line을 참고해 주세요. 이런 식으로 입맛대로 수정하시면 될 듯합니다.
    2015.04.21 07:48 신고
  • 프로필사진 >< 빠른 답변 감사합니다!! 제가 확인이 늦었네요 ^^
    참고하여 잘 수정 하였습니다. 도와주셔서 정말 감사드려요ㅠㅠ
    2015.04.21 21:20
  • 프로필사진 BlogIcon 비타오백 Notice 항목 에 글을 넣으려면 어떻게 해야 하나요?

    2015.05.14 17:05 신고
  • 프로필사진 BlogIcon Yowu Notice에서는 관리 페이지에서 글쓰기 제목 입력 옆에 공지 라디오 버튼을 체크하시면 Notice로 작성됩니다. 2015.05.16 00:30 신고
  • 프로필사진 BlogIcon choit 어제 블로그 시작한 초보입니다.
    티리움 스킨 적용하고, 블러 없애고 싶어서 찾다가 들렀어요~
    덤으로 카운터도 달았네요.
    고맙습니다! ㅎ_ㅎ
    2015.06.03 22:39 신고
  • 프로필사진 BlogIcon Yowu ㅋㅋ 즐거운 블로그하세용! 2015.06.04 00:16 신고
  • 프로필사진 BlogIcon 박하사탕™ 안녕하세요~ 블러 때문에 포기하려 했는데 덕분에 해결했습니다 :)
    그런데 혹시 본문 너비를 730이 아니라 더 늘려도 문제가 없을까요?
    2016.01.04 23:15 신고
댓글쓰기 폼