티스토리 반응형 스킨, 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.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 으로 줄어드는 디바이스에서는 정사각형 애드센스가 제대로 작동하지 않을 수 있습니다.
    2017.06.24 22:21 신고
    답변 감사해요!
    그런데 제가 태그만 조금 아는 정도라 ㅜㅜ 알려주신 부분을 어느 위치에 추가하면 될까요?
    참고로 클릭몬 광고 사용하고 있습니다!
    <script type="text/javascript">
    (function(cl,i,c,k,m,o,n){m=cl.location.protocol+c;o=cl.referrer;m+='&mon_rf='+encodeURIComponent(o);
    n='<'+i+' type="text/javascript" src="'+m+'"></'+i+'>';cl.writeln(n);
    })(document,'script','//tab2.clickmon.co.kr/pop/wp_ad_300_js.php?PopAd=CM_M_1003067%7C%5E%7CCM_A_1025205%7C%5E%7CAdver_M_1003115');
    </script>
    2017.06.25 11:29 신고
    html/css 에서 css 부분에

    .sidebar-ad {
    overflow: hidden;
    width: 300px;
    height: 250px;
    background-color: #eee;
    /* 색상 */
    }

    으로 바꿔주세요. 컨트롤 + F 로 .sidebar-ad 를 찾으시면 될듯 합니다.
  • 2017.06.24 22:37 신고
    아, 그리고 메인에 나오는 기본글 개수를 조정했더니 최근 글과 최근 댓글리스트가 앞 한글자로만 짤려서 나와요.ㅠㅠ
    제가 다른걸 또 건드린걸까요??
    2017.06.25 11:29 신고
    화면설정-화면출력 부분에서 최근 글, 최근 댓글 글자 수를 40글자로 조정하시면 될듯 합니다.
    2017.06.27 06:25 신고
    감사합니다 고봉님 ;)
    덕분에 잘 해결했어요!!
    앞으로도 예쁘게 잘 쓰겠습니당 ^^
  • 2017.06.29 15:36
    비밀댓글입니다
  • 2017.07.02 21:13 신고
    스킨 아주 잘 변경했습니다^^
    그런데 한가지 문제점이 있는데요 질문해도 될까요?
    원래 반응형링크 광고를 삽입하면 PC에서 가로로 4개정도 떴는데,
    스킨 변경후에 보니깐 세로로 길개 10개가 떠버려서.. 글을 다 먹어버리더군요
    해결 법 있을까요?

    아 그리구, <H1>과 <H2> 적용했던 헤드라인이 원래 글씨크기가 컸었는데 스킨 변경후에는 적용이 안되는 것 같습니다. 크게 할 수 있을까요?
  • 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 신고
    감사합니다 잘쓰겠습니다.
    실례지만 이런제작법은 독학하신건가요
Leave a comment
Your name *
Your PassWord *
Comment *
COMMENT