티스토리 본문 제목 배경 크기 줄이는 법

티스토리 블로그 본문의 제목은 본문 내용에 포함된 이미지 중 대표 이미지를 배경으로 하여 글 제목이 하얀색 글씨로 표시됩니다. 이미지의 크기와 색깔에 따라 그때그때 제목은 잘 보이기도 하고 안 보이기도 합니다. 제목의 배경은 매번 달라지며 정돈되지 않은 모습이면서 자리까지 많이 차지합니다. 그래서 바꿨습니다. 티스토리 본문 상단 제목 배경의 다이어트를 시작합니다. (북클럽 스킨에서 작업했습니다)

 

1. 티스토리 분문 제목 배경 크기 줄이는 법

1) 티스토리 블로그 관리모드 > '꾸미기' 탭의 스킨편집 > 오른쪽의 'html 편집' > 'CSS'

2) 오른쪽 창에서 Ctrl + Q + F로 검색창 열어서 '340' 입력 > 검색창 오른쪽의 위아래 방향 화살표 클릭하여 이동해 보면 '340'이 포함된 위치가 두 곳 나옵니다. 그중에서 아래의 340을 200으로 수정해서 상단의 '적용'을 클릭합니다.

2. 티스토리 본문 제목 위치 조정하기

제목 배경의 높이가 바뀌어 제목의 위치가 중앙이 아니게 되었습니다.

위 화면에서 조금 아래에 padding-bottom : 78px의 숫자를 30으로 변경하여 제목 위치를 잡아줍니다.

3. 티스토리 본문 제목과 본문 사이 여백 없애기

제목의 크기가 작아지고 본문은 그대로라서 제목과 본문 사이에 빈 공간이 생겼습니다.

위 화면에서, Ctrl + Q + F로 검색창을 열어 아래 화면과 같은 내용의 339를 찾아 160으로 바꿉니다.

적용을 클릭해 주세요.

4. 티스토리 본문 제목 배경 이미지 삭제하기

제목의 불규칙한 배경 이미지를 삭제합니다. 이번에는 CSS모드가 아니라 그 옆의 HTML모드에서 작업합니다.

 

1) Ctrl + Q + F로 검색창을 열어 아래의 내용을 찾습니다.

변경 전: <div class="post-cover"<s_article_rep_thumbnail> style="background-image:url(https://blog.kakaocdn.net/dn/bqXCtD/btsqXUtRoSF/dtImFJQ2ORiFFt9kZQJKhK/img.jpg)"</s_article_rep_thumbnail>>

 

2) 위 내용 중 https://blog.kakaocdn.net/dn/bqXCtD/btsqXUtRoSF/dtImFJQ2ORiFFt9kZQJKhK/img.jpg를 none으로 바꿉니다.
변경 후: <divclass="post-cover"<s_article_rep_thumbnail>style="background-image:url(none)"></s_article_rep_thumbnail>>

 

확인해 보면 제목 배경이 회색으로 바뀐 것을 볼 수 있습니다. 

 

5. 티스토리 본문 제목 배경 색 바꾸기 

회색 배경은 지루합니다. 색상 코드표에서 색상을 하나 골라 배경색을 바꾸어봅니다. 

<> 그림판 이용하여 색상 코드 추출하는 법

1) CSS코드에서 작업합니다. 

2) Ctrl + Q + F로 검색창을 열어 'cbcbcb'를 찾습니다. 이 코드는 두 개가 있는데, 아래쪽 코드를 변경합니다. 

왼쪽 색상 상자에 마우스 포인터가 가면 색상표가 나오긴 하지만 이곳에서 색상을 고르기는 조금 어려워 따로 확인하는 것이 좋습니다.

---

티스토리 블로그 본문에서 제목의 배경 이미지를 삭제하고 크기를 조정하고 제목의 위치를 조정하고 제목 배경색을 바꿔주는 작업을 했습니다. 낯선 html과 css, 그러나 그렇게 군더더기를 뺀 덕분에 블로그 모양이 전보다 편안해 보입니다.