티스토리 제목 배경이미지 배경색 크기 수정 방법

티스토리 상단 제목이 있는 곳에 이미지가 겹쳐 나오는 게 영 맘에 들지 않아서 바꾸면서 글을 올려봅니다.

제목 배경이미지나 색깔 크기 등 원하는 스타일로 바꾸는 방법을 순서대로 따라 하면 됩니다.

스킨편집을 하기 전엔 꼭 스킨보관을 하고 시작하는 것을 추천합니다.

스킨 편집을 하다가 실수가 생기면 보관된 스킨으로 되돌아가야 하니까요~.

북클럽을 기준으로 설명하겠습니다.

 

관리 - 꾸미기 - 스킨변경 -사용 중인 스킨 보관

 

제목 배경이미지 변경

제목 배경이미지 삭제하기

  ①티스토리 관리 

  ②스킨편집 html

  ③편집창에서 아무 곳에나 마우스로 클릭 한번 한 후 ctrl+f키를 누르고 검색창 활성화

  ④검색창에 post-cover라고 입력 후 ↓ 화살표를 눌러 세 번째 쓰인 곳으로 이동

  ⑤주황색 대괄호 부분을 지우고 none으로 대체합니다.

<전>

<div class="post-cover"<s_article_rep_thumbnail> style="background-image:url(https://blog.kakaocdn.net/dn/4hIqw/btr8iZM1xim/AyCUUzjJELbEW00YvKCrLk/img.png)"</s_article_rep_thumbnail>>

<후> 

style="background-image:url(none)"

  ⑥편집 후 새로고침하여 글로 바꾸고 미리 확인하고 적용을 합니다. 

 

적용을 누르면 제목 배경이 회색으로 변합니다.

 

제목 배경 이미지 변경하기

배경을 변경하고 싶을 때 배경으로 하고 싶은 이미지 파일을 업로드하여  변경합니다.

  ①티스토리 관리

  ②스킨편집 html편집-파일업로드

 

 ③하단의+추가버튼을 눌러 내 컴퓨터에 있는 이미지 업로드

 ④업로드한 사진 파일명위에 마우스 오른쪽 클릭하고 링크주소 복사

 ⑤스킨편집 html섹션에서 위의 대괄호{  }를 지운 자리의 괄호(  ) 안에 이미지 주소 입력

 

제목 배경색 변경하기

제목 배경색 흰색으로 변경하기

배경색을 아무것도 넣지 않은 흰색으로 하는 방법입니다.

  ①티스토리 관리

  ②스킨편집 html편집-css

  ③편집창에서 아무곳에 마우스로 클릭 한번 한 후 ctrl+f키를 누르고 검색창 활성화

  ④검색창에 cbcbcb를 입력하고  ↓ 화살표를 눌러 두번째 쓰인 곳으로 이동

 

 ⑤background-color:#cbcbcb; 의 부분의 앞과 뒤에 /*,*/를 입력합니다.

/*background-color:#cbcbcb; */

  ⑥바로 아래의 post-cover:before부분의 background-color:rgba(0,0,0,0.25);도 앞과 뒤에 /*,*/를 입력합니다.

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

  ⑦적용하면 흰색으로 변경됩니다.

 

제목 배경색 다른 색으로 변경하기

다른 배경색으로 바꾸고 싶으면 background-color옆의 ㅁ를 마우스로 클릭하여 원하는 색으로 변경하면 됩니다.

 

 

제목 배경크기 변경하기

배경의  크기 줄이기

  ①티스토리 관리

  ②스킨편집 html-css

  ③편집창에서 아무곳에 마우스로 클릭 한번 한 후 ctrl+f키를 누르고 검색창 활성화

  ④배경색을 바꿨던 부분의 post-cover에서 height의 px를 수정

     숫자가 작아지면 크기가 줄어들고 숫자가 커지면 넓어집니다.

     height 의 숫자를 340에서 200~250으로 변경합니다.

 

배경과 글 사이 간격 줄이기

padding-top 검색 후 두 번째 이동

#tt-body-page #container {

padding-top:150px;    <---이 부분의 px숫자를 원하는 크기로 변경

 

글제목  날짜 색 변경하기

글자 색은 카테고리, 제목, 날짜의 색을 각각 변경 가능

 

글제목 색 변경

검색창에 post-cover h1를 검색하여 이동

color의 ㅁ 부분을 클릭 후 컬러피커의 색 선택하여 변경

날짜 색 변경

검색창에  post-cover. meta를 검색하여 이동

color의 ㅁ 부분을 클릭 후 컬러피커의 색 선택하여 변경