티스토리 북클럽 포스트 커버 수정 최종본

이전 글에서 상단 이미지 사이즈를 줄이고 배경을 어둡게 조정하는 방법에 대해 포스팅을 했었는데 아직 마음에 들지 않아서 최종적으로 아래와 같이 조정하였습니다. 이미지 부분을 모두 없애고 간격을 줄여서 최대한 가독성을 올리는 방향으로 진행하였습니다.

 

티스토리-상단포스트-최종-썸네일

 

아래 좌측이 수정전 모습이고 우측이 최종 수정된 모습입니다.

수정-전-후-비교

 

상단의 이미지가 있는 부분이 포스트 커버인데 적용하고자 하시는 분은 아래 순서 대로 따라서 수정하시면 됩니다. 

 

 

북클럽 스킨 포스트 커버 html 편집

1. 배경이미지 제거하기, 스킨편집 - html편집에서 418번대 "post-cover" 뒤부터 >기호 전까지 모두 삭제하시기 바랍니다.

수정-전-이미지
<html 수정 전 이미지>
수정-후-이미지
<html 수정 후 이미지>

북클럽 스킨 포스트 커버 CSS 편집

2. 본문 사이의 여백 제거와 상단 포스트 커버 위치 이동 하기입니다.

 440번대 body-page #container 아래 padding-top 339px를 0px로 수정합니다

 446번대 position: absolute 를 relative로 수정하시기 바랍니다.

 

본문-여백-제거

 

3. 제목 상단의 여백 제거하기로 1046번대 height 340px을 0px로 수정합니다.

 

제목-상단-여백-제거

 

4. 배경색 제거로 background-color 2 부분을 모두 삭제하시기 바랍니다. (1047, 1060 삭제)

배경색-제거-전배경색-제거-후

 

5. 글자색 변경으로 기존 제목이 흰색으로 되어 있어 검은색(#000000)으로 수정했습니다.

1072번 category color

1080번 h1 color

1091번 meta color

1094번 meta a color

1103번 before background-color

글자색-변경-수정-전글자색-변경-수정-후

 

6. 메뉴와 본문 사이에 구분선을 추가합니다

1089번대 margin: 34px를 24px로 수정하고, 그 아래로 2줄을 추가해 주시기 바랍니다.

추가1- border-bottom: 1px solid #eeeeee;

추가2- padding: 0 0 20px 0;

구분선-추가-전구분선-추가-후

 

이상으로 포스트 커버 수정 관련 방법에 대해 알려 드렸습니다. 이 글이 도움이 되길 바라며, 마치도록 하겠습니다.

 

[함께 보면 도움이 되는 글]

 

티스토리 북클럽 상단 이미지 수정

 

그리드형