티스토리 북클럽 스킨 수정__html css 간단 수정 글씨 크기 등

티스토리 블로그에서 북클럽 스킨이 인기가 많은데 저는 써보니까 글씨 크기 등 몇 가지 고치고 싶은 부분이 있어서 아주 간단에게 수치만 조정해서 쓰고 있습니다. 타이틀 영역 높이, 제목 위치 조정, h1 태그 등에서 글씨 크기 조정 등 간단한 부분만 알아보겠습니다.

 

 

 

북클럽 스킨에서 폰트 크기 등 편집 조정

아래 작업을 하기 위해서 블로그 메인에서 '관리'로 들어갑니다.

왼쪽 메뉴 목록에서 '꾸미기 > 스킨 편집'을 누릅니다. 새 창이 뜹니다.

화면 오른쪽 창에서 'html 편집'을 누르고, 

오른쪽 창의 탭에서 'CSS'를 누릅니다.

문자열을 겁색하려면 Ctrl+F 키를 누르고 검색창에 키워드를 입력하면 됩니다.

 

 

h1 태그 등 제목과 중제목 글씨 크기 조정

CSS 검색창에 Entry Content 입력합니다.

1406행쯤부터 h1 태그가 나타납니다.

글씨 크기만 조절할 것이므로 font-size 만 유심히 보면 됩니다. em은 크기 단위입니다.
h1부터 h4까지 있는데, h1은 블로그 글쓰기 화면에서 블로그 제목에 해당합니다.

'제목을 입력하세요'라고 되어 있는 부분에 입력하는 것이 블로그 제목인데 여기에 해당하는 것이 h1 태그입니다.

그 아래 본문에 글 쓰는 영역에서 글을 작성하고, 화면 맨 위에 드롭다운 메뉴를 눌러보면 다음과 같이 나옵니다.

제목1, 제목2, 제목3, 본문1, 본문2, 본문3

• 제목1은 h2
• 제목2는 h3
• 제목3은 h4 태그에 해당합니다.

본문에 내용을 입력하면 기본적으로 본문2 크기로 입력이 됩니다. 본문1은 본문2보다 좀 크고 본문3은 본문2보다 작은 크기입니다.

 

 

본문 글씨 크기 조정

1439행 부근 .entry-content p { 에서 font-size의 em 을 조정하면 본문 글자 크기를 바꿀 수 있습니다. 기본값은 1.08em인데, 조금 작아 보여서 저는 1.1em으로 바꿨습니다.

 

 

리스트 글씨 크기 조정

본문 글을 작성할 때 항목을 구분하기 위해  '리스트' 양식을 사용하는데, 위쪽 메뉴 오른쪽에 있습니다.
'리스트'를 누르면 4가지 메뉴가 나오는데
맨 위부터 첫째, 둘째 항목은 까만점과 원으로 된 기호가 항목 앞에 달리고, 셋째 것은 항목을 숫자로 매겨주는 것이고, 넷째는 일반 본문 스타일입니다. 리스트 속성은 본문 글자 크기와 달라서 눈에 잘 띄거나 거슬리기도 하는데, 원하는 대로 글자 크기와 맞추려면 CSS에서 다음을 조정하면 됩니다.

 

첫째, 둘째 리스트 모양의 글씨 크기

1469행 근처 .entry-content ul li { 에서 font-size의 em을 조정.

 

셋째 리스트 모양(숫자)의 글씨 크기

1481행 근처 .entry-content ol li { 에서 font-size의 em을 조정

본문에 글을 작성하고 항목을 만든 다음 리스트 양식을 적용하면 바로 바뀌는 것이 아니라 글을 발행하거나 미리보기를 해야 정확한 모양을 확인할 수 있습니다.

 

 

포스트 타이틀 제목 영역 높이 조정

 

CSS에서 Ctrl+F 누르고 검색창에 post-cover 입력

1041 행 부근 post-cover 옵션에서 height: 340px 에서 적당한 값으로 조정 (220px 정도로 조정함)

post-cover {
position: relative;
z-index: 20;
display: table;
width: 100%;
height: 220px;
background-color: #cbcbcb;
background-position: 50% 50%;
background-size: cover;
box-sizing: border-box;

 

 

값을 수정하고 CSS 켜놓은 창 오른쪽 위 '적용' 버튼을 누릅니다. 색깔이 검은색에서 흰색으로 바뀌면 수정 내용이 반영된 것입니다. 이제 포스트에서 잘 반영되는지 확인해봐야겠죠?
아무 글이나 새창에 띄워놓고 새로고침을 해봅니다.
포스트 타이틀(제목 H1) 부분의 배경 띠 영역 높이(두께)가 줄어든 것을 확인할 수 있습니다.
그런데 제목이 안 예쁘게 달라붙어 있네요. 포스트 타이틀 위치도 줄어든 비율에 맞게 조정해야겠습니다.

 

 

타이틀(제목) 수직 위치 조정

 

CSS에서 padding-bottom 검색하고 1067번 근처 padding-bottom 78px 값을 줄여줍니다. 대략 40px 정도로 조정함

post-cover .inner {
display: table-cell;
position: relative;
z-index: 10;
vertical-align: bottom;
padding-bottom: 78px;