[2023] 티스토리 반응형 스킨 #2 사이드바 두 칸으로~!

앞서 선택한 스킨을 커스텀 해보려 합니다.

 

일단 사이드바

 

일명 햄버거 버튼이라고 불리는 줄세개로 이루어진 버튼을 눌러보면

왼쪽 화면에서 메뉴가 나옵니다.

여기서 거슬리는 것!

화면을 반이나 가려버리니까

불편합니다.

 

그래서 저는 세칸에서 두칸으로 줄일 껍니다.

1. 스킨편집 이동합니다!

왼쪽 하단 톱니바퀴 Click!

 

관리자 페이지로 이동되면서

왼쪽 옆에 있는 메뉴 중에서 꾸미기 - 스킨편집을 눌러주시면

변경되는 화면을 바로바로 확인할 수 있는 미리보기 화면과

html과 css수정 그리고 js를 적용하거나 썸네일, 이미지들을

수정할 수 있는 화면이 나옵니다.

여기서 필요한 부분을 찾아서 수정 삭제 하면 됩니다!!!

 

 

2. 이동한 곳에서 HTML를 수정합니다!

스킨편집 -  html 버튼을 누르면 쏼라쏼라 영어가 많이 있어요

두려워하지마요 ㅋㅋㅋ
특정한 위치만 찾아서 수정할꺼니까요
맨 왼쪽에 써잇는 숫자 보이죠?

그게 줄번호입니다.

또는 ctrl + F 를 눌러보시면 찾는 검색 창이 나옵니다. 그곳에서 찾아서 이동하셔도 됩니다.

1. 79번째 줄로 이동
2. ctrl + F 찾기로 검색  [ wrap_etc ]
3. 공지사항을 찾으셔도 됩니다.

  <div class="col_aside left_side"> 이것을   <div class="col_aside right_side"> 이거로 바꿔줍니다.

left를 right로 바꿔주세요
왼쪽에서 오른쪽으로 옮긴다고 생각하시면됩니다.

사이드바를 확장하였을때 색깔이 들어간 제목으로 구성된 카테고리 목록은 공지사항부터 시작됩니다.
원래는 왼쪽과 오른쪽으로 2칸을 차지하고 있는 것이죠.
그래서 왼쪽과 오른쪽을 구분하지않고 왼쪽으로 합치는 작업을 하는 중입니다.

이어서 오른쪽부분을 삭제할꺼에요

1. 130번째 줄로 이동
2. ctrl + F 찾기로 검색  [ 달력 ]

이동하고 나서 아래에 보여드리는 사진 왼쪽에서 오른쪽으로 파란색 부분을 삭제해주세요

3. HTML에서 CSS로 이동해서 수정합니다!

맨위에 상단에 HTML 빨간글씨 옆에 CSS를 눌러서 이동합니다.
숫자만 바꿔줄껍니다.
가로 길이를 줄여주는 작업입니다.

 40번째 줄에 있는 CSS를 수정합니다.

.wrap_skin.navi_on {padding-left:960px} 여기에 써있는 960을 640으로 바꿔줍니다.

주의!!

뒤에 px를 꼭 붙여주세요

단위입니다.

1cm, 1m, 1km  등등 단위가 다르면 길이도 달라집니다. 적용도 안되거든요

숫자만 꼭 바꿔주세요

바꾸는 도중에 px지워지지 않았는지 확인도 한번 해주시구요!

 

그다음은 83번째 줄에 있는 CSS를 수정합니다.

.navi_on .wrap_sub{width:960px} 여기에 써있는 960을 640으로 바꿔줍니다.

4. 바뀐 사이드바를 감상해줍니다. 간단하죠?