북 클럽 스킨이 인기가 많은데 은근히 글 제목 스타일을 바꾸고 싶어하시는 분이 많으셔서 정리 좀 해 보았습니다.
목차
글 제목 이미지 제거하기
먼저 이미지를 나오지 않게 하기 위한 작업을 진행해 보겠습니다.
관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.
html 편집을 클릭합니다.
그럼 위외 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다.
CTRL+F를 눌러 s_permalink_article_rep 태그를 찾고 그 하위에 있는 <div class="post-cover" 어쩌구> 부분을 삭제하거나 아래와 같이 주석처리 합니다. 그리고 그 밑에 <div class="post-cover"> 를 새로 작성합니다.
<!-- 생략 -->
<s_permalink_article_rep>
<!-- <div class="post-cover"<s_article_rep_thumbnail> style="background-image:url([##_article_rep_thumbnail_raw_url_##])"</s_article_rep_thumbnail>> -->
<div class="post-cover">
<!-- 생략 -->
</s_permalink_article_rep>
<!-- 생략 -->
그럼 더 이상 이미지는 나오지 않게 됩니다.
CSS 수정도 좀 더 해보겠습니다.
관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > CSS 탭으로 이동합니다.
마찬가지로 CTRL+F를 눌러 .post-cover 부분을 찾습니다. 필요없는 스타일을 과감히 날리거나 다음과 같이 주석 처리 합니다.
.post-cover {
position: relative;
z-index: 20;
display: table;
width: 100%;
/* height: 340px;
background-color: #cbcbcb;
background-position: 50% 50%;
background-size: cover;
box-sizing: border-box; */
}
이 부분에서는 background-color의 색상과 투명도를 자신의 취향에 따라 조절할 수 있습니다.
.post-cover:before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5); /* 이 부분에서 색상, 투명도 조절하시면 됩니다 */
}
절대 위치 제거
그리고 또 하나 거슬리는 점이 제목이 절대 위치를 차지하고 있다는 점인데요. 다음 부분을 찾아 수정해 주면 됩니다. position 속성을 relative로 고쳐줘도 되고 과감히 날리거나 다음과 같이 주석처리 해 주어도 됩니다.
#tt-body-page .post-cover {
/* position: absolute; */
top: -1px;
left: 0;
width: 100%;
}
그리고 다음 부분의 padding-top 속성을 제거하여 절대 위치였을 때 필요했던 위쪽 빈 공간을 없애도록 하구요.
#tt-body-page #container {
/* padding-top: 339px; */
}
마찬가지로 제목 아래 빈 공간이 생겨 보기가 흉하므로 padding-bottom 속성을 없애 주도록 합니다. 그리고 제목 박스 전체 padding 속성 값을 10px 추가하였습니다.
.post-cover .inner {
display: table-cell;
position: relative;
z-index: 10;
vertical-align: bottom;
/* padding-bottom: 78px; */
padding: 10px;
}
다음으로 너비가 1080px 이하일 경우에 따로 값을 주지 않기 위해 주석 처리 하였구요.
@media screen and (max-width:1080px) {
.post-cover {
/* padding-left: 24px;
padding-right: 24px; */
}
}
너비가 767px 이하일 때도 마찬가지로 주석 처리해 주었습니다.
@media screen and (max-width: 767px) {
.post-cover {
/* padding-left: 24px;
padding-right: 24px; */
}
.post-cover .inner {
/* padding-bottom: 38px; */
vertical-align: bottom;
}
}
결과 확인
제목의 위치가 깔끔하게 변경되었습니다. 취향에 따라 좀 더 꾸미시는 건 각자의 몫으로 남기겠습니다. CSS 문법에 대한 기본적인 사항만 공부해도 본인 블로그를 좀 더 예쁘게 꾸밀 수 있기 때문에 한 번 알아 두시면 손해는 아닐거예요 ㅎㅎ
모바일 사이즈에서도 깔끔하게 보이는군요.
더 궁금하신 점은 댓글로 부탁 드립니다.
감사합니다 :)
다음 게시물도 참고해 보세요.
티스토리 북 클럽 스킨 댓글 및 메뉴 오류 수정하기
북 클럽(Book Club) 스킨이 심플하고 예뻐서 사용자가 많은 반면 곳곳에 오류가 있어서 깔끔하지 못하죠. 구독자님들 블로그를 방문하여 보니 스킨에 존재하는 오류를 그대로 갖고 계신 분이 많은
sangminem.tistory.com
'정보 > 블로그 운영팁' 카테고리의 다른 글
티스토리 본문에 적용된 글꼴 무시하는 방법 (0) | 2021.04.03 |
---|---|
티스토리 스크롤 시 글 위치 표시 프로그레스바 간단하게 만들기 (20) | 2021.03.09 |
티스토리 목차 완전 자동으로 생성하기 (서식 저장 불필요) (71) | 2021.02.27 |
티스토리 스크롤 자연스럽게 이동하기 (3) | 2021.02.24 |
북 클럽 스킨 상단 글 제목 배경 이미지 제거 및 스타일 변경하기 (20) | 2021.02.22 |
티스토리 공감 클릭 시 고마움 표시하기 (19) | 2021.02.22 |
티스토리 목차 링크 클립보드 복사하기 (4) | 2021.02.20 |
티스토리 토스트 알림 팝업 기능 만들기 (4) | 2021.02.20 |
티스토리 글 열람 즉시 원하는 제목 내용으로 이동하기 (4) | 2021.02.14 |
비밀댓글입니다
답글
안녕하세요.
1. 에디터에서 그렇게 지원하는 것이므로 제가 어찌하기는 어렵습니다. h1으로 사용하시려는 이유가 있는건가요?
2. 크게 관련 없을 것 같습니다.
3. 그런 규정이 있는건 아니고 단지 티스토리에서 글 타이틀을 h1으로 하고 있고 글 내용 안에서 사용하는 제목은 h2부터 지원하도록 정해 놓은 건데 굳이 이 틀을 바꿀 필요는 없어 보입니다.
감사합니다.
비밀댓글입니다
답글
아마 찾아보신 내용에 그런 말이 적혀 있으면 관련이 있긴 할 거예요.
다만 티스토리에서 h2부터 정해놓은 이유도 분명 있을텐데.. 검색에 불리하게 정책을 쓰진 않았을거 같다는게 제 추측이구요.
그 부분은 나중에 좀 더 찾아 보고 말씀드릴게요~
좀 찾아보니 다음과 같은 내용이 있네요.
------------------
HTML구조에서 제목, 소제목 및 단락을 기술하는 개념이며, ① 웹페이지 내 h1, h2 태그는 아래 그림과 같은 위치에 심어주면 됩니다. Head Tag를 적절하게 사용하여 "웹사이트의 주제"를 알기 쉽게 작성해서 검색 엔진과 사용자가 정보를 제대로 알 수 있도록 해주어야 합니다. 웹문서를 잡아주는 “가장 기본적인 골격”이기 때문에 SEO 최적화에 가장 중요한 요소 중 하나입니다. 이때! 페이지의 구조를 크기순으로 배치하는것이 중요하며, H1 -> H2 태그의 순으로 크기와 중요도가 낮아집니다. "H1태그는 가장 큰 제목(대주제)"이기 때문에 반드시 적용해야합니다! H1은 1개, H2는 3개까지만 작성하는 것이 키워드 밀도를 제어해서 핵심키워드를 강조하기 때문에 많을 필요가 없습니다.
------------------
h1은 1개만, h2는 3개까지 작성하는 것이 가장 좋다는 설명 같습니다. 참고하세요~
[출처]
https://www.next-t.co.kr/blog/2021%EB%85%84-seo%EC%B4%9D%EC%A0%95%EB%A6%AC%EA%B0%80%EC%9D%B4%EB%93%9C-1
비밀댓글입니다
아뇨 ㅎㅎ 글 제목이 이미 h1 입니다
비밀댓글입니다
네네~ 계속 그 얘기였습니다 ㅎㅎ
ㅋㅋㅋㅋㅋㅋㅋ 오늘도 o_o 이 표정으로 읽고갑니다. 공감 누르면 뜨는 사랑합니다 너무 탐나는...
답글
도전해 보세요 하다 막히면 알려드릴게요 ㅋㅋㅋ 진짜 대신 해주고 싶네요 ㅋㅋ
뭔가 미세조정이 아쉽다 그런느낌이 있었는데 해봐야겠습니다!!
답글
봐도 모르겠네요 ㅜㅜ 너무 어려워요! 하지만 너무 유익하고 좋은정보입니다! 앞으로 블로그 공부 좀 많이 해야할것 같아요! 유익한 정보 많이 부탁드립니다! ^^ 구독을 아니할수 없네요
답글
정보 감사 합니다. 다른이 아니라 Bing 서치 콘설에 사이트 SEO 검사해주는 항목이 있는데, H1이 2개라고 하는데, 이게 스킨 문제인지, 빈 검사 문제인지. 제목 자체가 H1이라 H1을 쓰지 않았는데 그렇네요. 참고로 제 사이트 입니다. 혹시 이런 문제에 대해 좀 아시면 답변 주시면 감사 하겠습니다 .https://tripeditor.tistory.com/entry/%EC%9D%BC%EB%B3%B8-%EC%9B%8C%ED%82%B9%ED%99%80%EB%A6%AC%EB%8D%B0%EC%9D%B4-%EC%BD%94%EB%A1%9C%EB%82%98-%EB%B0%B1%EC%8B%A0-%EB%B9%84%EC%83%81%EC%82%AC%ED%83%9C
답글
안녕하세요.
확인해 보니 실제로 h1 태그가 2개 존재하네요.
맨 위에 있는 Guides's Traveling에 불필요하게 h1 태그가 사용되었습니다.
아 정말 감사 합니다. 다시 확인해 보겠습니다.
답글
블로그 새로 생성하고 가르침대로 적용했습니다.
제일 아쉬웠던 부분인데 속이 다 시원하네요.
감사합니다.
잘 활용하겠습니다.
답글
안녕하세요~
도움이 되셨다니 기쁘네요 ㅎㅎ
좋은 하루 보내세요 :)
비밀댓글입니다
답글
감사합니다 ㅎㅎ 저도 아직 모르는 부분이 많은데 좀 더 파악해서 다음 스킨은 더 깔끔하게 만들어 볼 예정이에요 :)