티스토리 소제목 커스텀 여정 ✨ 한눈에스킨 적용 후기와 나만의 삽질기록

 

 

티스토리 스킨을 바꿔봤다.
#한눈에스킨 🎯

🔗 참고글:
한눈에스킨 무료 배포 및 다운로드 (toyou101.tistory.com)

 

깔끔하고 감성적인 첫인상이 그리고 SEO최적화 스킨이라 마음에 들어서 냉큼 적용했는데...
어라? 소제목(H3)이 전혀 눈에 띄질 않는다?! 😵‍💫

그래서 검색해봤다.
바로 티스토리 검색창에 [한눈에스킨 소제목] 입력!

---

 소제목 꾸미기 첫 도전! 북클럽 스킨의 벽 🧱

 

🔗 참고글:
티스토리 소제목 꾸미기 (galam.tistory.com)

티스토리 소제목 꾸미기(CSS 활용, 서식 활용)

 

수많은 소스들이 쏟아졌다.
진짜 하나같이 이쁘다. 이건 꼭 써야겠다 싶었는데...

🙃 알고 보니  북클럽 스킨 기반
나는 한눈에스킨 사용자라 적용이 애매하다.

그나마 희망을 걸었던 건 entry-content
하지만 아무리 검색해도 안 나온다.
그 순간의 내 모습... ↘

“왜 없지?!!!” 😭

 

---

2️⃣ 소제목 스타일링에 대한 욕심… 그리고 검색 또 검색 🔍

 

🔗 참고글:
제목(h2/h3/h4) 스타일 바꾸는 법 (flexbox.tistory.com)

티스토리 제목(h2, h3, h4) 글자크기 바꾸는 방법

 

소제목에 대한 미련은 쉽게 버릴 수 없었다.
#한눈에스킨 소제목 관련 글들을 다시 찾았다.

h3으로 조회했을 때 나왔던 부분이 소제목을 수정하는 부분이 맞았다. 

.post-content h3 { 으로 검색을 하면 나오는데 

한눈의 스킨의 경우 

h3와 h4가 같은 스타일로 묶여 있어서 구분이 어렵다는 점이다. 

그래서 h3과 h3을 나눴다. 

.post-content h3 {
margin-bottom:15px;
margin-top:15px;
font-size:1.3rem;
word-break:normal;
word-wrap:break-word;
}
 
.post-content h4 {
margin-bottom:10px;
margin-top:15px;
font-size:1.1rem;
word-break:normal;
word-wrap:break-word;
}

 

출처:

🔗 참고글:
제목(h2/h3/h4) 스타일 바꾸는 법 (flexbox.tistory.com)

 

---

3️⃣ 구글까지 갔던 나의 집념 🧭

마지막 희망은 구글 검색이었다.
이번엔 [고래스킨]의 CSS를 가져와서 소제목 스타일링을 적용한 글을 발견했다!

🔗 참고글:
한눈에 스킨 소제목 스타일링 (digiblo.tistory.com)

한눈에 스킨 소제목 스타일링, 나만의 컬러를 입히다 (h1, h2, h3)

 

이미 위의 글에서 h3, h4를 나눴기 때문에 CSS 적용하기가 쉬웠다. 

 

덕분에 나도 간단히(?) 적용 성공 🎉 

만 하루가 걸렸다..하루가 걸렸다..또로록.. 

 

하지만 지금도 CSS는 참 어렵다...

 

---

💡 배운 점 & 마무리 팁

• HTML 서식을 활용하면 굉장히 예쁘게 소제목을 꾸밀 수 있다.

📌 참고로, 예쁜 소제목 서식 모음집은 여기서 확인 가능해요!
🔗 소제목 꾸미기 SET 10 모음 (galam.tistory.com)

티스토리 꾸미기 | 소제목 'SET10' 모음집

 

지지고 볶고 또 볶고... 

1번과 3번을 혼합을 했더니 뭐가 맞는지는 아직 잘 모르겠다가 함정.. 

 

.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;
  border-radius: 0px 20px 20px 0px;
  padding: 0.5em 1em 0.5em 0.5em; 
  background: #fdf2f1; 
  border-left: 10px solid #c2bab9; 
  margin: 0.5em 0em; 
  color: #f54f3d; 
  font-weight: bold;

}

/* 제목2 - 소제목 */
.post-content h3 {
COLOR: #31373f;
PADDING-BOTTOM: 10px;
TEXT-ALIGN: left;
BORDER-LEFT: #0e0aec 10px solid;
padding: 3px 9px;
margin: 30px 0 20px 0;
BACKGROUND-COLOR: #FFF;
BORDER-BOTTOM: 2px solid #0e0aec;
font-size: 1.25em;
font-weight: 700;
}

/* 제목3 - 소제목 */
.post-content h4 {
 display: inline-block; 
 padding: 0.5em 2em 0.5em 0.6em; 
 margin: 0.5em 0em; 
 border-left: 10px solid #9F3311; 
 background-color: #e1ee6dd5; 
 border-radius: 0px 20px 20px 0px; 
 font-weight: bold; 
 color: #000;
 data-ke-size:size20;
 word-break: normal;
 word-wrap: break-word;
}

 

기존 서식을 잘 보관해두면 다시 커스터마이징할 때 유용하다.

.post-content h2 {
	margin-bottom:15px;
	margin-top:15px;
	font-size:1.2rem;
	padding-left:0.75rem;
	word-break:normal;
	word-wrap:break-word;
	border-left:5px solid #b5d5e8
}
.post-content h3 {
	margin-bottom:15px;
	margin-top:15px;
	font-size:1.3rem;
	word-break:normal;
	word-wrap:break-word;
}
 
.post-content h4 {
	margin-bottom:10px;
	margin-top:15px;
	font-size:1.1rem;
	word-break:normal;
	word-wrap:break-word;
}

• CSS를 전혀 몰라도 가능하다! 하지만 알면 확실히 더 즐겁다 😊

 

 

시간이 좀 걸렸지만,
이번 경험 덕분에 스킨 커스텀의 재미를 제대로 느낄 수 있었다.

 

+

 

본문 2

본문 1 

본문 3 

제목 1

제목 2 

제목 3 

 

 

혹시 저처럼 #한눈에스킨 사용 중이고,
소제목 스타일에 아쉬움이 있었다면
👀 위 링크들을 찬찬히 살펴보길 추천드려요!

 

💬 여러분은 어떤 스킨을 사용하고 계신가요?
소제목 꾸미기 노하우가 있다면 댓글로 나눠주세요 💕