본문 바로가기
웹 개발/블로그

티스토리 | 본문 제목 영역 수정하기

by KISCH 2020. 8. 12.
반응형


배경 이미지 수정



 ✝︎  배경이미지 고정으로 바꾸기

문제점 — 본문의 대표이미지로 제목 배경 이미지가 깔리게 됩니다. 하지만 아래 그림과 같은 문제점이 있습니다.

  1. 썸네일의 크기가 맞지 않으면 이상하게 잘려서 보이는 문제 
  2. 본문에 삽입된 이미지와 제목 배경이미지가 2번 보이는 문제 


배경이미지고정


솔루션 — 모든 글의 제목 배경 이미지를 고정시키면 크기나 색 때문에 제목이 잘 안 보이는 현상을 제거할 수가 있습니다.


1. 스킨편집 - 파일 업로드에 배경으로 쓸 이미지를 올리기


파일업로드


2. 스킨편집 - CSS 에서 .post-cover 부분을 찾습니다.


제목이미지고정


3. 다음 소스를 추가합니다. 이미지이름은 올린 이름에 맞게 수정해주세요.


1
2
background: #fff url(./images/ClassicBlue.png) no-repeat 0 0;
background-size: cover;
cs


background-size는 이미지 사이즈가 1920px이 아닌 경우 화면에 맞게 펼쳐서 보여주는 코드입니다.  


티스토리제목이미지고정


제목 배경 이미지가 바뀌었습니다. 모든 글의 배경이 똑같이 고정되는 점 유의하세요.







제목 영역과 본문 간격 



제목영역과 본문 간격이 넓은 경우 모바일에서는 많이 떠보입니다. 보통 티스토리 스킨의 경우 339px로 되어있는데 CSS편집에서 #tt-body-page #container 를 찾아서 수정하면 됩니다. 


제목본문간격







티스토리수정



반응형

댓글