목차 ▴ 닫기
글 제목의 이미지를 지우고 본문에 넣기.
오래전부터 사용해 온 티스토리 스킨인 Book Club은 심플하고 깔끔한 디자인 덕분에 많은 사용자들에게 인기를 끌고 있습니다. 그러나 블로그 본문에서 글 제목이 상단에 크게 노출되는 구조로 인해, 대표 이미지가 배경으로 자동 설정되면서 이미지에 따라 글 제목이 잘 보이지 않는 문제가 발생하곤 합니다.
이에 따라, 글 제목의 배경 이미지를 제거하고 크게 노출되는 글 제목을 본문에 포함하여 보다 깔끔하고 가독성 높은 디자인으로 정리해 보겠습니다.
[📌 코드 수정 시 주의사항은 아래 '더 보기'를 참고하세요.]
1. 스킨 저장.
스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경 전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.
스킨을 백업하려면, 블로그 관리자 > 꾸미기 > 스킨 변경을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.
2. [Ctrl] + [F]를 사용할 때.
먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.
정리된 글 제목과 본문 미리보기
글 제목 이미지 지우기 HTML 코드 수정
1. 글 제목 이미지 지우기
1) '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > HTML'로 들어갑니다.
2) HTML 탭에서 [Ctrl]+[F] 키를 이용해 <s_permalink_article_rep>을 찾아줍니다.
<s_permalink_article_rep>
3) 변경할 내용은 아래와 같습니다.
위치: 2번째 <s_permalink_article_rep>
코드: style="background-image:을 찾아줍니다.
성명: url 코드를 none로 바꿔 줍니다.
4) 미리보기를 통해 적용된 변경 사항을 확인한 후 [적용]을 클릭하여 '저장'합니다.
- 배경 이미지 삭제 후 기본색은 회색입니다.
여기까지 하셨다면 HTML 코드 수정은 끝났습니다.
이제 CSS 코드를 수정하여 글 제목의 여백 간격, 모바일 본문 제목의 글 잘림, 배경 색을 없애기, 글자 색을 넣기 등을 해 보겠습니다.
글 제목 CSS 코드 수정
1. post-cover 영역을 본문 안으로 이동
1) CSS 탭에서 [Ctrl]+[F] 키를 이용해 #tt-body-page .post-cover를 찾아줍니다.
#tt-body-page .post-cover
2) 변경할 내용은 아래와 같습니다.
위치: #tt-body-page .post-cover {
코드: position: absolute;을 찾아줍니다.
설명: absolute 코드를 relative로 바꿔 줍니다.
position: relative; /*absolute*/
3) 미리보기를 통해 적용된 변경 사항을 확인한 후 [적용] 버튼을 눌러 변경 사항을 '저장'합니다.
2. 헤더, 글 제목 여백 조정
1) CSS 탭에서 [Ctrl]+[F] 키를 이용해 #tt-body-page #container {를 찾아줍니다.
#tt-body-page #container {
2) 변경할 내용은 아래와 같습니다.
위치: #tt-body-page #container {
코드: padding-top:을 찾아줍니다.
설명: 339px를 0px로 바꿔 줍니다.
padding-top: 0px; /*339px 헤더, 글 제목 여백*/
3) 미리보기를 통해 적용된 변경 사항을 확인한 후 [적용] 버튼을 눌러 변경 사항을 '저장'합니다.
3. 글 제목의 배경색 변경-1
1) CSS 탭에서 [Ctrl]+[F] 키를 이용해 .post-cover {를 찾아줍니다.
.post-cover {
2) 변경할 내용은 아래와 같습니다.
위치: 총 4개의 코드 중 2번째 .post-cover {
코드: background-image:을 찾아줍니다.
설명: #cbcbcb를 none 또는 #fff로 바꿔 줍니다.
background-image: #fff; /*#cbcbcb;*/
3) 미리보기를 통해 적용된 변경 사항을 확인한 후 [적용] 버튼을 눌러 변경 사항을 '저장'합니다.
4. 글 제목의 배경색 변경-2
1) CSS 탭에서 [Ctrl]+[F] 키를 이용해 .post-cover:before {을 찾아줍니다.
.post-cover:before {
2) 변경항 내용은 아래와 같습니다.
위치: 총 4개의 코드 중 2번째 .post-cover:before {
코드: background-color:
설명: /*background-color: rgba(0, 0, 0, 0.25);*/ 주석을 이용해 코드를 숨겨줍니다.
/* background-color: rgba(0, 0, 0, 0.25); */
3) 미리보기를 통해 적용된 변경 사항을 확인한 후 [적용] 버튼을 눌러 변경 사항을 '저장'합니다.
이때 글제목이 모두 사라져도 당황하지 마세요. 글 색상이 흰색으로 설정되어 보이지 않는 것일 뿐입니다. 아래에서 글 색상을 수정하면 다시 나타납니다.
5. 글 제목의 색상 변경
글 제목의 색상은, 수정해야 할 부분이 많아 다소 복잡해 보일 수 있지만, 아래의 그림과 설명을 참고하며 하나씩 차근차근 진행하면 생각만큼 어렵지 않을 것입니다.
1) CSS 탭에서 [Ctrl] + [F]를 이용해 .post-cover .category { 를 검색합니다.
.post-cover .category {
2) 변경할 내용은 아래와 같습니다.
1. 카테고리 폰트 색상 변경
위치: .post-cover .category {
코드: color: #fff;
설명: 원하는 색상으로 바꿔줍니다. (예시: color: #555;)
color: #555;
2. 본문 제목의 폰트 색상 및 굵기 수정
위치: .post-cover h1 {
색상 코드: font-weight:
설명: 제목 폰트의 굵기를 변경합니다. (예시: font-weight: bold;)
굵기 코드: color: #fff;
설명: 제목 폰트의 색상을 변경합니다. (예시: color: #444;)
font-weight: bold; /*300px*/
font-size: 2.125em;
line-height: 1.2352;
color: #444;
3. 닉네임/날짜 폰트 색상 변경과 구분선 추가
위치: .post-cover .meta {
코드: color: rgba(255, 255, 255, 0.6);
설명: 닉네임/날짜의 폰트 색상과 크기, 하단의 여백, 구분선 등을 변경합니다.
color: rgba(0, 0, 0, 0.6);
border-bottom: 1px solid #bbb;
padding: 0px 0px 20px 0px;
4. 수정/삭제 폰트 색상 변경
위치: .post-cover .meta a {
코드: color: rgba(255, 255, 255, 0.6);
설명: 수정/삭제의 색상을 변경합니다. (예시: color: #rgba(0, 0, 0, 0.6);)
기타: 수정/삭제는 스킨의 버전에 따라 아이콘으로 나올 수도 있음.
color: rgba(0, 0, 0, 0.6);
5. 닉네임과 날짜 사이 구분점의 색상 변경
위치: .post-cover .meta a:before,
코드: background-color: rgba(255, 255, 255, 0.6);
설명: 닉네임과 날짜 사이 구분점의 색상을 변경합니다. (예시: background-color: #rgba(0, 0, 0, 0.6);)
background-color: #rgba(0, 0, 0, 0.6);
3) 미리보기를 통해 적용된 변경 사항을 확인한 후 [적용] 버튼을 눌러 변경 사항을 '저장'합니다.
6. 수정/삭제가 아이콘일 경우
블로그의 버전에 따라 수정/삭제가 폰트가 아닌 아이콘인 경우가 있습니다.
1) CSS 탭에서 [Ctrl] + [F]를 이용해 .my_edit .ico_more { 를 검색합니다.
.my_edit .ico_more {
2) 변경할 내용 아래와 같습니다.
위치: .my_edit .ico_more {
코드: fill: #fff !important;
설명: 수정/삭제 아이콘의 배경색 변경. (예시: fill: #555 !important;)
fill: #555 !important;
3) 미리보기를 통해 적용된 변경 사항을 확인한 후 [적용] 버튼을 눌러 변경 사항을 '저장'합니다.
7. 제목 잘림 수정
글 제목이 길어질 경우 모바일에서 '...'으로 잘리는 문제를 해결하기 위해 코드를 수정합니다.
1) CSS 탭에서 [Ctrl] + [F]를 이용해 .post-cover .inner > h1 { 를 검색합니다.
.post-cover .inner > h1 {
2) 변경할 내용 아래와 같습니다.
위치: .post-cover .inner > h1 {
코드: -webkit-line-clamp:
설명: 글의 줄수를 2;에서 5;로 늘려줍니다. (예시: -webkit-line-clamp: 5;)
-webkit-line-clamp: 5; /*2*/
3) 미리보기를 통해 적용된 변경 사항을 확인한 후 [적용] 버튼을 눌러 변경 사항을 '저장'합니다.
'글 제목 커버'의 상하단 여백 제거
아래처럼 글 제목 커버의 너무 넓은 상하단의 여백을 0px로 줄여 줍니다.
1. 상단 여백을 제거
1) CSS 탭에서 [Ctrl] + [F]를 이용해 .post-cover { 를 검색합니다.
.post-cover {
2) 변경할 내용 아래와 같습니다.
위치: 총 4개의 코드 중 2번째 .post-cover {
코드: height:
설명: 상단 여백을 제거. (예시: 0px;)
height: 0px; /*340px 제목 커버 높이*/
3) 미리보기를 통해 적용된 변경 사항을 확인한 후 [적용] 버튼을 눌러 변경 사항을 '저장'합니다.
2. 하단 여백을 제거
1) CSS 탭에서 [Ctrl] + [F]를 이용해 .post-cover .inner { 를 검색합니다.
.post-cover .inner {
2) 변경할 내용 아래와 같습니다.
위치: 2개의 코드 중 첫번째 .post-cover .inner {
코드: padding-bottom:
설명: 하단 여백을 제거. (예시: padding-bottom: 0px;)
padding-bottom: 0px; /*78px 하단 제목높이*/
3) 미리보기를 통해 적용된 변경 사항을 확인한 후 [적용] 버튼을 눌러 변경 사항을 '저장'합니다.
글 제목 커버화면이 정리된 모습
마무리
이렇게 글 제목 커버화면(post-cover)의 배경을 제거하고 본문으로 이동시켜, 기존 북클럽 스킨보다 깔끔하게 정리된 새로운 북클럽 스킨을 만들어 보았습니다. 북클럽 스킨 수정 방법은 인터넷 검색을 통해 다양한 정보를 참고할 수 있으니, 이를 활용해 나만의 독창적이고 멋진 스킨을 만들어 보세요!.
참고한 블로그 : https://cktv.tistory.com/889
티스토리 북클럽 스킨 상단 이미지 영역 제거
티스토리 블로그 북클럽 스킨의 가독성을 높이기 위해서 다음과 같은 작업을 한다. ① 배경 이미지 제거 ② 북클럽 스킨 상단 포스트-커버(post-cover) 영역을 본문 영역 안으로 이동. ③ 상단 여백
cktv.tistory.com
관련글 바로가기
'▸티스토리 이야기/티스토리 꾸미기' 카테고리의 글 목록
'▸티스토리 이야기/티스토리 꾸미기' 카테고리의 글 목록
우리들의 일상 속 소소한 이야기를 나누고 티스토리 꾸미기 등도 함께 하는 공간이 되기를 바랍니다.
galam.tistory.com
티스토리 북클럽 스킨 꾸미기 모음집
'북클럽 스킨' 꾸미기 모음. 티스토리 블로그를 더욱 멋지고 매력적으로 꾸미고 싶으신가요? 이 글에서는 티스토리를 처음 시작하는 분들을 위해 다양한 '티스토리 꾸미기' 팁을 한곳에 모아 소
galam.tistory.com
"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받습니다"
