티스토리 블로그 제목 자동으로 꾸미는 방법 꿀팁

티스토리를 사용하다 보면 타이틀 즉 본문 안의 제목을 한눈에 들어오게 하고 싶을 것입니다. 단순히 글자만 쓰기보다 제목을 강조할 수 있는 것을 넣으면 아무래도 시선이 가기 때문에 티스토리 블로그 제목을 꾸미는 간단한 방법에 대해 꿀팁을 알려드리겠습니다.

 

티스토리 블로그 제목 꾸미는 방법

 

제목을 꾸밀 수 있는 방법은 여러 가지가 있습니다. 제목을 이미지로 만들어서 넣을 수도 있지만 이미지를 만드는 것은 시간이 많이 걸리고 번거로운 작업입니다. 그러기 때문에 웹에서는 css를 이용하여 디자인을 줄 수가 있는데, 여기서도 css를 이용하여 제목을 꾸밀 수 있는 방법을 알려드리겠습니다.

style="border-left:15px solid #4F4F4F;border-bottom:2px solid #4F4F4F;padding:0 0 3px 8px;"

제목이 들어가는 부분에 위에처럼 스타일을 줄 수가 있습니다. 그러면 위의 제목처럼 왼쪽 바와 하단의 라인이 생기는 타이틀이 생기게 됩니다. 색상을 변경하기 위해서는 #4F4F4F를 다른 색상코드로 변경하면 원하는 색상으로 변경을 할 수가 있습니다.

 

하지만 소단위 제목이 많을 경우 위에처럼 html 편집기에 들어가서 모든 소제목에 위의 스타일 코드를 넣어주는 것은 번거로운 일일 것입니다. 그런 경우 제목을 만들 때 자동으로 생성되도록 만들 수가 있습니다.

 

제목 디자인 자동으로 꾸미는 방법

 

먼저 티스토리 관리자 모드로 들어간 후 스킨편집 메뉴를 선택합니다.

 

스킨편집화면으로 들어간 후 우측 상단의 html편집 버튼을 눌러줍니다. 

 

CSS편집기를 선택하면 티스토리 스킨의 CSS를 편집할 수 있는 코드가 나옵니다. 여기서 .entry-content를 검색하여 위치를 찾습니다. 여기는 티스토리에서 글을 작성할 때 제목1~제목3까지 코드가 나옵니다. h2는 제목2, h3는 제목3, h4는 제목4를 나타냅니다. 

 

본문에서 제목1은 제일 큰 사이즈의 글씨크기로 h2에 해당되는 css를 수정해야 합니다. 마찬가지로 제목2에 해당하는 h3는 h3의 css를 수정하면 됩니다.

 

.entry-content h2{
	clear : both;
	margin : 29px 0 22px;
	font-size : 1.5em;
	border-left:15px solid #4F4F4F;
	border-bottom : 2px solid #4F4F4F;
	padding : 0 0 3px 8px;
}

.entry-content h3{
	clear : both;
	margin : 29px 0 22px;
	font-size : 1.3em;
	border-left:15px solid #4F4F4F;
	padding-left : 13px;
}

h2, h3에 대해 css편집을 함으로써 블로그에서 글을 쓸때 html 편집모드에서 일일이 수정하지 않아도 자동으로 제목이 꾸며질 수 있습니다. 

 

꼭 위의 제목에 해당되는 css디자인이 아니더라도 다양한 디자인을 css 코드에 적용함으로써 눈길이 가는 소제목 디자인을 구성할 수가 있을 것입니다.