※ 티스토리 스킨이 동일한 사림에 의해 만들어진 것이 아니기 때문에, 각 스킨마다 약간의 차이가 있을 수 있습니다.
글쓴이의 티스토리 스킨을 기준으로 작성한 포스팅이므로, 따라하시다 안되시면, 다른 포스트를 참조하시기 바랍니다.
블로그 스킨을 변경하다 보면 사이드 바의 형태를 원하는데로 조정하고 싶은 때가 있습니다.
저도 스킨을 한 번 통째로 갈아엎으면서 제법 고생했었는데요.
오늘은 사이드바를 원하는데로 변경하는 것을 한 번 배워보도록 하겠습니다.
우선 티스토리 관리 메뉴에서 HTML/CSS 편집 화면으로 들어갑니다.
|
|
단, 당 포스트를 따라하시기 전, 현재 스킨을 반드시 저장해 놓으신 후 수행하십시오. |
|
Ctrl 키와 F 키를 함께 누르면, 왼쪽(인터넷 익스플로러) 또는 오른쪽(크롬) 상단에 텍스트 창을 열어줍니다.
여기에 /* 블로그 레이아웃 */ 를 입력하여 조회한 후, 조금만 아래로 내려가 보면...
아래와 같이 되어있는 녀석이 있습니다.
※ 없는 경우, #siderbar 로 찾으셔도 되지만, 좀 많습니다.
|
|
#sidebar {
float:right;
width:200px;
overflow:hidden;
background:#fff;
} |
|
float:right; ☞ 사이드 바의 위치 입니다. 본문의 왼쪽이냐 오른쪽이냐를 결정합니다.
단, 이걸 바꾸실 경우에는 바로 위에 있는 #content {
float:left; 도 바꾸어 주셔야 합니다.
width:200px; ☞ 사이드 바의 크기입니다. 바꾸셔도 되나, 잘못하면 화면이 깨질 위험도 있습니다.
overflow:hidden; ☞ 내부처리 로직입니다. 신경 안쓰셔도 됩니다.
background:#fff; ☞ 사이드바 전체의 배경색입니다.
있는 경우엔 수정하시면 되고, 없는 경우에는 추가하시면 됩니다.
border:1px solid gray; ☞ 사이드바 전체의 테두리를 설정하는 부분입니다.
아마도 없는 스킨이 많을 겁니다. 걍 추가해서 쓰세요. |
|
이렇게 사이드바 박스에 대한 설정 부분을 살펴 봤습니다.
그럼 사이드바 안에 있는 모듈들의 디자인을 바꾸는 방법을 알아볼까요.
Ctrl + F 찾기 창에 #sidebar h3 을 넣고 조회합니다.
|
|
#sidebar h3 {color:#5D5D5D; font:bold 12px dotum; }
#sidebar h3.stitle {height:20px; border-bottom:1px solid #DCDCDC; background-repeat:no-repeat; background-position:10px 7px; text-indent:-5000px; overflow:hidden; } |
|
이런 부분이 찾아집니다.
#sidebar h3 {color:#5D5D5D; font:bold 12px dotum; }
사이드바 각 모듈의 제목의 글자색, 굵기, 크기를 설정하는 부분입니다.
단, 이 부분 밑에서 모듈의 제목을 이미지로 지정한 경우에는 설정을 변경해도 적용되지 않습니다.
background-color:#354C39; 요거를 추가하실 경우 바탕색을 변경하실 수 있습니다.
#sidebar h3.stitle {height:20px; border-bottom:1px solid #DCDCDC; background-repeat:no-repeat; background-position:10px 7px; text-indent:-5000px; overflow:hidden; }
사이드바 각 모듈의 제목 부분의 높이, 테두리 두께 및 모양 등을 설정하는 부분입니다. |
|
다시 조금 내려가다 보면 이렇게 되어있는 부분이 나옵니다.
|
|
#sidebar ul li, #sidebar ul li a, #sidebar ul li a span {color:#5D5D5D; font:11px/16px dotum; }
모듈의 내용의 글색상을 변경하는 부분입니다.
background-color:#354C39; 요거를 추가하실 경우 바탕색을 변경하실 수 있습니다. |
|
어느정도 원하시는 대로 사이드바를 변경하셨나요?
저도 조금씩 시간나는대로 변경하고 있습니다.
기능을 찾아내는대로 포스팅 하도록 하겠습니다.