워드프레스 블로그 제목이랑 소제목 꾸미는 방법을 알아보겠습니다. 워드프레스나 티스토리 블로그는 가독성을 높이기 위해서 소제목을 꾸미는데요. 둘 모두 사용할 수 있는 방법인데 간단하게 CSS를 추가해주기만 하면됩니다.
위에 사진은 지금 워드프레스에서 사용하는 소제목인데요. h1 ~ h4까지 제목을 설정하기만 하면 자동으로 적용할 수 있습니다.
1.워드프레스 관리자 페이지에서 [외모] – [사용자 정의하기]에서 메뉴에 [CSS]에 들어가 주세요.
2. CSS설정에서 CSS 코드를 추가해주시면 되는데요. (아래에 코드를 넣어주시면 됩니다.)
/* 소제목 시작 */
.single .entry-content h1 {
margin: 1.15em 0 0.6em 0;
font-weight: normal;
position: relative;
font-size: 25px;
line-height: 40px;
background: #007CBA;
border: 1px solid #fff;
padding: 5px 15px;
color: white;
border-radius: 0 10px 0 10px;
box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);
font-family: 'Muli', sans-serif;
}
.single .entry-content h2 {
margin: 1.15em 0 0.6em 0;
font-weight: normal;
position: relative;
font-size: 25px;
line-height: 40px;
background: #007CBA;
border: 1px solid #fff;
padding: 5px 15px;
color: white;
border-radius: 0 10px 0 10px;
box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);
font-family: 'Muli', sans-serif;
}
.single .entry-content h3 {
COLOR: #124875;
PADDING-BOTTOM: 10px;
TEXT-ALIGN: left;
BORDER-LEFT: #18609C 10px solid;
padding: 3px 9px;
margin: 30px 0 20px 0;
BACKGROUND-COLOR: #FFF;
BORDER-BOTTOM: 2px solid #18609C;
font-size: 1.2em;
font-weight: 700;
}
.single .entry-content h4 {
COLOR: #124875;
PADDING-BOTTOM: 10px;
TEXT-ALIGN: left;
BORDER-LEFT: #18609C 10px solid;
padding: 3px 9px;
margin: 30px 0 20px 0;
BACKGROUND-COLOR: #FFF;
font-size: 1.2em;
font-weight: 700;
}
/* 소제목 끝 */티스토리(https://www.tistory.com/)에도 html편집에 CSS에 위에 코드를 넣으면 적용할 수 있습니다. background 색상과 글자 크기 라운드 사이즈 모두 자신에 맞게 조절해서 사용하시면 됩니다.
◦GeneratePress 테마 상단 메뉴바 색상 변경 방법
◦GeneratePress 테마 글자 크기 문단 사이 간격 변경 방법
