티스토리 오디세이 스킨 수정 (사이드바 왼쪽으로, 여백 수정 등)

티스토리 오디세이 스킨을 조금 수정해 봤다. 사이드바를 왼쪽으로 옮겨봤고, 옮기면서 좌우여백도 좀 줄여봤다. 제목 헤더 높이도 조금 짧게 줄여보았고, PC에서 제목이 두줄로 나오는 게 싫어서 한 줄로 나올 수 있도록 해봤다. 너무 어렵다. 수정한 내용을 혹시 나중에 원상 복구할 수도 있으니 내가 까먹지 않으려고 적어보는 글이다. 모든 것은 블로그 관리 - 스킨 편집 - html 편집 - CSS에서 수정하였다.

 

728x90

---

1. 사이드바 왼쪽으로 옮기기

사실 사이드바가 원래 오른쪽에 있는 게 그다지 불편하지는 않았는데, 블로그들을 보다 보면 다들 왼쪽에 있는 것 같아서 나도 한번 수정해 보았다. 사람들에게 익숙한 네이버 블로그가 보통 왼쪽이기도 해서 한번 바꿔보았다. wrap-right.main 아래에 flex-direction: row-reverse;라는 줄을 추가해 주었고(280열), 내가 기억하려고 아래에 날짜와 주석도 달아주었다. 그리고 사이드바를 옮기면서 여백을 수정하려고 margin을 기존 32px 0 0 80px에서 32px 50px 0 0으로 수정해 주었다.

 

 

2. 본문 여백/너비 수정하기

사이드바를 왼쪽으로 옮기고 보니 이상하게 여백이 더 많아 보였다. 눈에 안 익어서 그런 것인지... 그래서 아래와 같이 수정했다. 아래 사진 기준 1419번째 줄에 있는 max width 값을 기존 640px에서 800px로 수정하여 본문 너비를 넓혀주었고, 1411번째 줄에 있는 max-width를 기존 1020px에서 1180px으로 수정했다. 이것도 수정한 내용을 까먹지 않도록 수정한 날짜와 기존 값이 얼마였는지 달아주었다.

 

 

 

3. 게시글 제목 높이 줄이기

헤더? 제목? 뭐라고 말해야 하는지 모르겠지만, 아무튼 글 위에 썸네일과 제목이 보이는 영역의 높이를 좀 줄이고 싶었다. 사진에서 노란색 화살표 높이이다. article-header 쪽으로 내려가서 height를 400px에서 300px으로 수정해 주었다.

 

 

 

 

4. 게시글과 제목 사이 여백 줄이기

위의 헤더 높이를 줄였더니 이번에는 글과 헤더 사이의 여백이 넓어져서 이상했다. 하나를 만지면 하나를 또 만져줘야 하는 복잡한 티스토리의 세상이다. 그래서 해당 부분 여백도 줄여주었다. tt-body-page .main이라는 열을 찾아서 padding-top 값을 470px에서 370px으로 줄여주었다.

 

 

 

5. 제목 두줄에서 한 줄로 수정

제목이 PC에서 두줄로 보이는 게 좀 싫어서 한 줄로 해보았다. 이건 article header box 영역의 max width를 780px에서 1020px으로 수정했고, title-article의 max width를 760px에서 1000px으로 수정해 보았다.

 

 

솔직히 나는 자세한 내용은 잘 몰라서 인터넷 찾아가면서 이것저것 수정해 보고, 적용해서 결과물 보는 식으로 수정했다. 정말 어려운 것 같다. 사이드바 고정도 해보고 싶은데, 인터넷에 돌아다니는 코드를 적용하면 자꾸 글 아래쪽 여백이 이상하게 바뀌어서 일단은 포기했다. 다음에 다시 봐야지...