티스토리 소제목 꾸미기 CSS 설정

티스토리를 이제 막 시작하신 분들이라면, 다른 분들의 블로그가 예쁘게 꾸며진 걸 보고선

어떻게 했을까? 나도 하고 싶은데? 싶으셨죠?

 

오늘은 티스토리 소제목 꾸미기에 대해 알아보고자 합니다.

 

 

소제목 꾸미기를 서식에 저장해 두어 글 쓸 때마다 서식에서 불러와 작성할 수 있지만,

꾸미는 데 시간이 오래걸리면.. 블로그 글 쓰기 너무 힘들잖아요?

그래서 한 번 해두면 자동으로 바뀌는 CSS 설정으로 티스토리 소제목 꾸미기를 알려드리겠습니다.

 

정말 정말 간단해서 왕초보분들도 한 번에 따라 하실 수 있으니

3분 만에 티스토리 소제목을 내 입맛대로 바꿔보도록 해봅시다!

 

목차

 

 

1. 티스토리 소제목 꾸미기 방법

소제목 꾸미는 방법엔 2가지 방법이 있습니다.

 

1. 모든 게시글의 소제목을 변경하는 방법 - CSS 활용

2. 특정 게시글의 소제목을 변경하는 방법 - HTML 활용

 

블로그를 예쁘게 꾸미는 것도 중요하지만, 제일 중요한 건 블로그 글이죠?

그래서 꾸미는 시간을 아끼시려면 <1. 모든 게시글의 소제목을 변경하는 방법>을 추천합니다.

 

이 방법은 CSS를 활용해 변경이 가능합니다.

 

그러면 위와 같은 소제목이 자동으로 생성됩니다.

 

 

📌 특정 게시글의 소제목을 변경하는 방법은 HTML를 활용해 변경해야 하며,

게시글 작성할 때 매번 서식을 입력해줘야 하는 번거로움이 있습니다.

 

 

 

2. HTML 탭에서 본문 상위 Class 정보 찾기

CSS 파일을 수정하기 전에 먼저 본문 내용 ##_article_rep_desc_##를 감싸고 있는 class 명을 알아야 합니다.

 

##_article_rep_desc_##.txt

0.00MB

##_article_rep_desc_##

 

 

저는 고래 스킨 v4.1 사용 중인데, 같은 버전 사용 중이시라면 이 부분은 패스하셔도 됩니다.

 

 

설정 > 꾸미기 > 스킨 편집 > html 편집에 들어갑니다.

 

 

 

 

위 그림처럼 ctrl+F를 누른 후 ##_article_rep_desc_## 검색 후 바로 위에 뜨는 <div class=...>가 무엇인지 확인하면 됩니다.

고래스킨 사용자라면 저처럼 e-content, post-content 두 가지로 뜰 것입니다.

 

📌 북클럽 스킨 사용자이시라면 entry-content 라고 뜰 것입니다.

 

 

3. CSS에 코드 넣기

고래스킨 사용자라면 .post-content h1 를 검색하시면 되고,

그 외 사용자이시라면 아까 html에서 복사했던 영문을 붙여 넣기 합니다.

 

그리고는 바로 아래에 있는 소제목 꾸미기를 다운로드해 붙여 넣기를 하면 완료입니다.

 

소제목 꾸미기.txt

0.00MB

 

CSS - <.post-content h1> 검색

/* 제목1 - 소제목 */
.post-content h2 {
margin: 20px 0 15px 0;
padding: 15px 10px 15px 10px;
font-size: 1.4rem !important;
font-weight: 700 !important;
line-height: 1.35;
word-break: normal;
word-wrap: break-word;
/* 제목1 글자 색상 */
color:#000; 
/* 제목1 왼쪽 라인 */
border-left: none;
/* 제목1 상단 라인 */
border-top: 5px solid #070707;
/* 제목1 하단 라인 */ 
border-bottom: 2px solid #bbbbbb;
/* 제목1 배경색 */
background-color: #ffffff;
}

/* 제목2 - 소제목 */
.post-content h3 {
margin: 30px 0 15px 0;
padding: 10px 10px 10px 10px;
font-size: 1.2rem !important;
font-weight: 600 !important;
line-height: 1.35;
word-break: normal;
word-wrap: break-word;
color:#000;
/* 제목2 왼쪽 라인 */
border-left: 9px solid #010d7e;
/* 제목2 상단 라인 */
border-top: none;
/* 제목2 하단 라인 */
border-bottom: 2px solid #bbbbbb;
/* 제목2 배경색 */
background-color: #ffffff;
}

/* 제목3 - 소제목 */
.post-content h4 {
margin: 30px 0 15px 0;
padding: 5px 10px 5px 10px;
font-size: 1.1rem !important;
font-weight: 600 !important;
line-height: 1.35;
word-break: normal;
word-wrap: break-word;
color:#000;
/* 제목3 왼쪽 라인 */
border-left: 5px solid #858484;
/* 제목3 상단 라인 */
border-top: none;
/* 제목3 하단 라인 */
border-bottom: none;
/* 제목3 배경색 */
background-color: #ececec;
}

 

 

이렇게 코드를 넣고 완료하면 적용이 된 것입니다.

 

 

4. 글쓰기에 적용하기

글쓰기를 눌러 적용해 보도록 합시다.

매번 서식을 불러와 귀찮게 바꾸지 않아도, 한 번 해두면 알아서 자동으로 바뀌니 정말 편리합니다.

 

제목1, 제목2, 제목3으로 글을 쓰게 되면 위와 같이 보일 것입니다.

글쓰기 화면에서는 적용이 되지 않습니다.

 

아래의 미리 보기나, 글을 발행하면 적용된 모습을 보실 수 있습니다.

 

 

이렇게 실제로 적용된 모습입니다.

 

 

5. 내 입맛대로 변경하기

제가 만든 소제목 꾸미기가 마음에 드신다면 그대로 사용하셔도 좋지만,

마음에 들지 않아, 이 글을 나가기 하신다면 내 입맛대로 변경하는 방법에 대해 알려드리겠습니다.

 

📌 제가 만든 대로 사용하시려면 이 부분은 패스하셔도 됩니다!

 

다시 아까 CSS 화면에 들어가서 조정을 해주면 됩니다.

제목1, 제목2, 제목3 모두 본인이 맞게 조절해 주시면 됩니다.

 

📌 블로그 창을 하나 띄워놓고 새로고침하면서 바로 바뀌는 모습을 확인하면 더욱더 빠르게 변경하실 수 있습니다.

 

 

 

색상변경은 정말 간단하게 바꿀 수 있습니다.

색상 아이콘을 클릭하면 컬러팔레트가 뜨는데, 거기에서 원하시는 색상으로 변경하시면 됩니다.

 

 

 

 

티스토리 꾸미기 꿀팁⭐️

티스토리 링크 버튼 만들기 총정리

 

티스토리 자동 목차 만들기