티스토리 I 카테고리 목록 '뉴북' 소제목 스타일 변경하기

홈 화면의 최신 글 포스트 헤더 꾸미기

포스트 헤더를 소제목 스타일로 세련되게 변경하는 방법을 간결하게 정리해 보았습니다. 북클럽 스킨을 기준으로 작성했지만, 다른 스킨에서도 적용할 수 있는 일반적인 코드입니다:

[📌 코드 수정 시 주의사항은 아래 '더보기'를 참고하세요.]

1. 스킨 저장.

스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.

스킨을 백업하려면, 블로그 관리자 > 꾸미기 > 스킨 변경을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.

2. [Ctrl] + [F]를 사용할 때.

먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.

뉴북과 복리뷰의 포스트 헤더 스타일 변경하기 (2025.03.17 수정)

뉴북 구분선 제거

최신글에서 뉴북을 설정하면 복리뷰에선 나타나지 않던 구분선 보입니다. 이 구분선은 제거해도 뉴북과 복리뷰의 스타일 꾸미기에 전혀 영향을 미치지 않으니, 과감히 제거하겠습니다.

1) '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS'로 들어갑니다.

2) [Ctrl] + [F]를 이용해 .list-type-thumbnail .post-header {를 검색합니다.

.list-type-thumbnail .post-header {

3) 주석을 이용해 구분선 여백과 구분선을 숨겨준 후 [적용]을 눌러 '저장'합니다.

.list-type-thumbnail .post-header {
  margin-bottom: 28px;
/* padding-bottom: 18px;
  border-bottom: 1px solid #eee; */
}

뉴북, 복리뷰 공통 스타일 코드

1) [Ctrl] + [F]를 이용해 .post-header h1 {를 검색합니다.

.post-header h1 {

2) .post-header h1 { 하단에 스타일 코드를 넣어준 후 [적용]을 눌러 '저징'합니다.

  /* 스타일 코드 추가 */
  padding: 9px 0 9px;
  border-top: 2px solid #bbb;
  border-bottom: 1px dotted #bbb;

뉴북, 복리뷰 적용 예제

CSS 스타일 코드

  /* 스타일 코드 추가 */
  padding: 15px; /* 내부 여백 */
  border-radius: 10px 10px 10px 1px; /* 모서리 */
  background: linear-gradient(to right,#18408a,#800080); /*배경색*/
  color: #ffff; /*글색*/

  /* 스타일 코드 추가 */
  padding: 15px; /* 내부 여백 */
  border-radius: 10px 0px 10px 0px; /* 모서리 */
  background-color:#333; /* 배경색 */
  color: #ffff; /*글색*/

  /* 스타일 코드 추가 */
  padding: 10px; /* 내부 여백 */
  background-color: #ececff; /* 배경색 */
  border-style: solid; /* 선 스타일 */
  border-color: #6c7ae0; /* 선 색상 */
  border-width: 5px 0px 2px 0px; /* 선 위치 굵기 */

728x90