티스토리 글 상단 제목 배경 이미지 없애기

안녕하세요. 티스토리의 글 제목 배경은 글에 삽입한 이미지 중 하나가 자동적으로 생성됩니다.

이미지와 글의 제목이 겹쳐지면서 가독성이 떨어지는 경우가 많습니다. 가장 중요한 점은 글 제목의 배경 이미지로 인하여 로딩 속도가 느려지고 사이트 최적화 SEO에도 영향을 미치게 됩니다.

 

이번 시간에는 이런 여러가지 문제들을 해결하기 위해 티스토리 블로그 글 상단 제목의 배경을 삭제하는 방법에 대해 포스팅해보려 합니다.

 

회색 배경 만들기

무작위로 지정되는 배경 이미지를 없애고 회색 배경으로 만드는 방법입니다.

 

1. '블로그 관리 홈 > 스킨 편집 > html 편집'으로 들어갑니다.

 

2. 검색 기능으로(Ctrl+F) 'post-cover'를 검색합니다. 여러 개가 검색될 텐데 그중 아래와 같은 곳을 찾습니다.

<div class="post-cover" <s_article_rep_thumbnail>

                    style="background-image:url(https://blog.kakaocdn.net/dn/zY5US/btsE96eQCEO/RJl0ydBNBkqRk812PIbUp1/img.png)"</s_article_rep_thumbnail>>

 

3. 위 코드 중에 주황색으로 보이는 url(https://blog.kakaocdn.net/dn/zY5US/btsE96eQCEO/RJl0ydBNBkqRk812PIbUp1/img.png) 부분을 none으로 바꾸고 적용을 누릅니다.
나중에 다시 원복을 하고 싶으시다면 주석 처리(/* 내용 */)를 해두시기 바랍니다.
ex) /* url(https://blog.kakaocdn.net/dn/zY5US/btsE96eQCEO/RJl0ydBNBkqRk812PIbUp1/img.png) * /  

 

4. 글 제목을 확인해 보면 회색 배경으로 바뀌어 있습니다.

 

 

 

 

 

흰색 배경 만들기

흰색 배경을 만들기 위해서는 회색 배경 만들기와 비슷 하지만 추가적으로 아래와 같은 작업이 필요합니다.

회색 배경 없애기 > 글자색 바꾸기 >  

 

 

1. '블로그 관리 홈 > 스킨 편집 > html 편집 >  CSS 수정'으로 들어갑니다.

 

2. 검색 기능으로(Ctrl+F) '. post-cover {'를 검색합니다.

아래와 내용과 같은 두 개의 코드를 찾습니다. (이어져 있습니다.)

.post-cover {

  position: relative;

  z-index: 20;

  display: table;

  width: 100%;

  height: 340px;

  /* background-color: #cbcbcb; 제목 커버 배경 회색 */

  background-position: 50% 50%;

  background-size: cover;

  box-sizing: border-box;

}

.post-cover:before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  z-index: 0;

  width: 100%;

  height: 100%;

  /* background-color: rgba(0, 0, 0, 0.25); 제목 커버 배경 회색*/

}

 

3. 각 코드 중 아래 내용을 수정합니다.
 background-color: #cbcbcb; 부분을 주석(/*내용*/) 처리하거나 삭제합니다.

ex) /* background-color: #cbcbcb; 글 제목 회색 */

background-color: rgba(0, 0, 0, 0.25);

ex) /* background-color: rgba(0, 0, 0, 0.25); 글 제목 회색*/

 

(회색이 아닌 다른 색상을 입력하고 싶으시다면 ' #cbcbcb '코드의 왼쪽 네모 박스를 눌러보시면 원하는 색상으로 선택하여 배경 색을 바꾸실 수 있습니다.)

 

4. 글자색 바꾸기(카테고리, 제목, 글 쓴 날짜 및 글쓴이)

글 제목을 보시면 카테고리, 제목, 날짜등의 내용이 적혀있습니다. 각 부위마다 글자색 설정을 따로 하실 수 있습니다.

 

카테고리: 검색 기능으로(Ctrl+F) '. post-cover. category { '를 검색합니다.

아래와 같은 코드를 찾습니다.

.post-cover .category {

  display: block;

  max-width: 1080px;

  margin: 0 auto 13px;

  font-size: 0.875em;

  color: #fff;

}

 

color: #fff에서

 

제목: 검색 기능으로(Ctrl+F) '. post-cover h1 { '를 검색합니다.

아래와 같은 코드를 찾습니다.

.post-cover h1 {

  max-width: 1080px;

  margin: 0 auto;

  font-weight: 300;

  font-size: 2.125em;

  line-height: 1.2352;

  color: #fff;

}

color: #fff 에서 원하는 색상으로 변경합니다.

날짜 및 글쓴이: 검색 기능으로(Ctrl+F) '. post-cover. meta { '를 검색합니다.

아래와 같은 코드를 찾습니다.

.post-cover .meta {

  display: block;

  max-width: 1080px;

  margin: 34px auto 0;

  font-size: 0.875em;

  color: rgba(255, 255, 255, 0.6);

}

color: #fff 에서 원하는 색상으로 변경합니다.


5. 적용을 해보면 흰색 배경에 검정 글자색으로 바뀌어 있습니다.

 

 

 

응용 

제목 배경 색상과 폰트 색상을 원하는 색상에 맞게 조합한다면 자신이 원하는 다양한 배경을 꾸미실 수 있습니다.

 

 

 

블로그 소제목 꾸미기, 서식(HTML) 스타일 코드 설정이 필요하시다면

[애드센스] 티스토리 소제목 꾸미기, 서식(HTML) 스타일 코드 공유

게시글 썸네일 정사각형, 비율, 안 잘리는 방법이 궁금하시다면

북클럽 스킨 추천, 게시글 썸네일 정사각형, 비율, 안 잘리는 방법