티스토리 포스팅 제목 배경 색깔로 지정하기(제목 가독성 올리기)

티스토리 기본 세팅 상태에서 글을 작성하면 포스팅의 제목 배경으로 해당 포스팅 대표사진인 썸네일이 나오기 때문에 제목의 가독성이 떨어지게 되기도 합니다. 

 

포스팅 제목 배경 색상 지정

 

그래서 포스팅 제목의 배경을 변경하여 글 제목의 가독성을 향상하기 위한 3가지 방법(투명도 조절, 배경으로 특정이미지 사용, 특정 색깔로 지정하기)이 있는데, 오늘 포스팅에서는 하나의 색깔로 포스팅 제목의 배경을 지정하는 방법에 대해 자세히 설명해 보도록 하겠습니다.

 

 

포스팅 제목 배경 지정 색깔로 변경하기

지정하는 색상은 자신의 블로그 컨셉이랑 어울리면서 제목이 눈에 잘 띄는 색상으로 정하시면 됩니다.

 

색상 지정 방법은 우선 기본적으로 포스팅 제목의 배경으로 썸네일 지정한 것을 없애고, 제목 배경 색상을 원하는 색상으로 변경하는 것으로, 포스팅 제목의 배경을 없애는 것은 아래의 순서대로 진행해 보시면 됩니다. 

 

1. 블로그 관리 페이지 꾸미기 > 스킨편집 >Html 편집으로 들어갑니다.

블로그 관리 메뉴의 꾸미기 > 스킨편집 클릭	오른쪽 상단의 html 편집 클릭

 

2. HTML 탭으로 이동하여 배경으로 지정된 부분을 제거합니다.

HTML탭으로 이동 > Ctrl-F 키를 누르고 s_permalink_article_rep 찾기 > 아래 화살표 부분을 지워서 url()로 변경

 

괄호 안에 none을 적어서 "url()"을 url(none)으로 변경합니다.

 

3. CSS 탭으로 이동하여 배경의 색상을 변경합니다.

CSS 탭으로 이동하여 Ctrl-F 키를 눌러 ".post-cover:before"를 검색합니다

 

아래쪽에 있는 background-color: rgba(0, 0, 0, 0.25)를 변경하면 색상이 바뀝니다. 여기서 제일 끝에 있는 "0.25"는 배경의 투명도를 나타내는 것이고, 앞의 세 숫자(0, 0, 0)가 색상을 나타내는 것입니다. 

 

색 번호를 몰라서 어떤 색을 지정할지 모르더라도 rgba 앞쪽에 붙어 있는 색상부분에 커서를 가져가시면 색상판이 나타내서 자신이 원하는 색상을 직관적으로 선택할 수 있습니다. 

 

색을 따로 지정하지 않으면 기본 연한 회색바탕의 배경으로 나타나게 됩니다. 

 

배경만 없애고 색깔 지정을 하지 않은 경우

 

4. 변경된 포스팅 제목을 확인합니다. 

background-color: rgba(80, 30, 121, 0.712); 로 변경한 예시

 

 

포스팅 제목 글자 색 변경하기

기본적으로 포스팅 제목의 글자 색은 화이트로 지정이 되어 있어서 포스팅 제목의 배경이 되는 색상을 진한 원색으로 할 경우에 가독성이 올라갑니다. 

 

그런데 개인의 취향에 따라서 포스팅 제목의 배경 색상을 연한 색상으로 바꾸고 제목을 나타내는 글자의 색상을 화이트가 아닌 짙은 색으로 바꾸고 싶을 때 글자 색상 변경은 CSS 탭에서 가능합니다. 

 

CSS 탭에서 ".post-cover .category"를 검색	각 부분의 색상을 검은색으로 변경

 

여기서 세부분의 색상(color) 부분의 색상을 변경할 수 있습니다. 여기서는 모두 검은색으로 변경해 보았으나, 원하시는 색상으로 변경이 가능하고 세 가지 색을 모두 다르게 할 수도 있습니다. 

 

 

이렇게 검은색으로 변경된 것을 확인하실 수 있습니다. 

 

 

마무리

포스팅 제목의 배경 색을 제목 글자 색상이 잘 보이는 원색의 띠로 지정해두면 포스팅 제목의 가독성을 향상할 뿐 아니라 블로그 전체의 신뢰도도 올릴 수 있습니다. 

 

포스팅의 제목 배경을 한가지 색상의 띠모양으로 변경하는 것 이외에도 배경의 투명도를 어둡게 조절하거나, 배경에 특정 이미지를 고정해서 변경하는 방법이 있는데, 이들 방법에 대한 자세한 포스팅은 이전 포스팅을 참고하시면 되겠습니다. 

 

2024.05.25 - [분류 전체 보기] - 티스토리 포스팅 제목 배경 어둡게 바꾸기

티스토리 포스팅 제목 배경 어둡게 바꾸기

 

2024.05.25 - [분류 전체보기] - 티스토리 포스팅 제목 배경에 특정 이미지 넣어 바꾸기

티스토리 포스팅 제목 배경에 특정 이미지 넣어 바꾸기