티스토리 반응형 스킨, G-SKIN 2 배포

G-SKIN 소개

기본적으로 제가 사용하기 위해서 만든 티스토리 스킨입니다. 기존의 스킨들로는 만족감을 느끼지 못해서 제게 필요한 요소들을 중점으로 생각하며 만들었습니다. 불필요한 요소들은 제거하고, 최대한 깔끔하고 가벼운 스킨으로 만들기 위해 노력했으며 모든 파일의 용량을 합쳐도 50Kb 가 넘지 않는 초경량 스킨입니다. 또한 썸네일의 크기를 적절히 조절하여 로딩 속도에 지장이 없도록 만들어졌습니다.




G-SKIN 공지

한동안 티스토리 블로그 활동을 하지 않아 스킨의 개발이 이뤄지지 않았습니다. 현 티스토리 상황에서 오류나 불편한 사항이 있다면 댓글로 남겨주세요. 참고해서 수정, 개발하는데 참고하겠습니다.



G-SKIN 특징

G-SKIN 은 어떤 특징을 중점으로 제작이 되었는지 소개하겠습니다.


1. 깃털 같은 가벼움

2. 모던한 느낌

3. 다양한 기기 및 브라우저 크기에 반응하는 디자인

4. 구글 애드센스 등을 탑재할 수 있는 넓은 사이드바





G-SKIN 주의사항

다른 스킨들과 다른 점이 있습니다. 참고하시고 사용하시는데 불편함이 없으시길 바랍니다.


1. 글 페이지에 발행, 수정 등의 버튼을 제거했습니다.

2. 스킨을 완성만 한 단계입니다. 코드 정리와 같은 부수적인 작업은 아직 이뤄지지 않았습니다. 직접 수정하실 때, 많이 불편하실 겁니다.

3. 브라우저의 테스트가 이뤄지지 않았습니다.

4. 실 사용 테스트가 이뤄지지 않았습니다.



라이센스

1. G-SKIN은 무료로 배포됩니다.

2. 자유롭게 수정이 가능하며, 재배포는 불가능합니다.

3. 하단의 Copyright는 수정 불가합니다.



스킨 다운로드

링크



스킨 등록

1. 티스토리 관리 페이지에 접속합니다.

2. 꾸미기 -> 스킨 -> 스킨등록 버튼을 누릅니다.

3. 스킨 이름을 입력하고, 추가를 통해 다운 받은 스킨의 모든 파일을 업로드 합니다.

4. 저장 후 스킨 -> PC 보관함 에 저장된 스킨을 적용하시면 됩니다.



스킨 설정

1. 글설정에서 가로폭을 1000px 로 설정해주세요. 이후 다른 스킨 변경을 하더라도 사진 파일을 풀 사이즈로 이용하기 위함입니다.

2. 꾸미기에서 모바일웹 스킨 OFF로 설정합니다.

3. 꾸미기 -> 화면 설정에서 메뉴 탭에 원하는 메뉴를 설정합니다.

4. 꾸미기 -> 화면 설정에서 출력 탭에서 원하는 옵션을 선택합니다. (아래 사진 참고)

5. 플러그인에서 카테고리 글 더보기 플러그인을 해제합니다.

6. HTML/CSS 편집에서 "작성하세요" 라고 되어있는 부분을 작성하고, <!-- & --> 를 제거합니다.





패치노트

1. 사이드바의 애드센스를 하단이 아닌 다른 위치에 배치했을 때, 레이아웃이 어긋나는 현상을 수정

2. 애드센스를 배치 (중간은 서식으로, 하단은 모바일에서)

3. 동영상이 반응형 스킨에 맞도록 스크립트 추가

4. 페이징의 숫자를 제거

5. /notice 페이지에서 공지글이 없을 때 레이아웃이 깨지는 현상을 수정



알려진 문제점

글 관리와 글쓰기 등의 버튼이 없어 불편하다고 여기는 분들이 존재 (일부러 넣지 않았으나 많은 분들이 요청하면 추가할 계획)

Comments
  • 이전 댓글 더보기
  • 2017.07.04 13:20 신고
    안녕하세요. 스킨 잘 쓰고있습니다.
    그런데 스킨 소스코드를 살짝 바꾸긴했는데 그래봤자 사이드바랑 애드센스라서...
    일단 문제점이 </body> 이렇게 닫히는 부분이 빨간색으로 됩니다... 열고 닫기가 분명히 모두 존재하는데요~
    혹시 감 오는 거라도 있으신가요?
  • 2017.07.05 11:18 신고
    혹시 글을 갤러리 형태로 나열할 수는 없나요??
  • 2017.07.07 11:21
    비밀댓글입니다
  • 2017.07.21 23:29 신고
    감사합니다. 잘 사용하겠습니다.
  • 좋은 스킨 감사합니다. !
    밥을고봉님 스킨을 지속적으로 사용하는 블로거로서,
    한가지 질문드려요 혹시나 스킨 1.(현재 제가 사용하고있는 밥을고봉님 스킨1.)
    모바일 반응형 페이지로 개조 될 수있을까요 ?
  • angella1995
    2017.09.09 15:35 신고
    잘쓸게요 감사합니다.~
  • 2017.09.27 21:28 신고
    감사합니다 잘쓸게요
  • 2017.10.11 10:46
    비밀댓글입니다
  • 2017.10.23 16:50 신고
    감사합니다 잘쓰겠습니다.
    실례지만 이런제작법은 독학하신건가요
  • 2017.11.09 17:08 신고
    감사합니다. 잘쓰겠습니다.
    스킨 수정 하다가 보게 된 것인데요. paging부분에 하단이 조금 짤렸네요.

    .wrapper-paging {
    overflow: hidden;
    margin: 0 69px auto;
    line-height: 2.1;
    }

    이러면 어떨까요?
  • 2017.11.25 00:49 신고
    감사합니다. 잘 쓰겠습니다.
  • 2017.12.01 22:20 신고
    감사합니다. 잘 사용할게요!
  • 2018.03.07 16:49 신고
    깔끔한 스킨 정말 감사히 잘 사용하겠습니다.
  • 2018.03.07 18:48 신고
    잘 사용하고 있습니다만, 페이징 숫자를 제거하셨는데 저는 페이징 숫자가 꼭 필요한데 사용할 수 있는 방법이 없을까요?
    2018.03.08 13:28 신고
    <s_paging>
    <div class="paging">
    <a class="">◀ PREV </a>
    <span class="numbox">
    <s_paging_rep>
    <a class="num">[]</a>
    </s_paging_rep>
    </span>
    <a class="">NEXT ▶</a>
    </div>
    </s_paging>

    티스토리 가이드의 페이징 치환자 입니다. 이것과 비교를 하시면 도움이 되실지도!

    <s_paging_rep>
    <a class="num">[]</a>
    </s_paging_rep>

    페이징 번호는 이 부분입니다
  • 2018.03.08 14:27 신고
    네 큰 도움 되었습니다. 감사합니다.
  • 오~ 오늘 어떤 블로그를 보고 있는데 스킨이 gskin으로 정용되어 있더라고요.
    그래서 스킨이 맘에 들어서 제 블로그에도 적용시켰는데요,아주 좋아요!
    어떻게 이렇게 좋은 스킨을 만드실수가 있어요?
    2018.03.24 15:40 신고
    마음에 드셨다니 기분 좋네요~ ^^
  • 네~이런 좋은 스킨 만들어주셔서 감사합니다!
    항상 응원할게요!
  • 2018.04.04 20:14 신고
    감사히 쓰고 있습니다!
    2018.04.04 20:15 신고
    다만 갑자기 광고가 달렸는데 이건 어떤 건가요?
    2018.04.19 12:05 신고
    애드센스이고, 주소 바꿔쓰시거나 없애시면 됩니다
  • 2018.04.15 23:55 신고
    감사합니다. 잘 사용하겠습니다~
  • 2018.04.16 13:58
    비밀댓글입니다
    2018.04.19 12:06 신고
    html / css 만 배우셔도 금방 만드실수 있어요~
Leave a comment
Your name *
Your PassWord *
Comment *
COMMENT