본문 바로가기
지식창고

티스토리 제목 배경 깔끔하게 수정하는 방법(+제목 전체표시)

by 블슈입니다 2022. 8. 25.

이번 포스팅에서는 티스토리 제목 배경을 깔끔하게 수정하는 방법과 제목이 길더라도 전체 표시가 다 되는 방법에 대해 알아보도록 하겠습니다.

 

앞선 포스팅에서는 제목 배경 사진 이미지를 삭제하는 방법에 대해 알아보았는데요, 배경을 삭제했더니 회색으로 되어 있어 예쁘지가 않습니다. 북클럽 스킨 기준 컬러와 높이 등을 수정 해 보도록 하겠습니다. 추가적으로 리스트에서 제목이 길 경우 말줄임표로 나타나는데 전체가 표시되는 방법도 알아보겠습니다.

 

 

1. 제목 상단 높이 조절, 회색 배경 삭제

제목글자 위 높이가 상당해 보입니다. 좀 줄여 주겠습니다. 꾸미기 -> 스킨편집 -> html -> CSS 로 들어가 줍니다. 이번 포스팅은 모두 여기 CSS에서 수정합니다. 하단 빈공간을 클릭 한 뒤, CTRL +F 를 눌러 검색창을 활성화 시켜줍니다. 

 

post-cover  로 검색 해 주세요. CSS 부분을 크게 수정 한 적이 없으시다면 보통 1041번에 우리가 수정할 부분이 있습니다. height 부분을 원하는 만큼 줄여 줍니다. 필자는 200px로 수정 하였습니다.   

 

그리고 이제 회색 배경을 지워줍니다. 필자는 혹시 몰라 삭제 하지 않고 주석처리 하였습니다.

/*(주석 처리할 부분)*/ 

 

티스토리 제목 배경 수정하는 방법
티스토리 제목 배경 수정하는 방법

 

 

2. 제목 글자 색상 변경

post-cover .category  로 검색 해 주세요. 제목에는 카테고리, 포스팅 제목, 글쓴이/작성일 이렇게 뜹니다(코드도 순서대로). 배경색을 지워 흰색이 되었으니, 글자가 보이려면 현재 흰색으로 되어 있는 글자색을 변경 해 줍니다. 필자는 검정으로 우선 변경 하였습니다.  

티스토리 제목 배경 수정하는 방법
티스토리 제목 배경 수정하는 방법

잘 따라오고 계신가요? 천천히 차근차근 수정해 주세요.

 

 

네이버에서 html 색상표로 검색하셔서 편하게 색상 코드를 확인 해 보실 수 있습니다.

html 색상표
html 색상표

 

 

 

3. 제목과 본문 간격 조절

tt-body-page #container 로 검색 해줍니다. 이제 제목과 본문사이 간격을 줄여보겠습니다. 아래 코드를 찾아 padding-top 부분을 원하시는 사이즈로 변경 해 주세요. 필자는 우선 200px로 수정 하였습니다.

 

티스토리 제목 배경 수정하는 방법
티스토리 제목 배경 수정하는 방법

 

 

4. 제목 전체 표시

post-item .title 로 코드를 찾아주세요. white-space가 nowrap로 되어 있을 거에요, normal 로 수정 해 줍니다. 

상기 모두 수정 했다면 반드시 적용을 눌러주세요!! 자, 이제 북클럽 스킨 기준, 리스트에서 제목 글자가 모두 표시되게 됩니다.

 

티스토리 제목 전체 표시 방법
티스토리 제목 전체 표시 방법

 

이번 글에서는 티스토리 제목 배경을 깔끔하게 수정하는 방법과 제목이 길더라도 전체 표시가 다 되는 방법에 대해 알아보았습니다.

 

 

잘 적용 되셨나요? 사이즈나 컬러는 원하시는 것으로 계속 바꾸면서 사용 하시면 됩니다^^

 

 

구글 애드센스 승인 받는 방법 (이대로만 하세요!)

티스토리 제목 배경 이미지 삭제 (초간단 방법)

티스토리 블로그 소제목과 본문 글크기 변경을 한번에!

티스토리 블로그 2차 도메인 구글 서치콘솔, 네이버 서치어드바이저 등록하기

 

 

댓글