티스토리 북클럽 스킨 기준으로 처음 블로그를 개설하면, 포스팅 제목이 표시되어 있는 포스트 커버가 회색 바탕에 제목은 흰색 글자로 설정되어 있습니다. 회색바탕에 흰색 글자이다 보니 포스팅 제목이 눈에 띄지 않는 느낌입니다. 포스트커버는 블로그에 포스팅을 하면 본문 제목(h1)이 표시되는 부분입니다. 상당히 중요한 위치라고 볼 수 있습니다.
포스팅 상단제목 포스트커버
CSS 스킨편집을 통해 포스트커버의 높이(폭)을 조절하고, 바탕색을 조금 더 어둡게 수정을 해보았습니다. 물론, 제목의 크기, 두께도 편집이 가능합니다.
아래 그림들은 변경 전의 기본설정 포스트커버 화면과 변경 후의 포스트커버 화면입니다. 눈에 띄지 않던 포스팅 제목이 포스트커버의 높이와 바탕색만 조절해도 확연히 눈에 들어오고 깔끔해진 효과가 있는 것 같습니다.(물론, 개인적인 느낌입니다)
<변경전>
<변경후>
포스트커버 CSS 편집하기
스킨편집 → html 편집 → css로 들어간 후, 'post-cover'가 있는 부분을 찾아내려 갑니다. 1046번대에 있어서 스크롤로 내리셔도 바로 찾으실 수 있습니다. Ctrl + F로 'post-cover'를 검색해서 찾으셔도 됩니다.
1. 포스트커버 화면 폭 줄이기
1046번 height 에서 340px → 280px로 변경했습니다. 숫자가 작을수록 포스트커버의 화면 폭이 줄어들고, 숫자가 높을수록 늘어납니다.
2. 포스트커버 바탕색 어둡게 하기
1060번 background-color 에서 rgba(0,0,0,0.25) → (0,0,0,0.70)으로 변경했습니다. 숫자가 높을 수록 어두워지고, 반대로 숫자가 낮을 수록 밝아지는 효과가 있습니다.
3. 포스팅 제목 두께 조정하기
1079번 font-weight 를 변경하면 포스팅 제목의 두께가 조정됩니다. 숫자가 높을수록 두꺼워집니다. 그리고 1080번 font-size는 포스팅 제목 글자크기입니다. 마찬가지로 숫자가 높을수록 글자 크기가 커집니다.
글자크기와 두께는 너무 크거나 두꺼우면 오히려 가시성이 떨어지는 것 같아서 저는 별도로 수정하지 않고 기본 설정값으로만 사용하기로 했습니다.
댓글