티스토리를 하면서 요즘 가장 흥미로웠던것이 반응형스킨이였습니다.


스킨 다운받는곳에서 다른분들이 공유해주시는 스킨 이것 저것 적용해보니 뭔가 신세계더라구요!!!

그중에서도 티스토리에서 기본으로 제공하는 반응형 스킨인 #1 이 가장 깔끔한게, 제맘을 사로잡았습니다.


그런데, #1 에서 기본적으로 제공해주는것 말고도, 저는 이것 저것 기능을 더 넣고싶어 이리기웃 저리기웃하다가,

다른분들이 수정하신을 것들을 참고해서 제가 필요한 기능들을 이 스킨에 다 넣어서 만들었습니다.



반응형 스킨 #1 , 수정판 기면기 버전입니다.





다운로드  

반응형_#1_수정본_기면기.zip



먼저 이 스킨에 사용된 출처는 다음과 같습니다.


* 기본 #1 스킨 : 티스토리 배포

* 스킨 기본 베이스 : [ㅋㅋ두유]님 http://hg4004.tistory.com/144

* 왼쪽 메뉴바 추가 : [택대리]님 http://ptmazinga.tistory.com/36

* 이미지 확대 효과 : [모지모지]님 http://www.mojimoji.co.kr/593

* 이미지 라운드 효과 : [모지모지]님 http://www.mojimoji.co.kr/574



기본 틀은 티스토리에서 배포한것을 [ㅋㅋ두유]님께서 수정하셔서 배포해 주셨는데, 여기에 몇가지 기능을 더 추가하였습니다.



더보기


제가 수정한 사항은 다음과 같습니다.


1. 왼쪽 카테고리 사이드 바 생성.


2. 썸네일 이미지 확대 효과. (마우스를 가져다 대면 확대효과)


3. 블로그에 첨부되는 모든 이미지 라운드 처리.


4. 블로그에 기본 글자체를 [나눔스퀘어]로 적용.
   (모바일도 나눔스퀘어 서체 적용)


5. 모바일 메뉴에서 이웃추가, 로그인, 글쓰기 항목 추가.




스킨적용된 블로그 둘러보기 : http://hello1988skin.tistory.com/


문의사항은 댓글이나 방명록으로 남겨주시면 제가 알고있는선에서 답변드리겠습니다.



'IT/블로그' 카테고리의 다른 글 : more

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 2017.02.14 08:32

    비밀댓글입니다

    • Favicon of http://hello1988.tistory.com BlogIcon 기면기 2017.02.16 00:41 신고

      스킨 적용방법은 [티스토리 스킨 적용]으로 검색해보시면 많은 자료들이 있으니 직접 보고 따라해 보시길 권장드립니다.

  3. kcg 2017.02.25 18:34 신고

    공유감사해요. ^^ 메인화면에서 포스팅에 댓글 달린 갯수 표시되게 해주실 수 있나요. (된다면 눈에 팍띄게 말이죠^^;;)

  4. Favicon of http://secretgd.tistory.com BlogIcon 옹봉이 2017.04.26 02:12 신고

    감사합니다. 저는 #1 원본 사용하다가 여기서 필요한 기능들만 뽑아서 적용시켰더니 좋네요.

    #1 스킨이 모바일에서는 굵은 글씨체(Bold)가 표현이 안되는데 혹시 어디를 건드려야 할지 알려주실 수 있나요?

    • Favicon of http://hello1988.tistory.com BlogIcon 기면기 2017.05.20 17:18 신고

      HTML/CSS 부분에 모바일과 PC버전 글씨체 적용하는 부분이 서로 다릅니다.

      근데 굵은 글씨체는 모바일이라도 표현이 되어야하는데, 혹시 사용하시는 기기에서만 안보이는건 아닌지요??

    • Favicon of http://secretgd.tistory.com BlogIcon 옹봉이 2017.05.21 16:06 신고

      기면기님께서 공유해주신 수정본을 적용했을때는 모바일에서도 굵은 글씨가 잘 표현이 되는데 순정 #1을 적용하면 굵은 글씨가 표현이 안되네요.
      지금은 그냥 다른 스킨으로 교체 했어요. 답변 달아주셔서 감사합니다ㅎㅎ

  5. Favicon of http://intak-music.tistory.com BlogIcon Creator Intak 2017.05.15 18:10 신고

    제가 원하던 스킨을 만들어주셨네요ㄷㄷ 진짜 심플하면서 필요했던기능이 다들어있는 점이 너무 맘에 듭니다 잘쓰겠습니다~

  6. Favicon of http://ddooooki.tistory.com BlogIcon 뚜기★ 2017.06.27 23:42 신고

    스킨 넘 잘 사용하고 있습니다 ^^ 감사의 인사를 드리러 방문 했습니다~ 넘나 심플하고 이쁜 것.. 감사해요!!

  7. Favicon of http://choijava.tistory.com BlogIcon 최자바 2017.07.10 14:28 신고

    재능 기부 감사합니다.

  8. 2017.07.18 12:09

    비밀댓글입니다

  9. Favicon of http://bgghsfreelog.tistory.com BlogIcon Bggh 2017.07.27 17:40 신고

    이번에 갓 티스토리 입문한 bggh입니다~ 스킨이 맘에들어서 가져가요~

  10. Favicon of http://koreaslow.tistory.com BlogIcon 늘남이 2017.08.03 16:58 신고

    감사합니다 잘쓸께요 ^^ 참 혹시... 카테고리에 5글자 이상 들어갈때글씨가 밀리는 경우가 있는데요
    지금은 카테고리 메뉴이름을 4글자로 해서 밀리는걸 방지 해두었는데요 혹시...
    혹시.. 5~6글자 써도 겹치거나 안밀리게 설정하는 방법은 없을까요?;;

    • Favicon of http://hello1988.tistory.com BlogIcon 기면기 2017.08.06 01:46 신고

      * 왼쪽 메뉴바 추가 : [택대리]님 http://ptmazinga.tistory.com/36

      글을 참고하셔서 넓이 값을 조정해 주세요.

    • Favicon of http://hello1988.tistory.com BlogIcon 기면기 2017.08.06 01:48 신고

      CSS편집에서 width:150px 을 늘려주시면 될것같네요

      /*왼쪽 메뉴바*/
      #left_menu{position:fixed;left:-5px;top:100px;width:150px;border-radius:5px;border:1px solid #dcdcdc;border-radius:5px;padding:15px;}
      .left_menu_list ul li { line-height:18px }
      .left_menu_list ul li a { display:block;padding-left:17px;margin-bottom:12px;font-size:12px;color:#333;height:17px }
      .left_menu_list ul li.selected > a,
      .left_menu_list ul li a:hover { text-decoration:underline;color:#36b39e }
      .left_menu_list ul li ul li a { }
      .left_menu_list ul li ul li ul { padding-bottom:6px; margin-top:-6px }
      .left_menu_list ul li ul li ul li { color:#b4b4b4; padding-left:21px }
      .left_menu_list ul li ul li ul li a { padding-left:0;margin-bottom:6px;font-size:12px;color:#666 }
      .left_menu_list ul li ul li ul li a::before { content:'· ' }
      #left_guest{margin-top: 20px;}


      출처: http://ptmazinga.tistory.com/36 [택대리네 식당이야기]

  11. Favicon of http://one-and-on1y.tistory.com BlogIcon 파인넛 2017.08.03 23:30 신고

    공유 감사합니다 잘 사용할게요!

  12. Favicon of http://time222.tistory.com BlogIcon blue line 2017.09.15 17:12 신고

    멋진 스킨 감사히 잘쓰겠습니다^^
    여쭤볼 말이 있는데요. 카테고리 글씨체를 택대리님처럼 바꾸고싶은데 어떻게해야하는지
    물어보고싶습니당.

  13. Favicon of http://finan-medical.tistory.com BlogIcon 피렌초 2017.10.05 23:37 신고

    스킨 감사해요!! 잘쓰겠습니다 !! 감사합니다!!

  14. Favicon of http://ajd49.tistory.com BlogIcon ajd 2017.11.23 19:41 신고

    스킨 잘 쓰겠습니다. 감사합니다.

  15. Favicon of http://ajd49.tistory.com BlogIcon ajd 2017.12.24 13:52 신고

    깔끔한 스킨 감사합니다. 잘쓰겠습니다.

  16. 2018.02.19 13:33

    비밀댓글입니다

  17. 2018.02.26 03:16

    비밀댓글입니다

  18. Favicon of http://t0dd-dev.tistory.com BlogIcon t0dd 2018.02.28 03:39 신고

    안녕하세요, 스킨 레이아웃이 좋아서 제 입맛에 맞게 수정해보았는데 공유해도 될까요?

  19. Favicon of http://laon-duzi.tistory.com BlogIcon 라온두지 2018.03.15 22:55 신고

    감사합니다~ 유용하게 사용할 수 있을 것 같아요

  20. Favicon of http://yoondinosour.tistory.com BlogIcon 콘룡 2018.03.21 14:51 신고

    감사합니다 ^^ 스킨 잘쓰겠습니다 !!!!!!!!!!!!

  21. Favicon of http://yoondinosour.tistory.com BlogIcon 콘룡 2018.04.26 17:22 신고

    안녕하세요 기면기님 ^^ 공유해주신 스킨 잘 사용중이고, 왼쪽 카테고리 크기도 말씀해주신대로 수정해서 잘 쓰고 있습니다. 한가지 여쭤보고 싶은게 있습니다. 혹시 글 아래족에 카테고리 다른 글 보기는 텍스트말고 썸네일로 바꿀 수 있는 방법은 없을까요? ....