티스토리 뷰
블로그 디자인이 너무 난잡하단 생각이 들었다. 인터넷에서 반응 속도가 빠르다는 Panda Skin 을 사용하고 있었는데 속도가 빠른 것은 좋으나 레이아웃이 내 취향은 아니었다.
결국, Tistory 에서 기본적으로 제공하는 #1 스킨으로 돌아온 뒤, CSS 를 수정하여 사용하기로 하였다.
목차
소제목 1단계 (h2) 서식 바꾸기
먼저 소제목 h2의 서식을 바꾸기로 하였다. h2는 티스토리 포스팅 본문에서 가장 많이 쓰이는 소제목이므로 구분이 명확하면 좋겠다고 생각했다. 색이 꽉 차고 둥근 소제목이 가장 눈에 잘 들어오는 것 같아서 이렇게 편집하기로 했다. #1 스킨의 경우, .skin_view 클래스가 포스팅 영역이고, .area_title 이 제목 부분, .area_view 가 본문 부분이다.
즉, .skin_vew .area_view 의 h2 , h3 등을 편집해 주면 포스팅 영역의 소제목 서식이 바뀐다.
.skin_view .area_view h2 {
font-size:24px;
line-height: 2.0;
background-color: #0077BB;
padding: 0px 0px 0px 5px;
border-radius: 5px 10px 5px 10px;
color: #FFFFFF;
}
소제목 2단계 (h3) 서식 바꾸기
소제목 2단계(h3)는 1단계와 구분하기 위해 배경색을 집어넣지 않았다. 대신, 가로로 한줄을 꽉 차지하게는 하고 싶어 아래쪽 테두리를 2px 로 칠하기로 하였다.
.skin_view .area_view h3 {
font-size:20px;
box-sizing: border-box;
border-left: #0077BB 10px solid;
border-bottom: #0077BB 2px solid;
line-height: 2.0;
margin-right: 0px;
background-color: #ffffff;
padding: 0px 0px 0px 7px; }
리스트(ul, ol, li) 서식 바꾸기
나는 포스팅을 할 때 리스트(특히 순서가 없는 ul) 을 자주 사용하는 편이다.
- 리스트를 쓰면 항목별로 깔끔하게 정리하기 좋은데,
- #1 스킨의 경우 리스트위 위 아래 여백이 깔끔하지 못한 면이 있었다.
그래서 줄넘김과 여백 등을 아래와 같이 설정해주기로 하였다.
.skin_view .area_view ul,.skin_view .area_view ol {
margin: 0 auto 32px; padding: 10px 0 0 10px;}
.skin_view .area_view ul li,.skin_view .area_view ol li {
font-size:16px; line-height:1.6; margin:5px 0px 5px 10px;}
글자 폰트, 여백 등
글자 폰트, 폰트 크기, 줄간격, 여백 등은 사용해가며 좀 더 신중히 바꾸기로 하였다. 엄청 마음에 드는 것도 아닌데, 그렇다고 엄청 불편한 것도 아니기 때문이었다. PC에서 보기 싫어도 모바일에서는 또 썩 괜찮은 것도 이유가 컸다.
수정 사항들은 종종 포스팅하여 남겨둘 생각이다.