티스토리 반응형 스킨을 선택한 이유와 그 종류. :)

많은 티스토리 블로거들이 최근 들어서 반응형 블로그 스킨을 설치하고 계신듯 합니다. 모바일 유입자가 많아지면서 그에 대응하고자 하는 분들이 대부분인것 같은데, 저 같은 경우에는 예전부터 그냥 글 자체에 애드센스 광고나 필요한 스크립트 들을 삽입하는 형식으로 해왔기 때문에 모바일에 대한 대응도 그럭저럭 되고 있는 편입니다.

물론 글마다 계속 삽입해야한다는게 번거롭기는 하지요. 아무리 서식으로 만들어두어서 클릭 몇번이면 되긴 하지만 말이죠. ^-^;

지난 한달간의 방문객 현황.

저의 노가다의 산물인 (모든 글에 구글 애널래틱스 스크립트를 '수작업'으로 집어넣기) 분석 결과를 보면, 모바일 접속자가 과반수를 넘고 있습니다. 거의 70% 가까이 되니, 제가 하는 노가다를 하기 싫어하시는 분들은 당연히 반응형 스킨에 대한 니즈가 생길수밖에 없겠죠.

저같은 경우에는 반응형 스킨에 대해서 둘러보게 된 이유가 '현재의 티스토리 모바일 스킨이 예쁘지 않기 때문' 입니다. =_=;;; 그리고 블로거의 자유도가 너무 떨어지기도 하고 말이죠. 게다가 제 블로그 제일 아래에 붙는 인기글 리스트가 아주아주 짜증이 납니다.

반응형 스킨으로 변경을 할 경우 모든 글에 들어가 있는 구글 애널래틱스 스크립트를 어떻게 제거하면 좋을까 벌써부터 걱정이지만, 일단 예쁘고 깔끔한 맘에 드는 스킨이 있는지가 먼저입니다. +ㅁ+

1. 마크쿼리님의 Spider's Web : 배포사이트, 데모사이트
2. 마크쿼리님의 Doo Be Doo : 배포사이트, 데모사이트
3. Readiz님의 FastBoot : 배포사이트, 데모사이트
4. JB님의 JB All In One :  배포사이트, 데모사이트
5. JB님의 JB Simple White :  배포사이트, 데모사이트
6. 사진찍는삼촌님의 Windup Simple : 배포사이트, 데모사이트
7. Tae Young Kim님의 simple white : 배포사이트
8. est0que님의 스킨갤러리 : 배포사이트 
9. 베누시안님의 반응형스킨 : 배포사이트

데모사이트들을 확인해보시면 아시겠지만, 대부분은 밝고 깔끔한 스타일의 스킨들이 포진되어있습니다. 개인적으로는 Readiz님의 FastBoot가 가장 맘에 들어서 요것을 적용시켜볼까 합니다. :)

그리고 찾다보니 반응형 스킨 뿐만 아니라 티스토리 스킨을 쉽게 찾아볼 수 있는 사이트가 있어서 함께 링크합니다. 티스토리 스킨 예쁜거 없나~ 하고 찾는 중이신 분들은 요 사이트에 한번 둘러보세요.

CMSfactory.net의 반응형 스킨 갤러리

그리고 스킨을 적용한 뒤, 각 모바일 기기에서 어떻게 보이는지 확인할 수 있는 사이트도 추가.

Troy - 내 사이트가 모바일 기기에서 어떻게 보이는지 확인하자!

스킨 적용 하면서 도움된 글과 몇가지 수정한 사항들 기록. 

• 반응형 스킨에서 나눔고딕(웹폰트) 적용하기
• 웹폰트 로딩 중에도 본문 나오게 하기
• 상단 메뉴바 색깔 변경하기

▷ 웹폰트 적용할때 : skin.html이 아니라 fastboot.css를 열어서 font-family 수정.

▷ 사이드바에도 나눔 고딕 적용하기 : style.css에서 아래 부분 찾아서 수정.

#sidebar .panel-heading{margin: 0; font-size:16px;padding:5px 10px;font-weight:700;font-family:'Nanum Gothic', Arial, "돋움", Dotum, AppleGothic, sans-serif !important;}

#sidebar ul li, #sidebar ul li a, #sidebar ul li a span {color:#333; font:13px/16px 'Nanum Gothic',Arial, "돋움", Dotum, AppleGothic, sans-serif; }

▷ 카테고리 옆에 나오는 댓글 숫자 스타일 변경 (숫자 앞뒤로 괄호를 넣고 싶은데 이건 못찾음. ㅠ_ㅠ)

#sidebar .c_cnt { /* 카테고리 옆 개수 */

  display: inline-block;

  min-width: 10px;

  padding: 2px 6px;

  font-size : 8px !important;

  color: #8b8989 !important;

  text-align: center;

  white-space: nowrap;

  vertical-align: baseline;

  margin-top: -2px;

  border-radius: 10px;

  float:auto;

}