티스토리 스킨, 내 취향대로 편집하기(쉬움주의)
티스토리 스킨 직접 편집하기 도전해봄
1️⃣ 나의 취향
✔️ 대표 도메인으로 진입했을 때 본문부터 보이는 것은 원하지 않음
✔️ 본문 url로 진입 시 상단 타이틀 영역에 배경 이미지 꽉 차게 들어가는 건 싫음
✔️ GNB는 1 Depth 메뉴 위주, 중요도 높은 2 Depth 메뉴도 노출 가능해야 함
✔️ LNB 사이드 메뉴가 오른쪽에 위치하는 구성이 좋음(왼쪽에 있거나 숨겨져 있는 것 싫음)
2️⃣ 티스토리 스킨 선택
'Tistory > 블로그 관리 > 꾸미기 > 스킨 변경' 페이지에서
티스토리에서 기본으로 제공하는 스킨 목록 중
html/css 수정 포인트가 적을 것 같은 'Book Club' 스킨을 선택
✔️ 사이트 메인 화면 같은 구성 가능(상단 프로모션 영역도 활용할 수 있다고 함)
✔️ 기본 LNB 구성이 노출되어 있어서 미리보기 했을 때 마음에 들었음
✖️ 도서 콘텐츠 추천 스킨이라 그런지 블로그 타이틀이 명조체로 설정됨
✖️ 본문에 이미지 첨부 시, 본문 타이틀 영역에 배경 이미지가 강제로 삽입됨
3️⃣ 스킨 편집
'Tistory > 블로그 관리 > 꾸미기 > 스킨 편집' 페이지에서
우측 상단의 'html 편집' 버튼을 클릭하고 Confirm창에서 '확인' 클릭 시
'HTML | CSS | 파일업로드' 메뉴가 뜨고 스킨 편집 가능함
타이틀 폰트 수정하기
'#header h1' 부분을 찾아서 'font-family'를 변경(body와 동일하게 했음)
| font-family: 'AppleSDGothicNeo', Pretendard-Regular, sans-serif; |
타이틀 영역 배경 이미지 숨기기
'#container .content-wrap'과 '#container .content-wrap:before' 사이에
'#container .content-wrap .post-cover'를 아래와 같이 작성해주면 됨
|
#container .content-wrap .post-cover {
background-color: rgb(104, 103, 153);
background-image: none !important
}
|
타이틀 영역 높이 고정값 해제하기
'.post-cover' 부분을 찾아서 'height' 값을 'auto'로 변경
|
.post-cover {
position: relative;
z-index: 20;
display: table;
width: 100%;
height: auto;
background-color: #cbcbcb;
background-position: 50% 50%;
background-size: cover;
box-sizing: border-box;
}
|
타이틀 영역 정렬 및 여백 수정하기
'.post-cover .inner' 부분을 찾아서 아래와 같이 변경
|
.post-cover .inner {
display: table-cell;
position: relative;
z-index: 10;
vertical-align: middle;
padding:36px;
|
타이틀 영역과 본문 사이에 남는 이상한 여백 수정하기
' #tt-body-page #container' 부분을 찾아서 339px를 200px로 변경
|
#tt-body-page #container {
padding-top: 200px;
}
|
4️⃣ 결과
사실 수정한 게 별로 없음
매우 하찮은 도전이지만, 원하는 결과를 얻었으므로 흡족
색깔은 임의로 찍은 게 나쁘지 않아서 채택했지만 나중에 회색 계열로 바꿀지도 모름