티스토리 북클럽 스킨 상단 이미지 영역 제거

티스토리 블로그 북클럽 스킨의 가독성을 높이기 위해서 다음과 같은 작업을 한다.

① 배경 이미지 제거
② 북클럽 스킨 상단 포스트-커버(post-cover) 영역을 본문 영역 안으로 이동.
③ 상단 여백 제거
④ 관련 컬러 수정
⑤ 구분선 추가

북클럽 상단 이미지 영역 제거

1) 백그라운드 이미지 제거

경로 : 블로그관리홈 > 꾸미기 > 스킨 편집 > html 편집 > html

라인 넘버는 다를 수 있다.

① (검색) Ctrl + F : s_permalink_article_rep 검색

(440) <s_permalink_article_rep>
(441) <div class="post-cover"<s_article_rep_thumbnail> style="background-image:url(https://blog.kakaocdn.net/dn/dbLrnm/btsAktGRpAs/rzDJaCdu7zuH41O2hS0qB0/img.jpg)"</s_article_rep_thumbnail>>

② style="background-image: url ▶ background-image: none 으로 수정한다.

2) post-cover 영역을 본문 영역 안으로 이동

① (검색) Ctrl + F : #tt-body-page .post-cover 검색

(448) #tt-body-page .post-cover {
(449) position: absolute;
(450) top: -1px;
(451) left: 0;
(452) width: 100%;
(453) }

② position: absolute; ▶ relative; 수정한다.

3) 상단 여백 제거

① (검색) Ctrl + F : #tt-body-page #container 검색

(442) #tt-body-page #container {
(443) padding-top: 339px;
(444) }

② padding-top: 339px; ▶ 0px 수정한다.

4) 배경색 변경 - 1

기존 배경색 (#cbcbcb)을 수정한다.

경로 : 블로그관리홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS

① (검색) Ctrl + F : poster-cover 검색

(1044) .post-cover {
(1045) position: relative;
(1046) z-index: 20;
(1047) display: table;
(1048) width: 100%;
(1049) height: 340px;
(1050) background-color: #cbcbcb;
(1051) background-position: 50% 50%;
(1052) background-size: cover; box-sizing: border-box;
(1053) }

② 원하는 컬러로 수정한다.

③ background-color: #cbcbcb; ▶#ffffff;

5) 배경색 변경 - 2

① post-cover:before 역시 동일하게 수정한다.

(1055) .post-cover:before {
(1056) content: "";
(1057) position: absolute;
(1058) top: 0;
(1059) left: 0;
(1060) z-index: 0;
(1061) width: 100%;
(1062) height: 100%;
(1063) background-color: rgba(0,0,0,0.25);
(1062) }

② 원하는 컬러로 수정한다.

③ rgba(0,0,0,0,25) ▶#ffffff

6) 배경색 변경 - 3

타이틀 등 post-cover 영역의 글자가 보이지 않는다.

① 다음 6군데 컬러를 수정한다.

.post-cover .category
.post-cover h1
.post-cover a
.post-cover .meta
.post-cover .meta a
.post-cover .meta a:before, post-cover .meta span:before

② color #ffffff; ▶#555555;

7) 배경색 변경 - 4

더보기 버튼 컬러를 수정한다.

① (검색) Ctrl + F : my_edit 검색

(3148) .my_edit .ico_more {
(3149) fill: #fff !important;
(3150) }

② 원하는 컬러로 수정한다.

③ fill: #fff ▶ #555555

8) 구분선 추가

post-cover 영역과 본문 사이에 구분선을 추가한다.

① (검색) Ctrl + F : .post-cover .meta 검색

(1091) .post-cover .meta {
(1092) display: block;
(1093) max-width: 1080px;
(1094) margin: 34px auto 0;
(1095) font-size: 0.875em;
(1096) color: #555555;
(1097) }

② 다음 태그를 추가한다.
border-bottom: 1px solid #eeeeee;
padding: 0 0 20px 0;

추가 수정

1) 추가 상단 영역 제거

① (검색) Ctrl + F : .post_cover 검색

(1044).post-cover {
(1045) position: relative;
(1046) z-index: 20;
(1047) display: table;
(1048) width: 100%;
(1049) height: 340px;
(1050) background-color: #ffffff;
(1051) background-position: 50% 50%;
(1052) background-size: cover;
(1053) box-sizing: border-box;
(1054) }

② height: 340px; ▶ 0px;

2) 추가 하단 영역 제거

① (검색) Ctrl + F : .post-cover .inner 검색

(1065) .post-cover .inner { display: table-cell;
(1066) position: relative;
(1067) z-index: 10;
(1068) vertical-align: bottom;
(1069) padding-bottom: 78px;
(1070) }

② .padding-bottom: 78px ▶ 0px;

티스토리 본문 폰트 크기 & 줄 간격 수정