티스토리 블로그 강좌 #2. 북클럽 상단 타이틀 수정

이전 포스팅 #1. 티스토리 블로그 개설하기에 이은 두번째 티스토리 블로그 강좌 포스팅입니다.

티스토리 블로그 강좌 #1. 티스토리 블로그 개설하기

 

 

 

안녕하세요. 헤일리입니다. 티스토리 북클럽 스킨 선택 시 초기에 수정하시면 좋을 포인트들이 많은데, 오늘은 그중에서도 상단 타이틀과 관련한 수정 사항을 안내해드리고자 합니다. 몇 가지 간단한 HTML, CSS 수정을 통해 가독성 높은 스킨으로 변화시켜 보시면 좋을 것 같습니다.

 

<목차>
 1. 상단 타이틀 이미지 없애기
 2. 상단 타이틀 높이 변경하기
 3. 상단 타이틀 글씨크기 조절(+굵은 효과 주기)

 

1. 상단 타이틀 이미지 없애기

북클럽 스킨으로 포스팅 작성 시, 대표 이미지를 설정하시면 해당 이미지가 상단 타이틀 제목 배경으로 자동으로 적용됩니다. 이미지가 타이틀 배경으로 깔리게 되면 글씨가 잘 안 보이는 경우가 많아, 이미지 없이 깔끔하게 글씨만 보이도록 수정해보겠습니다.

 

설정 > 꾸미기 > 스킨 편집 > HTML 편집 > HTML > url() 을 none으로 수정

 

 

조금씩 다를 수 있으나, 저의 경우 405행에 해당 내용이 위치해있습니다. 찾기 어려우시다면 HTML창에서 Ctrl+F를 눌러 검색하여 찾을 수 있습니다. (계속 안내해드릴 내용에서도 위치는 스킨에 따라, 또는 개인 설정에 따라 약간씩 차이가 있을 수 있습니다.)

 

url() 을 none 으로 수정한 모습입니다. 내용 수정 후에는 반드시 우측 상단 [적용]을 눌러주셔야 적용이 완료됩니다.

기본 회색 음영으로만 상단 타이틀 배경이 처리되는 것을 확인하실 수 있습니다. 이미지가 들어가는 것보다는 깔끔해 보입니다. 

 

 

2. 상단 타이틀 높이 변경하기

상단 타이틀 바의 높이를 변경하는 방법입니다.

설정 > 꾸미기 > 스킨 편집 > CSS > 1046행의 height: 340px에서 원하는 px 숫자로 수정

저는 300px로 수정하였는데, 각자 본인 블로그에 알맞은 높이값으로 수정해주시면 됩니다. (최소 200px까지만 줄일 수 있습니다.)

 

 

height값 변경 전후입니다. 개인적으로는 높이가 너무 높지 않은 것이 안정적이고 깔끔해보인다고 생각합니다. 

 

 

3. 제목 글씨크기 조절(+굵은 효과 주기)

상단 타이틀의 글씨(폰트) 크기를 변경해보겠습니다. 또한 가시성을 높이기 위해 굵은 글씨 효과도 추가로 적용해보겠습니다.

설정 > 꾸미기 > 스킨 편집 > CSS > 1080행 font-size: 2.125em;에서 원하는 em;값으로 수정
굵은 효과는 1079행 font-wight: 300;에서 원하는 값으로 수정 

 

글씨는 기존 2.125 값에서 2.5로 키워봤는데요. 개인적으로 상단 타이틀의 글씨 크기는 너무 큰 것보다는 적당한 것이 나아 보여서 다시 기본값으로 돌려두었습니다. 개인마다 선호하시는 폰트 사이즈를 찾아보시면 좋을 것 같습니다. 굵은 글씨 효과는 적용을 하는 것이 더 보기 좋았습니다.