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



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

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

저의 노가다의 산물인 (모든 글에 구글 애널래틱스 스크립트를 ‘수작업’으로 집어넣기) 분석 결과를 보면, 모바일 접속자가 과반수를 넘고 있습니다. 거의 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가 가장 맘에 들어서 요것을 적용시켜볼까 합니다. 🙂
그리고 찾다보니 반응형 스킨 뿐만 아니라 티스토리 스킨을 쉽게 찾아볼 수 있는 사이트가 있어서 함께 링크합니다. 티스토리 스킨 예쁜거 없나~ 하고 찾는 중이신 분들은 요 사이트에 한번 둘러보세요.

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

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;

}



4 Comments

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

  1. 티스토리에도 다양한 반응형 스킨이 나왔네요.
    1년 전에는 마크쿼리님과 Readiz 님의 스킨만 있었던 것 같은데…
    제 블로그는 어떤가요? ^^;;
    배포판은 아니지만 제가 직접 만든 반응형 스킨이랍니다..

    ——————
    카테고리 글 목록에서 댓글 숫자 앞 뒤로 괄호를 넣는 방법은 아래와 같습니다.
    #sidebar .c_cnt:before {
    content: “( “;
    }
    #sidebar .c_cnt:after {
    content: “) “;
    }

    :before와 :after 는 해당 클래스의 앞 뒤에 내용을 추가할 때 사용될 수 있습니다.

    1. 직접 만드신 거였군요? 정말 깔끔하게 잘 만드신것 같아요. ^^ 그리고 괄호 넣는 법 알려주셔서 너무 감사드려요! +_+ 유용하게 잘 쓰겠습니다.

  2. 음… 전 html코드 잘은 모르지만, 반응형 전에 스킨을 적용하며 고민해보고 티에디션으로 이리저리 꾸미던 여유로웠던 때가 그립긴 하네요… 한달 정도 써보니 반응형 스킨 바꿔보고도 싶은데, 모바일과 PC에서 이리저리 어떻게 보이는지 제가 잘 모르겠으니 귀찮아지기도 하고 그래요… ㅎ 폰트는 변경해보고 싶은데 나중에 한번 찬찬히 적용해 봐야겠네요… 거의 1년이 된 포스팅이시지만 시간에 구애받지 않는 좋은 정보들 너무 감사합니다 ^^

    1. 사실 지금에 와서 읽으면 너무 바뀐 것도 많고, 그동안 반응형 스킨도 많이 나와서 좀 오래된 정보이긴 하죠. ^^ 그래도 한번 써놓으면 누군가에게는 도움이 될 수 있다는게 블로그의 매력이 아닐까 합니다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다