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


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

그중에서도 티스토리에서 기본으로 제공하는 반응형 스킨인 #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. Favicon of http://darktrish.tistory.com BlogIcon Lusetina 2016.09.29 13:20 신고

    스킨 이것저것 적용해봤는데 이게 제일 깔끔하고 가볍네요!!!
    개인적으로 약간 수정해서 사용하고 있어요!
    정말 너무 좋아요 감사합니다 (_ _) 넙죽

  3. Favicon of http://pvnt3.tistory.com BlogIcon theNoTO 2016.11.14 22:46 신고

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

  4. Favicon of http://amamomentum.tistory.com BlogIcon 어쩌다어른이 2016.11.23 10:22 신고

    멋진 스킨 잘 쓰겠습니다.^^

  5. Favicon of http://roidecafe.tistory.com BlogIcon 카페왕 2016.12.05 23:09 신고

    첫 블로그 너무너무 맘에 드는 스킨이네요 ㅎㅎ 깔끔한 스킨 공유 감사합니다 ^^ 잘쓰겠습니당

  6. 2016.12.07 18:33

    비밀댓글입니다

  7. 민글 2016.12.10 22:16 신고

    기면기님 저 아주 잘 쓰고 있습니다 ! .

  8. Favicon of http://learnbooks.tistory.com BlogIcon 책배세 2017.01.09 19:24 신고

    안녕하세요. 저는 기본스킨으로 사용하고 있는데 제일 하단에 보면 공지사항, 최근에 올라온 글, 최근에 달린 댓글, Total, 링크, 태그, 달력, 글보관함 이렇게 되어 있는데 님은 4가지만 보이도록 해놓으셨네요. 어떻게 하는지 여쭤봐도 될런지요? 조정을 하면 카테고리가 나타나지가 않더라구요.

  9. Favicon of http://roidecafe.tistory.com BlogIcon 카페왕 2017.01.25 16:14 신고

    안녕하세요. 또다시 찾았습니다..ㅠ 모바일 서버에서 카테고리-글쓰기를 누르면 제 블로그에 글이써지는것이 아니라 기면기님 사이트로 와지면서 기면기님이 아니라고 글쓰기가 안된다는 데 혹시 방법이 있을까요..?

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

      제가 가서 확인해보니, 이미 고치신것 같네요. 문제생기면 또 답글달아주세요!

    • Favicon of http://roidecafe.tistory.com BlogIcon 카페왕 2017.01.26 01:00 신고

      아,, 못고쳤습니당 ㅠ 티스토리 어플로 하면 상관없는데 모바일 웹에서 켜서 하면 그렇게 되더라구요.. 지금 변경한건 없습니다 ㅠ

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

      HTML/CSS 편집에서 HTML 147번째 줄 정도에 글쓰기 있는부분 주소를 수정해 주세요.
      아마 제 블로그 주소가 써진부분을 수정을 안하신것 같네요.
      전 그부분에 글쓰기를 삭제해서 지금은 없지만, 제 블로그 HTML 소스가 저 위치이니 아마 맞을겁니다.

      [ ##_category_list_## ]
      <ul class="menu_profile">
      <li><a href=" [ ##_guestbook_link_## ]">방명록:D</a></li>
      <li><a href="http://section.blog.naver.com/connect/PopConnectBuddyAddForm.nhn?blogId=khg8881&widgetSeq=1&sender=code" target="_blank">이웃추가</a></li>
      </ul><ul class="menu_profile">
      <li><a href="http://hello1988.tistory.com/admin/center">관리</a></li>
      </ul>
      </div>
      </div>
      </div>

  10. Favicon of http://roidecafe.tistory.com BlogIcon 카페왕 2017.01.26 02:12 신고

    아 변경했습니다 잘되네요 감사합니다^^

  11. 2017.02.14 08:32

    비밀댓글입니다

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

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

  12. kcg 2017.02.25 18:34 신고

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

  13. 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을 적용하면 굵은 글씨가 표현이 안되네요.
      지금은 그냥 다른 스킨으로 교체 했어요. 답변 달아주셔서 감사합니다ㅎㅎ

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

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

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

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

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

    재능 기부 감사합니다.

  17. 2017.07.18 12:09

    비밀댓글입니다

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

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

  19. 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 [택대리네 식당이야기]

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

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

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

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