티스토리 고래 스킨 소제목 스타일 변경하기

이 블로그에서 티스토리의 소제목 스타일을 변경하는 방법에 대해 설명한 적이 있어 중복이라서 굳이 다루지 않았지만 고래 스킨에서 소제목 스타일을 지정하는 방법에 대한 문의가 간혹 있어 정리해보았습니다.

티스토리 고래 스킨 소제목 스타일 변경하기 (머리말 스타일)

소제목 스타일을 지정하는 방법은 기본적인 CSS를 알면 그리 어렵지 않게 가능합니다. 현재 이 블로그에는 다음과 같은 스타일로 소제목(머리말)이 표시됩니다.

이 스타일은 어떤 티스토리 블로그를 통해 공개된 CSS를 기반으로 한 것입니다. 지금은 그 블로그를 찾아보려고 하니 검색이 잘 안 되네요.

티스토리 고래 스킨에서 위와 비슷하게 소제목 (머리말, 헤딩) 스타일을 지정하려면 다음과 같은 CSS 코드를 사용하면 됩니다.

/* 티스토리 고래 스킨 소제목 스타일 */
.post-content h2 {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
COLOR: #666;
PADDING-BOTTOM: 10px;
TEXT-ALIGN: left;
BORDER-LEFT: #55555B 8px solid;
padding: 3px 9px;
margin: 30px 0 20px 0;
BACKGROUND-COLOR: #FFF;
BORDER-BOTTOM: 1px solid #000;
}


.post-content h3 {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
COLOR: #2E86B9;
PADDING-BOTTOM: 10px;
TEXT-ALIGN: left;
border-left: rgba(85, 85, 91, 0.5882352941176471) 8px solid;
padding: 3px 9px;
BACKGROUND-COLOR: #FFF;
border-bottom: 1px solid rgba(85, 85, 91, 0.5882352941176471);
margin-bottom: 15px;
}

.post-content h4 {
padding: 3px 9px;
border-left: 5px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
margin-bottom: 15px;
}

이 코드 스니펫은 다음 글의 "티스토리 소제목 (헤딩) 스타일 변경" 섹션에서 소개한 코드와 사실상 동일합니다. 아래 글에서는 북클럽 스킨에서 소제목 스타일을 변경하는 방법이 설명되어 있습니다. 다른 스킨에서도 비슷한 방법으로 가능합니다.

티스토리에 목차 표시하는 방법 (북클럽 스킨)

기본적인 CSS 사용법을 익히면 블로그 꾸미기 작업이 수월해질 것입니다.ㅎ CSS를 사용하여 글자 크기, 글자색, 배경색 등을 자유롭게 변경이 가능합니다.

티스토리 블로그에 사용자 CSS 코드 추가하기

위의 CSS 코드는 꾸미기 > 스킨 편집 > html 편집 > CSS 탭의 맨 아래에 추가하도록 합니다.

 티스토리 스킨 편집

컬러나 테두리선 굵기 등은 적절히 변경하시기 바랍니다. CSS 컬러 값은 다음 W3Schools 문서를 참고해보세요.

CSS Colors

테두리 선의 컬러를 변경하고 싶을 때 위의 문서에서 마음에 드는 색상 값을 선택하여 대체하시기 바랍니다.

워드프레스 소제목 스타일 변경하기

위에 제시된 CSS 코드 스니펫은 워드프레스 사이트에도 비슷한 방법으로 적용이 가능합니다. 예를 들어, 인기 워드프레스 매거진 테마인 뉴스페이퍼 (Newspaper)의 소제목 (헤딩 태그) 스타일을 변경하려는 경우 다음 글을 참고해보세요.

워드프레스 뉴스페이퍼 테마: 소제목 (h2, h3, h4) 태그 스타일

참고

https://avada.tistory.com/719

워드프레스와 티스토리 블로그로 돈 버는 방법

https://avada.tistory.com/1789

티스토리 블로그 고래 3.4 스킨에 목차 자동 생성하는 방법

 

https://avada.tistory.com/1828

티스토리 스킨 고래 스킨 4.0으로 변경