티스토리 북클럽 스킨에서 글 제목 디자인 바꾸기

얼마 전부터 티스토리에 글을 쓰기 시작했는데, 포스팅 된 글의 제목이 잘 안 보이는 것이 너무 불편하게 느껴졌다. 이를 개선하기 위해서 1. 제목 폰트 바꾸고 크기 키우기 2. 제목이 보이는 배경색을 더 어둡게 하기 두 가지 사항을 직접 HTML/CSS변경으로 해 보았다. 이번 글에서는 변경하는 방법과 코드를 소개하고자 한다.

 

변경된 결과 예시 - 뒷 배경 이미지(대표이미지)가 하얀색인데도 제목이 잘 보인다

 

 

글 제목 폰트 변경, 크기 키우기

 

먼저 블로그 관리 페이지에서 꾸미지>스킨 편집>HTML편집>CSS을 통해 CSS파일을 연다.

 

그리고 사용하고 싶은 폰트를 추가하기 위한 코드를 넣어준다. 여기서는 무료 폰트로 인기있는 G Market Sans폰트로 코드를 작성하였다.

 

CSS파일의 여기 부분에

아래의 코드를 넣어서 폰트를 사용할 준비를 한다.

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

 

 

그리고 CSS파일의 여기 부분에서

아래의 코드처럼 font-family를 설정하면 글의제목 폰트가 변경되고, 크기가 2.5em으로 더 크게 바뀐다

.post-cover h1 {
  font-family: 'GmarketSansMedium';
  max-width: 1080px;
  margin: 0 auto;
  font-weight: 300;
  font-size: 2.5em;
  line-height: 1.2352;
  color: #fff;
}

 

 

글 제목 배경색 더 어둡게 만들기

 

CSS파일 중 아래와 같은 코드가 있는데,

 

.post-cover:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.500);
}

 

여기서 background-color: 부분이 글 제목 뒷배경을 얼마나 어둡게 하냐 설정이 적힌 부분이다. 괄호 안의 숫자를 그림처럼 0.500으로 변경하면 제목이 훨씬 잘 보이게 된다. 직접 원하는 다른 값이 있다면 숫자를 바꾸거나, rgba라고 적힌 부분을 클릭하면 색상을 눈으로 확인하면서 고를 수도 있다.