본문 바로가기
Blog

티스토리 소제목 꾸미기 - h1, h2, h3, h4 태그에 css 적용

by 월급쟁이 자유인 2022. 5. 10.
반응형

티스토리 스킨 중에 h1, h2, h3, h4 태그가 밋밋한 경우가 많이 있습니다. 발행된 글을 보면 소제목이라고 붙여 넣었지만 중간에 글자만 조금 클 뿐 소제목으로 와닿지 않는 경우가 많은데요. 이 경우 스킨 편집에서 css만 적용해도 소제목처럼 보이게 만들 수 있습니다.

예를 들어 이런식으로 '애플 3m 썬더볼트 4 프로 케이블' 이라는 소제목과 '썬더볼트 4'라는 소제목이 있습니다. 본문에 비해서 글자가 조금 더 크고 볼드 처리되어 있을 뿐 소제목이라는 느낌이 확 와닿지 않습니다.

티스토리 소제목 꾸미기

티스토리 스킨 편집 기능을 이용해서 소제목을 좀 더 소제목처럼 보이게 만들 수 있습니다.

티스토리 관리 메뉴에서 '스킨편집'을 들어가서 html 편집을 누릅니다. CSS 탭을 찾아들어가서 '.entry-content' 항목을 찾습니다.

/* Entry Content */
.entry-content h1 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.6875em;
	line-height: 1.5;
	color: #000;
}
.entry-content h2 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.5em;
	line-height: 1.5;
	color: #000;
	border-bottom:2px solid #333333;
	border-left:10px solid #333333;
	padding: 5px 15px;
}
.entry-content h3 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.3125em;
	line-height: 1.5;
	color: #000;
	border-bottom:2px solid #333333;
	border-left:10px solid #333333;
	padding: 5px 15px;
}
.entry-content h4 {
	clear: both;
	margin: 29px 0 22px;
	font-weight: 400;
	font-size: 1.125em;
	line-height: 1.5;
	color: #000;
	border-bottom:2px solid #333333;
	border-left:10px solid #333333;
	padding: 5px 15px;
}

저는 이렇게 수정을 해놨는데요. border-bottom, border-left 항목을 수정해가면서 스타일을 조금씩 바꿀 수 있습니다. 이 스타일이 적용되면

이런식으로 소제목이 좀 더 소제목처럼 보이게 됩니다. 소제목을 이런식으로 구성해두면 글의 가독성이 조금더 좋아지게 됩니다.

반응형

댓글1

  • 바니 2022.08.05 21:49

    안녕하세요! 알려주신대로 h2에 적용하여 컴퓨터에서는 잘 적용이 된것 같은데 모바일에서 확인 할땐 전혀 보이질 않네요.. 모바일용 설정을 따로 해야 할까요??
    답글