티스토리 반응형 스킨2 수정하기(1)

📑 목차

💜 1. 3칸을 2칸으로 바꾸기
💜 2. 사이드바 애니메이션 없애기
💜 3. 글자 색상 바꾸기
💜 4. 최종

기존에 쓰던 스킨도 좋았는데 반응형 스킨 2가 가장 많이 보이는 것 같아서 바꿨다.

이제 문제는 별로인 부분을 내가 직접 HTML과 CSS를 활용해서 수정해야 한다는 거였다.

그래서 인터넷 열심히 뒤져가며 수정을 좀 해봤다.

참고한 사이트는 여기

스킨을 수정하려면 블로그 관리 > 꾸미기 > 스킨 편집으로 이동하면 된다.

3칸을 2칸으로 바꾸기

가장 거슬리던 부분은 낭비적으로 사이드바가 넓다는 거였다.

3칸을 2칸으로 바꿀 수 있다길래 바로 해봤다.

HTML 파일 수정

가장 먼저 html에서 <div class="col_aside right_side"> 이 부분을 ctrl+F 키로 검색한다.

그리고 안에 있는 내용을 바로 위에 있는 <div class="col_aside left_side"> 안으로 이동시킨다. (위치는 본인이 원하는 위치로)

내용을 다 이동시켰다면 <div class="col_aside right_side"></div>를 삭제하거나 주석 처리하면 된다.

저는 주석처리 했어요

추가적으로 사이드바에서 필요 없었던 내용들도 주석 처리했다.

달력 같은 거는 진짜 필요 없어 보여서 일단 주석 처리했고 최근 댓글도 필요 없어 보여...

이때 주의할 거는 <s_sidebar_element></s_sidebar_element>에다가는 주석 처리를 못하게 되어있다.

그래서 그 하위 태그인 <div>에다가 주석 처리했다.

필요 없어 보이는 최근 댓글이랑 달력은 주석처리

CSS 파일 수정

html 파일 내용을 수정했다면 이번에는 CSS 파일을 수정할 차례다.

CSS 파일에서 ctr+F 키로 .navi_on .wrap_sub{width:960px} 를 검색한다. (일부분만 검색해도 됨)

그리고 {width:640px}로 수정하면 된다.

어떤 분은 .wrap_skin.navi_on {padding-left:960px}도 640px로 바꾸셨던데 이것도 바꾸니깐 이상해져서 그대로 뒀다. (HTML 파일이랑 CSS 파일을 좀 더 보면 알 수도 있을 것 같은데 그럴 시간 없으니깐 패스)

사이드바 애니메이션 없애기

애니메이션... 거슬리고 느려져서 정말 싫어함. 삭제 gogo

이거는 CSS 파일만 수정하면 된다. (애니메이션은 CSS)

CSS 파일에서 ctrl+F 키로 0.2를 검색하면 나오는 transition:padding-left ease-in-out 0.2s, transition:width ease-in-out 0.2s 이 두 부분을 주석 처리하거나 삭제하면 된다.

글자 색상 바꾸기

나는 하늘색 말고 보라색 계열이 좋으니깐 저놈의 하늘색을 없애야겠다.

CSS 파일에서 ctrl+F로 6bacce를 검색하고 다 내가 원하는 색상 코드로 바꾸면 된다.

사실 쉽게 바꾸는 방법이 분명히 있을 건데 그 단축키를 몰라서 좀 단순 노동을 했다.

(혹시 나중에 색상을 또 바꿀지도 모르니깐 내가 바꾼 색상은 d99cff 이거다)

최종

수정을 마친 티스토리의 전체적인 모습이다.

이제 좀 마음에 든다!