티스토리 포스트 제목 배경 단색으로 설정

 

티스토리 포스트를 작성하면서 공간에 조금씩 변화를 주고 있습니다.

 

매 포스트마다 내용에 맞는 썸네일을 디자인하는 것이 힘들 때는 차라리 제목 배경을 단색으로 설정해 가독성을 높이는 것도 한 방법입니다.

 

아래처럼 Power BI 관련 포스트에서 다루고 있는 모든 것들이 그래프 아니면 DAX 식이기 때문에, 그중의 하나가 대표 사진으로 등록되면 제목의 가독성이 너무 떨어집니다.

 

 

 

그래서 차라리 단색으로 표현하면 낫겠다 싶어서 수정했습니다.

 

아래 단계를 따라 하면 원하는 단색으로 바꿀 수 있습니다.
스킨 편집을 통해 모든 포스트가 일괄적으로 변경이 됩니다.

 

 

목차

 

 

반응형

 

스킨 편집 - CSS

 

꾸미기 - 스킨 편집을 선택하고 html 편집을 통해 코드 변경을 합니다.

 

우리가 수정하려고 하는 것은 CSS 입니다.

 

 

 

 

CSS - 썸네일 제거

 

CSS 코드가 길기 때문에, "Ctrl + F"로 필요한 부분을 먼저 찾습니다.

 

검색 단어 입니다. 여러 군데가 있지만, 아래 부분이 나올 때까지.

s_peralink_article_rep

 

여기에서 파란 박스 부분을, url 안에 있는 부분, 을 수정하려고 합니다.

 

 

url 안에 있는 내용을 지우고 "none"으로 수정합니다. 아래처럼 바꾸고 적용을 선택해 저장합니다.

 

 

---

 

CSS가 반영이 되었는지, 포스트를 리프레시하면 아래와 같이 변경된 것을 확인할 수 있습니다.

 

포스트에서 사용된 대표 사진은 사라지고, 진한 회색만 남았습니다. 이제 이 색을 조절할 차례입니다.

 

 

 

CSS - 제목 배경 색깔 설정

 

포스트 제목의 배경색이 설정되어 있는 곳을 "Ctrl + F"로 찾습니다.

.post-cover:before

 

여기에서 우리가 수정할 부분은 background-color 부분입니다.

 

RGB (RED, GREEN, BLUE) 숫자를 넣으면 되는데, 왼쪽 박스 부분에 마우스를 올리면 아래 화면처럼 자동으로 팔레트가 보입니다. 여기에서 맘에 드는 색을 선택하면 됩니다.

 

참고로 맨 마지막 0.25는 투명도를 나타냅니다.

 

저는 아래와 같이 rbga (2, 2, 48, 0.75)로 설정했습니다.

 

 

이렇게 수정한 것을 적용하고 포스트를 다시 리프레시하면 아래와 같이 최종적으로 바뀌었네요.

 

 

 

이렇게 모든 포스트의 제목 배경화면을 일괄적으로 변경했습니다.

 

당분간은 이 색깔을 써보고, 나중에 더 맘에 드는 색이 나타나면 ".post-cover:before"로 선언된 부분을 수정하려고 합니다.