티스토리 뷰

종종 올리는 블로그 첫 글입니다.

 

블로그 스킨 선택과 수정, 세팅하는 시간이 며칠 걸렸네요 ^^

 

여러가지 스킨을 고민하다가 결정하게된 티스토리의 새 반응형 웹스킨 '#1' !!!

 

가장 마음에 들었지만 버그와 제 입맛에 맞지 않는 몇가지를 손보았고, 원하시는 분이 있으시면 도움이 되고자 이렇게 글을 올립니다.

 

티스토리 새 반응형 웹스킨 '#1'에서 버그?라고 생각되는 첫번째 수정 사항은 카테고리 바가 브라우져 높이보다 긴 경우 스크롤이 생기지 않아서 감추어진 카테고리는 선택하지 못하는 불편함이 있었습니다.

 

아래 스크린샷처럼 카테고리 보다 창이 더 길 경우에는 문제 없습니다.

 

 

 

그러나, 아래처럼 창 높이보다 카테고리가 긴 경우( 제 경우에는 길지 않아서 창 크기를 줄여봤습니다.)에는 보이지 않는 카테고리는 클릭하지 못하는 버그가 있습니다.

 

 

유동적으로 창크기가 클경우에는 스크롤바가 안생기고, 카테고리가 더 긴 경우에만 생기도록 해야 반응형 스킨이지 않겠습니까? ^^

 

그래서 자바스크립트 jQuery로 구현해봤습니다.

 

처음 로딩할때와 창 크기를 변경하는 이벤트일때 브라우져 창 크기를 구해서 창 크기가 카테고리보다 작을 경우에만 스크롤바가 발생하도록 구현해야 됩니다.

 

1. 아래 코드를 스킨 HTML 문서의 </head>앞 19번째 라인에 추가하세요.

<script type="text/javascript"> $(function(){ $(window).bind("load resize", function(){ // 처음 로딩하거나 창크기 변경할때 var scheight = $(window).height(); // 브라우져 창 크기를 구해서 $(".list_cate").css("max-height", scheight - 90); // 카테고리 최대 높이를 창크기보다 작게 지정 }); }); </script> </head>

해당 코드가 이해 안되셔도 위 코드를 19번째 라인(</head> 앞 라인)에 추가하시기만 하면 됩니다.

 

2. 그런 다음에 스킨 CSS 문서에서 69번째 라인쯤 .area_menu .list_cate 으로 시작하는 줄을 아래처럼 수정합니다.

.area_menu .list_cate{display:none;position:absolute;top:37px;left:0;width:158px;padding:18px 0 10px;border:1px solid #3db39e;border-radius:0 0 3px 3px;background-color:#fff;overflow:auto}

 

3. 그리고 스킨 CSS 문서 329번째 라인쯤에 .area_menu .list_cate으로 시작하는 줄을 아래처럼 수정합니다.

	.area_menu .list_cate{position:static;width:200px;padding:13px 0 15px;border:0 none;border-radius:0;max-height:inherit}

 

그러면 아래처럼 창크기보다 카테고리가 긴 경우에만 스크롤바가 생깁니다.

 

 

 

그런데, 카테고리 뒤에 글 갯수까지 생겼네요? ^^;;

 

4. 그건 아래 코드처럼 스킨 CSS 문서의 78번째 라인을 주석 처리(/*   */) 해주세요.

.area_navi .list_cate ul li { line-height:18px }
.area_navi .list_cate ul li a { display:block;padding-left:17px;margin-bottom:12px;font-size:12px;color:#333;height:17px }
.area_navi .list_cate ul li.selected > a,
.area_navi .list_cate ul li a:hover { text-decoration:underline;color:#3db39e }
/* .area_navi .list_cate .c_cnt, .area_navi .list_cate img { display:none } */
.area_navi .list_cate ul li ul li a {  }
.area_navi .list_cate ul li ul li ul { padding-bottom:6px; margin-top:-6px }
.area_navi .list_cate ul li ul li ul li { color:#b4b4b4; padding-left:21px }
.area_navi .list_cate ul li ul li ul li a { padding-left:0;margin-bottom:6px;font-size:12px;color:#666 }
.area_navi .list_cate ul li ul li ul li a::before { content:'· ' }
.area_navi .list_cate .menu_profile { display:none }

 

위 코드처럼 78번째 라인을 주석 처리(/*   */) 해주시면 됩니다.

 

위 내용이 이해 안되시는 분들은 아래 파일(main.zip)을 받아서 압축을 푸신후에 main.html은 메모장으로 열어서 스킨 HTML에 복붙(복사해서 붙여넣기)하고, main.css는 스킨 CSS에 복붙하세요 ^^ 

main.zip

 

 

티스토리 새 반응형 웹스킨 '#1'의 추가 수정한 사항은 다음 글에 종종 올리도록 하겠습니다.

 

종종 올리는 블로그의 첫 글이 많은 도움이 되셨으면 합니다.

 

궁금하신 사항이 있으시면 댓글로 글 남겨주시면 성심성의껏 답변 해드리겠습니다.

 

감사합니다. ^^

 

 

댓글
  • (´Д`;) 안녕하세요, 2001 년 이후로 HTML에 관심을 가지지 않아서 완전 문외한인 사람입니다. 저도 최근 이 반응형 스킨 #1 으로 스킨을 바꾸었는데요, 스마트폰에서 접속하거나 PC에서 모바일 블로그 주소를 입력해 접속하면 (블로그주소/m) 새 스킨이 아니라 옛날 모습 그대로 표시가 됩니다... 어째서일까요? ㅠㅠ 혹시 짐작가시는 원인이 있으신지요? 2016.03.17 04:13 신고
  • 토마토.. 관리페이지에서 [꾸미기] -> 모바일웹 스킨 -> 상단 탭 제일 오른쪽에 [모바일웹 스킨 ON OFF]에서 OFF 로 선택 후 [저장]을 누르세요.
    반응형 #1 스킨은 가로폭에 따라 자동으로 PC/모바일로 자동 반응되기 때문에 모바일 스킨을 따로 ON하시면 모바일 스킨으로 적용됩니다. 따라서 모바일 스킨을 OFF로 하셔야 반응형 스킨으로 적용됩니다.
    2016.03.17 23:28 신고
  • Lab510 랩쨩 너무 감사합니다. 잘 쓰겠습니다. ^^ 2016.04.12 00:40 신고
  • 토마토.. 댓글 감사합니다. 좋은 하루 되세요 ^^ 2016.04.12 12:30 신고
  • 시샘별 지금 토마토님 글 보면서 하나하나 적용중입니다.^^ 2016.04.14 10:50 신고
  • 토마토.. 적용이 잘 되길 바랍니다 ^^ 2016.04.14 12:06 신고
  • HER-ZONE KOREA & THAILAND D-BIO 하다 가 안되서 메모장으로 올려주신 파일 덮어버렸네요. 감사합니다. 2016.04.14 20:07 신고
  • 토마토.. 되서 다행이네요 ^^
    좋은하루 되세요 ^^
    2016.04.14 21:07 신고
  • 시샘별 지금 보니까 모바일웹에서는 카테고리 버튼이 안 보여요.ㅜㅜ
    제가 따라하다가 뭔가를 실수로 만져서 그런걸까요?
    버튼 있는 자리를 눌러보니 보이지만 않을 뿐 눌리기는 하더라구요.
    PC화면에서는 카테고리 버튼 잘 살아있는데..... 왜 모바일웹에서만 안 보이는지...... 잘 모르겠어요.
    2016.04.16 15:04 신고
  • 토마토.. 327번째 라인 수정이..무엇때문인지 아래로 밀려서 329번째 라인으로 되서..
    327번째 라인이 잘못 수정되었어요.
    css에서
    327번째부터 329번째라인까지 3줄을 아래처럼 바꾸세요.
    .area_head .ico_menu{display:block;width:40px;height:31px;margin:0;background-position:0 -80px;text-indent:0}
    .area_menu .btn_cate{display:none}
    .area_menu .list_cate{position:static;width:200px;padding:13px 0 15px;border:0 none;border-radius:0;max-height:inherit}
    2016.04.16 15:22 신고
  • 시샘별 감사합니다!!
    버튼이 생겼어요~~ +_+
    2016.04.16 17:13 신고
  • 비밀댓글입니다 2016.04.19 15:23
  • 토마토.. 최근글 보이기 스크립트가 줄바꿈이 안되어 있어요.
    제가 올려놓은 그대로 줄바꿈해서 다시 적용해보세요.
    2016.04.20 00:03 신고
  • 비밀댓글입니다 2016.04.24 07:23
  • 토마토.. 에이드폼님 댓글 감사합니다.
    잘 적용중이시라니 저도 뿌듯하네요 ^^
    알람은 안왔으니..괜찮아요 ㅎㅎ

    우선 카테고리 버튼이 사라지는 오류가 몇몇분 댓글 달아주셨는데 스킨이 계속 변경되는지 라인이 다들 제각각인가보네요.
    그래서 글에서 그 부분을 수정했습니다.
    [3. 그리고 스킨 CSS 문서 329번째 라인쯤에 .area_menu .list_cate으로 시작하는 줄을 아래처럼 수정합니다.]

    여러번 수정하시느라 고생하셨을텐데, 번거롭게 해드려서 죄송합니다.

    티스토리에 대한 포스팅은 많은사람이 공감할 수 있는 내용으로 하려다 보니 저만 필요하다고 생각되는 부분에 대해서는 포스팅을 안올렸습니다. (는..핑계고...솔직히 어느부분을 수정했는지 원본과 대조하면서 찾아야 하는데..찾기가 쉽지도 않고...귀찮기도 하고 ㅠㅠ)

    그런데 에이드폼님께서 딱 집어주시네요; 뜨끔했습니다.

    그렇다고 제 스킨 HTML과 CSS를 그대로 파일로 올리자니 각자 개성에 맞게 수정하고 싶은분들에게 도움이 안될것 같고..

    질문하신것중에 제가 잘 이해했는지 확인해주세요.

    1. 카테고리 넓이 넓히는 방법 - OK
    2. 제목끼리 위아래 사이 간격은 카테고리 이름과 이름 사이의 간격을 말하는건가요?
    3. 태그는 적용하되 보이지않게는..또는 태그 글씨 크기 작게하고 화이트로 해서 안보이게 하는 방법은..어렵지 않지만 문제는 검색사이트에서 화면상에 보이지 않으면 태그에 등록된 키워드가 검색이 되지 않는 문제가 있어요.
    UI상으로 지저분해보인다고 없애면 태그의 기능을 상실합니다 ㅠㅠ 그래도 수정하신다면

    CSS에서 맨 마지막줄에
    .skin_view .list_tag{display:none;}
    이렇게 추가하면 태그가 안보입니다.

    .area_etc .list_tag, .tit_tag, .desc_tag, .desc_tag a {font-size:7px;color:#fff !important}
    이렇게 추가하면 태그 글씨가 작고 white로 됩니다.

    1,2번은 에이드폼님께서 궁금해하시는 부분에 대해서 댓글로 쓰기엔 한계가 있어서 따로 포스팅하겠습니다.

    인기글은 티스토리 문의결과 제공이 어렵다고해서 구현 불가능합니다. 제 블로그에 있는 인기글은 구글 analytics의 통계를 보고 수동으로 넣은거에요.ㅠㅠ 일주일에 한두번 수작업으로 일일이 업데이트합니다
    2016.04.24 09:52 신고
  • 비밀댓글입니다 2016.04.25 00:56
  • 토마토.. 관련 포스팅 올렸어요. 참고하셔서 예쁘게 꾸미세요 ^^ 2016.04.25 22:34 신고
  • Engineer135 잘 되네요. 감사합니다~ 2016.12.19 11:48 신고
  • 흙냄새 밟고 오르다 그대로 따라했는데 적용이 안되네요. 글의 갯수가 그전에 나오지 않았는데, 이것만 또 갑작스레 적용. 놓친 게 있나 싶어서 그대로 복사까지 했는데도 안되네요. 압축파일의 html과 본문에서 살짝 다르네요. 홈페이지와 달리 압축 파일엔 <script language=javascript> 로 나오네요. 알았습니다. 테더데스크 해제하니까 되네요. 2016.12.30 18:11 신고
  • 한설날 덕분에 잘 적용했어요~, 감사합니다! 2017.01.02 12:31 신고
  • 코코넛냠냠 완전 좋아요 고맙습니다 2017.05.21 21:56 신고
  • 나에+ 헤멨는데..와..감사합니다(--)(__)
    참, 본문에
    </head>에 넣으라는 J쿼리 부분, javascrip으로 오타 있사와요~
    2017.09.04 22:02 신고
  • 상추님 감사합니다.
    윗분 말대로 javascrip를 javascript로 수정하니 잘 되네요!
    저도 자바랑 스크립트 공부좀 해야겠네요 ㅎㅎ^^
    2017.10.30 13:24
  • 잠자는 집시 초대받아 얼마전 블로그 오픈한 '잠자는 집시'입니다. (첨엔 '물병과 사자'라 썼네요. 자기 블로그 이름도 모르고...) 원체 블로그를 하지도 않았는데다 티스토리 블로그는 남의것을 들여다본 적도 없어서 모르는것 투성이. html이니화면 편집이니 먹는거 아닌것도 요번에 처음 알고 배워가고 있어요. ^^;;;; 여러모로 감사합니다. 앞으로 자주 와서 배우고 갈께요. 2018.09.23 06:25 신고
  • 토마토.. 도움되셨으면 좋겠어요 ^^ 2018.09.28 16:19 신고
  • 잠자는 집시 여기다 올려도 되는지 잘 모르겠지만, 일단 답변도 주시고 질문있음 댓글로 달라고 허락하셔서 올려봅니다. 말씀드린대로 블로그 초보라 요새 여기저기 인터넷보고 공부하고 있는데요. 네이버랑 이웃맺기 위젯 하는 법을 어디서 보고 시키는대로 다했는데, chrome에서 비정상적인 뭔가를 감지했다며... 제 페이지에서는 안나타나게 되더라구요. 혹시 이 문제 해결법을 아시는지요? 아니면, 토마토...님께서 '티스토리 블로그'랑 다른 블로그 연동방법을 알려주실수 있는지요? (초롱초롱) ^^ 2018.09.28 17:02 신고
  • 토마토.. 서버와 로그인 정보가 달라 되는지 모르겠네요. 제가 모르는 다른 방법이 있는지 검색해 보겠습니다 ^^ 2018.09.28 21:29 신고
  • 건방진병아리 답답했던걸 한번에 풀어주셨네요~ 감사합니다. 2019.01.23 21:10 신고
  • 리나안젤라 카테고리가 많아서 그동안 이 스킨을 안 썼는데, 덕분에 해결하고 스킨으로 교체했습니다. 감사합니다~!! 2020.05.17 18:24 신고
댓글쓰기 폼
공지사항
Total
922,128
Today
201
Yesterday
308
링크
«   2021/04   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  
글 보관함