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

G-SKIN 소개

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




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.05.14 22:05 신고
    네~ 유용하게 사용해주세요 :)
  • 2017.05.16 02:56
    비밀댓글입니다
    2017.05.16 18:04 신고
    네~ 잘 사용해주세요. 다만 메인화면 티에디션은 정상 작동이 되지 않습니다 :)
  • 2017.05.19 20:25
    비밀댓글입니다
    2017.05.21 00:38 신고
    마음에 드셨다니 기분 좋네요 :)
  • 2017.05.26 02:08 신고
    감사합니당 이런 경량의 심플한 스킨을 찾고 있었습니다 무료로 배포해주시다니 감사할 따름이네여 잘쓰겠습니다 번창하세요(?)~!
    2017.05.26 02:30
    비밀댓글입니다
    2017.05.26 02:33 신고
    같은 카테고리에 글을 작성해보세요. 2개 이상의 글이 있는 카테고리는 카테고리 내 다른글이 표시돼요 ㅎㅎ
    2017.05.26 02:44 신고
    헿헿ㅎㅎ 확인했습니다. 수많은 스킨중에서도 제 마음에 쏙 드는 스킨입니닷 제작해주셔서 감사합니다
  • 2017.05.26 12:30 신고
    안녕하세요 심플하고 가벼운 스킨 배포해주셔서 감사합니다.
    한가지 문의점이 있는데요, 포스팅 내 애드센스 광고를 모바일 화면에서 확인해보면 광고가 정 가운데 자리잡고 있지 않은데 왜 그런지 모르겠습니다. 혹시나 해서 밥을고봉님 블로그도 모바일로 접속해봤는데 광고가 우측으로 치우쳐서 짤리더라고요
    심지어 모바일 하단에 뜨는 앵커광고까지도 우측으로 몇 칸 들어가서 나옵니다 ㅠ
    해결 방법 좀 알려주실 수 있을까요?
    2017.05.26 13:14 신고
    해결했습니다. 주절주절 자문자답 죄송해요 ^^;
    2017.05.26 13:16 신고
    해결하셨다니 다행입니다^^
    어떤 방식으로 해결하셨는지 알 수 있을까요?

    모바일 디바이스가 어떤 기종인지 알 수 있을까요? 광고의 크기가 커서 그러지 않을까 싶은데

    피드백 주시면 보완하는데 도움이 됩니다 ㅎㅎ
    2017.05.26 13:19 신고
    스킨 속 css 에
    .adsbygoogle {
    width: 160px;
    height: 600px;
    margin: 0 21.5px;
    }

    여기 마진을 잡아놓으셨더라구요
    지웠더니 원하던대로 나왔습니다.
    갤6로 확인했구요 ^^
    2017.05.26 13:24 신고
    그 마진은 pc 중간 크기일때, 중간에 배치하기 위한 마진이었습니다 ㅎㅎ

    .sidebar-ad .adsbygoogle {
    display: inline-block;
    width: 300px;
    height: 600px
    }

    @media all and (max-width: 990px) {
    .sidebar-ad {
    width: 203px;
    height: 600px;
    /* 색상 */
    }
    .sidebar-ad .adsbygoogle {
    width: 160px;
    height: 600px;
    margin: 0 21.5px;
    }
    }

    이렇게 바꾸시면 될듯 해요.
    2017.05.26 13:25 신고
    아핫! 감사합니다^^
  • 2017.06.01 01:40 신고
    안녕하세요 밥을고봉님^^ 질문이 또 하나 생겨서 찾아왔습니다.
    본문 말고 기본화면 출력 부분에서 본문글이 5줄 미리보기 되어 나오고 있는데요, 이 보여지는 줄 갯수를 수정하려면 어떻게 해야 하나요? + 아예 제목만 보이게 하는 방법도 궁금합니다.
    애드센스를 본문 중에 넣었더니 소스가 다 보이더라고요 ㅎㅎㅎ
    2017.06.01 12:42 신고
    미리보기의 본문은
    .content-post-txt {display: none;}
    을 추가하면 안보이게 설정할 수 있습니다.

    다만 글의 줄 수를 조절하는건 스킨에 따라 미세하게 조정되는 부분이어서 손쉽게 할 수 있는 부분은 아닙니다. (지금 시간이 없어서) // (참고) .content-post-txt 의 높이를 설정해서 안보이게 해주면 됩니다.

    아예 쉬운 방법으로 본문 애드센스의 위치를 조금 더 아래로 배치하는 방법도 있습니다. 미리보기에는 본문 내용만 보일 수 있도록요 :)
    2017.06.01 12:44 신고
    답변 감사합니다 ^^ 바로 수정해보겠습니다~~
  • 2017.06.07 21:26 신고
    밥을고봉님 몇 가지 사안이 있는데요
    1. 글쓰고 난 후 에디터에서 보였던 글머릿 기호 및 들여쓰기가 블로그에서
    보이지 않습니다.
    2. 관리-글쓰기를 거치지 않고 카테고리 내에서 바로 글을 추가, 수정이나 삭제 할 수 있는 기능은 없나요?
    2017.06.08 11:52 신고
    1. 어떤 글머릿 기호와 들여쓰기인지 몰라서.. 답을 드릴 수가 없네요.

    2. 추가는 가능한데, 경험상 크게 쓸 일이 없는 버튼이고 미관상 없는게 깔끔해서 추가하지는 않았습니다.

    HTML/CSS 들어가셔서 HTML 쪽에 버튼 찾아서 추가하면 쉽게 추가할 수는 있어요.
  • 2017.06.15 21:41 신고
    스킨 잘 사용하겠습니다~ 이뿐 스킨 만들어주셔서 감사합니다~^^
    2017.06.18 00:14 신고
    ^^ 잘 사용해주세요
  • 2017.06.21 21:37 신고
    감사합니다! 심플하니 너무 예뻐서 보자마자 바로 적용시켰어요 :)
    한가지 문의 드릴 점이 사이드바 광고 배경(회색) 부분은 어디서 조절하나요?
    사이드바에 정사각형광고를 넣고 메뉴가 좀 위쪽으로 당겨졌으면 해서요 ^^
    2017.06.23 13:19 신고
    .sidebar-ad {
    overflow: hidden;
    width: 300px;
    height: 600px;
    background-color: #eee;
    /* 색상 */
    }

    이 부분에서 height 값을 조절하면 됩니다.

    주의하실 점은 사이드바의 길이가 150x600 으로 줄어드는 디바이스에서는 정사각형 애드센스가 제대로 작동하지 않을 수 있습니다.
Leave a comment
Your name *
Your PassWord *
Comment *
COMMENT

티스토리 툴바