티스토리 뷰


티스토리 반응형 웹 스킨 #1 의 카테고리 가로 폭 늘리는 방법과 카테고리 메뉴 바 수정을 위한 전반적인 가이드를 알려드립니다.


티스토리 반응형 웹 스킨 #1의 카테고리 스크롤바와 글 갯수 보이기는 아래 링크를 참고하세요.

2016/03/07 - [IT/블로그,티스토리] - 티스토리의 새 반응형 웹스킨 '#1' 카테고리 스크롤바와 글갯수 보이기


우선, 티스토리 반응형 웹 스킨 #1의 카테고리 가로폭이 너무 좁아서 카테고리 이름이 길경우에는 줄바꿈이 되어서 글자가 겹쳐보이거나 답답한 면이 있죠.


카테고리 메뉴바의 가로폭 늘리는 방법에 대해 궁금해 하시는분이 있으셨는데, 댓글로는 한계가 있어 포스팅하게 되었습니다.


솔직히 이 포스팅을 전에도 하려고 했으나 다른 블로거님들도 필요할까 생각이 들기도하고..좀 귀찮은 작업이라 미루고 있었습니다 ㅠㅠ


이 포스팅대로 따라하시면 아래와 같이 수정될것입니다.


자, 이제 시작해 봅시다.

디폴트는 카테고리 메뉴바 폭이 160px인데, 200px로 늘릴것입니다.


관리 -> 꾸미기 -> HTML/CSS 편집 -> CSS 탭에서 아래 코드를 복사해서 붙여넣으세요.

66번째라인부터 84번째 라인을 삭제하고 아래 코드를 붙여넣으면 됩니다.

.area_menu .btn_cate{width:200px;height:38px;border:1px solid #3db39e;border-radius:3px;font-weight:bold;font-size:12px;line-height:38px;color:#3db39e;padding:0 1px 0 5px} /* width:160px -> width:200px PC 카테고리 버튼 가로폭 수정 */
.btn_close{display:none}
.area_menu .ico_cate{width:10px;height:6px;margin:-2px 0 0 53px;background-position:0 -50px;vertical-align:middle}
.area_menu .list_cate{display:none;position:absolute;top:37px;left:0;width:198px;padding:18px 0 10px;border:1px solid #3db39e;border-radius:0 0 3px 3px;background-color:#fff;overflow:auto} /* width:158px -> width:198px 카테고리 목록 가로폭 수정 (중요! 버튼width(200px)에서 -2(198px)로 해야함) / overflow:auto 추가(카테고리 세로 스크롤을 위해서)*/
.area_menu .on .list_cate{display:block}
.area_menu .on .ico_cate { background-position: 0 -658px; }
.area_menu .link_cate{display:block;padding-left:17px;margin-bottom:12px;font-size:12px;color:#333}

.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 } 카테고리 글갯수와 new버튼 활성화하려면 주석처리 해야함 */
.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 }

주석처리로 설명을 써놓았지만, 수정하는걸 권해드리지 않아요. 200px 이상으로하면 해상도가 낮은 모바일에서 레이아웃이 깨질수도 있고, 제가 200px 이 아닌 다른 폭으로는 테스트해보지 않아서 문제가 발생할지도 모릅니다.


그런다음에 317라인부터 342라인을 지우고 아래 코드를 복사해서 붙여넣으세요.

이 부분은 모바일 카테고리 메뉴바에 대한 설정입니다. 역시 상세설명은 주석처리해드렸지만, 수정은 안하시는게 좋을듯 싶어요.

200px이 레이아웃이 깨지지 않고 늘릴수 있는 최대 폭이라고 생각하시면 됩니다.

	.area_menu{display:none;right:0;top:0;bottom:0;overflow-y:auto;overflow-x:hidden;width:250px;background-color:#fff} /* width:200px -> width:250px 으로 수정, 모바일에서 카테고리 메뉴영역 폭. PC 카테고리 버튼 가로폭보다 + 50 해야함 */
	.area_menu .area_search{display:none;width:218px;height:30px;margin:15px 0 0 15px;border:1px solid #dcdcdc;border-radius:31px} /* width:168px -> width:218px 으로 수정. PC 카테고리 버튼 가로폭보다 + 18해야함  */
	.area_menu .frm_search{width:218px;height:30px} /* width:168px -> width:218px 으로 수정. PC 카테고리 버튼 가로폭보다 + 18해야함  */
	.area_menu .lab_search{margin:8px 0 0 16px;background-position:-70px -110px}
	.area_menu .tf_search{width:165px;margin:7px 0 3px 8px;outline:none} /* width:115px -> width:165px 으로 수정, PC 카테고리 버튼 가로폭보다 -35해야함 */

	.dimmed_layer{background-color:#000;opacity:0.7}
	.area_menu .btn_search{display:none}
	.area_menu .area_navi{display:block;position:static;margin:0}
	.area_head .btn_menu{display:block;overflow:hidden;position:absolute;right:15px;top:0;width:40px;height:35px;margin-top:13px;border:0 none}
	.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:250px;padding:13px 0 15px;border:0 none;border-radius:0;max-height:inherit} /* width:200px -> width:250px 으로 수정, 모바일에서 카테고리 메뉴영역 폭. PC 카테고리 버튼 가로폭보다 + 50 해야함 */

	.area_navi .list_cate ul li { line-height:18px }
	.area_navi .list_cate ul li a { margin-bottom:0;padding:7px 0 15px 30px;font-size:15px;line-height:22px; font-family: applesdgothicneo-semibold; font-weight:bold}
	.area_navi .list_cate ul li ul li a { padding:4px 0 15px 30px }
	.area_navi .list_cate ul li ul li ul { padding-bottom:3px; margin-top:-3px }
	.area_navi .list_cate ul li ul li ul li { padding-left:0; list-style:none; margin-bottom: 1px}
	.area_navi .list_cate ul li ul li ul li a { margin-bottom:0;padding:4px 0 11px 37px;font-size:15px; font-family: applesdgothicneo-ultralight; font-weight:normal; }
	.area_navi .list_cate ul li ul li ul li a::before { content:'· ' }
	.area_navi .list_cate .menu_profile { display:block;margin-top:14px;padding-top:20px;border-top:1px solid #e5e5e5 }

	.btn_close{position:fixed;right:260px;top:0;width:100%;height:100%;z-index:31;vertical-align:top;text-align:right} /*	모두 수정함 - 모바일 메뉴 닫기 버튼을 검은 바탕 영역 어디를 클릭해도 닫히도록 하기 위해서 */
	.on .btn_close{display:block}
	.ico_close{position:fixed;right:260px;top:11px;display:inline-block;width:18px;height:18px;background-position:-50px -110px;vertical-align:top} /*	모두 수정함 - 모바일 메뉴 닫기 버튼을 검은 바탕 영역 어디를 클릭해도 닫히도록 하기 위해서 */

위 코드대로 수정하시면 모바일에서 카테고리 메뉴를 열었을때 아래처럼 검은색 바탕을 클릭하면 닫히도록 했습니다. 원래는 X를 꼭 눌러야만 닫혔어요.


이제 끝났어요. 카테고리 메뉴바가 PC와 모바일 화면 모두 200px로 늘어나고, 카테고리 명이 길어도 글자가 겹치지 않습니다.


만약에 별도로 카테고리 이름과 이름사이 간격(높이)를 조정하고 싶으시면 아래 이미지 설명을 보고 수정하시면 됩니다.

제가 봐도 복잡해 보이네요 ㅠㅠ 그래도 힘들게 그린것이니 참고하세요. ㅠㅠ

카테고리 글씨 크기를 변경하려면 75번째 라인의 font-size (1차 카테고리 이름 폰트 크기) 와 82번째 라인 font-size(2차 카테고리 이름 폰트 크기)를 변경하시면 됩니다.


왼쪽 카테고리 메뉴는 티스토리 웹스킨 #1의 디폴트 CSS일때이며, 오른쪽이 수정된 화면입니다.


폰트크기나 여백은 수정하지 않으시면 위처럼 보이며, 수정을 원하시면 위 이미지를 참고하여 수정하시면 됩니다.


그럼, 티스토리 블로그 예쁘게들 꾸미시고 좋은 하루 되세요 ^^


도움이 되셨다면 공감 한번 살짝 눌러주세요 ^^ 감사합니다~~

댓글