티스토리 제목 배경사진 삭제 및 설정하는 방법

티스토리 블로그를 포스팅 한 뒤 제목에 배경사진이 있어 가독성이 떨어지는 경우가 있습니다 포스팅 로딩 시 배경사진 용량 때문에 속도가 느려지는 것을 줄이고 구글seo 최적화를 위해서 제목 배경사진을 삭제하고 설정하는 방법에 대해 알아보겠습니다

 

배경사진 삭제 및 색상 변경

기존스킨 저장

스킨 저장

먼저 스킨 편집 시 실수를 하거나 이전 스킨을 다시 사용할 경우를 대비해서 현재 쓰고 있는 스킨을 저장해서 백업해 놓는 것이 안전합니다

저장 경로는 블로그관리 홈에 있는 꾸미기 카테고리의 스킨변경을 선택하고 보관을 클릭한뒤 이름을 지정해서 저장하시면 됩니다

 

제목 배경사진 삭제

스킨 편집

저장이 되었으면 이제 제목 배경사진을 삭제하기 위해 블로그 홈에있는 꾸미기 탭의 스킨편집을 클릭하신 후 HTML편집으로 들어갑니다

image:url 검색

"background-image:none"으로 수정

HTML편집화면에서 CTRL키와 F키를 눌러 검색창을 연후 image:url이라고 검색을 하면 관련 검색어가 2개 나오는데 첫 번째로 나오는 건 넘어가고 400번대 라인에 있는  <s_permalink_article_rep> 아래의

"background-image:url(https://blog.kakaocdn.net/dn/Cu8kT/btr0H8dirTJ/VLHUXGKssvk70i031Knx81/img.jpg)" 부분을 "background-image:none"으로 수정하고 적용을 누르면 이미지가 삭제되어 나옵니다

 

배경색상 변경

배경이미지가 삭제되면 기본으로 회색 화면이 나오는데 색상을 변경하기 위해선 HTML탭 옆에 있는 CSS로 들어가서 #cbcbcb로 검색한 뒤 post-cover 아래에 있는 background-color를 원하는 색상으로 수정하고 적용버튼을 누르면 변경됩니다

그리고 색상을 변경할 때는 #cbcbcb 코드에 마우스를 올려 색을 선택하거나 아니면 색상표를 검색해서 직접 코드를 입력하는 방법도 가능합니다

 

제목위치 및 사이즈 변경

변경 전후 비교

제목위치 변경

위와 같이 포스팅 배경화면이 없어지고 설정한 색으로 변경되면서 가독성이 높아지고 로딩속도가 빨라지게 되었습니다

여기서 제목을 조금 더 강조하기 위해 카테고리 항목의 위치를 아래로 변경하려면 다시 HTML코드로 들어가서 category로 검색을 합니다

 

카테고리 위치변경

위 화면처럼  <s_permalink_article_rep>에 있는 <span class="category"> </span>의 위치를 <span class="meta"> 바로 아래로 변경해주면 제목, 카테고리, 기타정보 순으로 순서가 변경됩니다

 

타이틀박스 크기변경 전후

그리고 제목을 나타내는 박스가 너무 큰것 같으면 CSS에서 post-cover를 검색해 1046번 라인에있는 height부분을 낮게 수정하면 줄어들고 이때 본문 간격과의 빈공간이 커지기 때문에 공간사이즈도 조절해야 합니다

 

제목과 본문사이 공간조절

좌 : 타이틀박스 크기 조절 / 우 : 본문과의 간격 조절

제목과 본문 사이의 공간을 줄이기 위해서는 CSS편집 화면에서 tt-body-page를 검색해 440번 라인에 있는 padding-top 사이즈 숫자를 낮춰주면 타이틀과 본문이 자연스러운 구조로 맞춰집니다

 

수정 시에는 블로그에 설정된 폰트나 사이즈에 따라 공간설정을 해야 자연스러우니 숫자에 따라 변경된 화면을 비교해 보고 원하시는 사이즈로 맞추시면 좋을 것 같습니다

 

지금까지 티스토리에서 블로그에서 제목 배경사진을 삭제하고 설정하는 방법 등에 관한 내용에 대해서 알아봤습니다 감사합니다