티스토리 반응형 스킨 '#2' 사이드바 수정하기

안녕하십니까 홍대주민입니다. 

오늘 제가 여러분께 가져온 정보는 사용하고 있는 티스토리 블로그의 스킨인 #2를 수정하는 팁을 공유하고자 합니다.

위 스킨은 반응형으로 짜여진 레이아웃입니다. 반응형이란 사용하는 device에 따라서 보여지는 페이지 구성이 자유자재로 변화한다는 의미입니다. 즉 24인치 컴퓨터로 보나 10인티 태블릿으로 보나, 각각 알맞게 레이아웃이 트랜스포머의 범블비처럼 자유자재로 바뀌면서 방문자가 편하게 웹페이지를 볼 수 있도록 해주는 웹을 반응형 웹이라고 부릅니다. 물론 모바일로 웹페이지에 접속했다고 한들 너무나 이쁘게 잘 보여줍니다.

티스토리에서 제공하는 이 스킨은 디자인적으로도 반응형웹 자체로도 너무 이쁘고 잘 만들어졌지만, 딱 하나 맘에 들지 않는 것이 있었습니다. 

화면 상단에 三 을 클릭하면, 아래 이미지처럼 화면 여백의 반을 차지해서 맘에 들지 않았습니다. 

제 모니터가 24인치인데도 이렇게 부담스러운데, 20인치 혹은 13인치의 노트북에서 보면 검은 색  이불 그 자체일것으로 판단해서 수정해보았습니다.

만약 여러분이 이 글을 보시는 이유가 저와 같은 불편함때문이라면, 제가 소개하는 그대로 따라해 왼쪽 여백을 줄여보도록 하겠습니다. 

왼쪽 사이드바 두줄을 한줄로 확 줄이는 방법

먼저 관리자 로그인을 해주시기 바랍니다. 

그 다음 관리자 화면으로 들어가면 아래 이미지와 같이 'HTML/CSS 편집'이라고 있습니다. 이것을 클릭해주세요.

(HTML 울렁증이 있는 분들도, CSS가 무엇인지 모르는 분들도 겁먹지 말아주십시오. 그냥 쉽게 복사-> 붙혀넣기 하시면 끝납니다.) 

클릭하시면 화면 우측에 아래 이미지 처럼 HTML | CSS | 파일 업로드 라고 뜨실겁니다. 거기서 CSS를 클릭해주십시오. 

그 다음 특정 단어를 찾아야 하는데, 컨트롤(ctrl) + F 를 누르시고, ".wrap_skin.navi_on" 이라고 검색해주십시오.

그곳에는 

.wrap_skin.navi_on    {padding-left:960px;} 라고 되어있습니다. 이것을 .wrap_skin.navi_on    {padding-left:0px;} 으로 변경합니다.

이제 50% 다 하셨습니다.  하나만 더 수정하면 끝입니다.

이번에는 또 컨트롤(ctrl) + F 를 누르시고, ".navi_on .wrap_sub"를 찾습니다. 

.navi_on .wrap_sub    {width:960px;} 이게 화면의 반을 가리던 그 놈(너비)입니다. 이것을 획기적으로 310px로 줄입니다.

.navi_on .wrap_sub    {width:960px;} 이라고 되어있습니다. 이것을 .navi_on .wrap_sub    {width:310px;} 으로 변경합니다.

(캡쳐 당시에는 제가 360px로 했으나, 옆 선이 삐져 나오는 것을 확인하고 310px로 변경했습니다. )

이렇게 변경하고 확인버튼을 눌러주시면 적용이 됩니다. 

찾아와주신 모든 분들께 좋은일이 가득하길 바라며, 당신에게 조금이나마 도움이 됐다면 저에게도 기쁜일이겠습니다. 

만약 하시다가 어려운 점 있다면 댓글이나 방명록 남겨주시기 바랍니다 ^^ 

여러분 블로그를 네이버 등록하지 않으셨다구요? 그럼 아래 글도 보고 가시죠 :)

2017/05/02 - [자주먹는 IT지식] - 알면 약이 되는 네이버 검색 등록