티스토리 제목 스타일 만들기

티스토리에서 글을 쓰다보면 제목1, 제목2, 제목3을 이용해서 제목 표시를 많이 하게 됩니다. 특히 구글 SEO에 맞춰서 포스팅을 하기 위해서 꼭 필요한데, 기본 스타일은 단지 글자 크기와 상하 여백의 조정에만 그치기 때문에 조금 더 눈에 두드러지는 제목을 만들기 위해서는 CSS를 만들어주는 것이 좋습니다.

 

제목 스타일 만들기

 

아래와 같은 스타일로 제목 스타일을 만들 계획입니다.

제목 스타일

티스토리 에디터에서는 아래와 같이 제목1입니다. 제목2입니다. 제목3입니다의 폰트 사이즈 변화만 있는 것으로 나옵니다. 실제로 아무런 CSS 스타일 지정을 안하면 저 모습 그대로 화면에 표출됩니다. 

 

그런 경우 본문1과 제목2, 제목3의 구분이 잘 되지 않는 경우도 많이 있습니다. 그래서 위에 있는 것과 같은 형태로 많은 분들이 스타일 지정을 해서 사용하시죠.

에디터에서의 모습

 

제목 CSS 스타일 코드

 

아래의 코드를 관리자메뉴 ⇒ 스킨편집 ⇒ HTML 편집 ⇒ CSS편집으로 가서 나오는 페이지에서 가장 하단에 붙여 넣습니다. 가장 하단에 하는 이유는 기존의 CSS를 건들지 않기 위해서입니다. 

HTML편집 위치

CSS편집

 

제목 CSS코드입니다.

/* 글 제목 스타일 */
.tt_article_useless_p_margin h2 {
	text-align: left;
	border-left: #517135 12px solid;
	border-bottom: 1px solid #517135;
	padding: 3px 0 10px 10px;
	margin: 30px 0 20px 0;
}
.tt_article_useless_p_margin h3 {
	text-align: left;
	border-left: #548a25 8px solid;
	border-bottom: 1px solid #548a25;
	padding: 3px 0 10px 10px;
	margin-bottom: 15px;
}
.tt_article_useless_p_margin h4 {
	text-align: left;
	border-left: #71b932 6px solid;
	border-bottom: 1px solid #71b932;
	padding: 3px 0 10px 10px;
	margin-bottom: 15px;
}

 

기존에 아무런 서식 지정이 안 되어 있던 분들이라면 저 내용을 CSS 맨 아래에 삽입하는 것만으로도 제가 예시로 들었던 형태의 제목 스타일 서식이 자동으로 생성됩니다.

 

이후에 글을 작성할 때는 별도로 서식에서 불러올 필요 없이, 제목1~3을 골라서 선택하면 발행 이후 자동으로 적용된 스타일을 확인할 수 있습니다.

 

서식으로 활용하는 것보다 훨씬 편한 이 방식의 활용을 추천드립니다.