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

2020. 7. 15. 00:01 | 댓글 13

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

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

소제목 스타일을 지정하는 방법은 기본적인 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;
}

이 코드 스니펫은 다음 글의 "티스토리 소제목 (헤딩) 스타일 변경" 섹션에서 소개한 코드와 사실상 동일합니다.

 

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

티스토리에는 모든 글에 자동으로 목차를 표시하는 방법은 없지만, 원하는 글에 자동으로 목차를 삽입할 수 있습니다. 헤딩 태그를 인식하여 자동으로 목차를 생성하는 jQuery를 사용할 수 있습��

avada.tistory.com

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

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

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

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

 

CSS Colors

CSS Colors Color Names Supported by All Browsers All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors): For a full overview of CSS color

www.w3schools.com

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

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

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

 

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

제 워드프레스 블로그에는 현재 인기 매거진 테마인 뉴스페이퍼 (Newspaper) 테마가 설치되어 있습니다. 뉴스페이퍼 테마는 콘텐츠가 많은 블로그나 뉴스, 매거진 사이트에 적합한 것 같습니다. 워

avada.tistory.com

참고

https://avada.tistory.com/719

 

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

어떤 글을 보니 티스토리 블로그로 하루에 50만 원씩 벌겠다는 야심찬 계획을 가지고 블로그를 시작하는 분이 계시네요. 목표는 하루 10만 명 방문자를 유치하여 구글 애드센스로 일 50만 원을 벌

avada.tistory.com

https://avada.tistory.com/1789

 

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

하루일기 님이 티스토리 스킨 중 하나인 고래 3.4에서 목차가 생성되지 않는 문제가 발생한다고 하여 고래 3.4 스킨에서 목차를 적용하는 방법에 대해 간단히 정리해보았습니다. 티스토리 블로그

avada.tistory.com

 

https://avada.tistory.com/1828

 

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

작년 8월 말부터 공식 티스토리 스킨 중 하나인 북클럽 스킨을 사용하다 며칠 전에 티스토리 무료 스킨인 고래 스킨으로 변경했습니다. 이 스킨은 네이버, 구글 검색 엔진에 최적화되어 있고 구�

avada.tistory.com

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    공수래공수거

    시간 여유가 되면 CSS 배워 보는것도 좋을듯 합니다^^

  2. thumbnail
    바밸 : 균형-건강을 위한 시작

    잘보고 가요 구독합니다^^

  3. thumbnail
    아믹달라

    우와. 내가 봤던 블로그들이 저런 디자인 많이하던데. 다 이유가!!!! 크크.

  4. thumbnail
    파이낸셜 노마드

    css 제일 밑에 붙였는데 그다음에는 어떻게 이용해야할지 모르겟어요

  5. thumbnail
    파이낸셜 노마드

    네 저도 고래스킨쓰고있어요.
    아 저기 포스팅내용중에 /body 위에 붙이는건 안하고 그냥 css아래만 붙이면 되나요?