워드프레스 제목 스타일 변경하기

워드프레스 소제목

워드프레스 글에서 제목을 지정하면, h2,h3,h4 등 제목의 종류를 지정해 줄수있는데요. 이를 통틀어서 소제목이라고 합니다.

소제목 스타일 변경목적

소제목을 그대로 쓰면 seo등 장점도 많고, 보기에도 참 좋은데요. 디자인적으로 일체감을 주기 때문에 보는이로 하여금 잘 정돈된 느낌을 줍니다. 아래그림과같이 테두리를 사용해 깔끔하고 정돈된 느낌을 줍니다.

소제목 스타일 변경 방법

워드프레스 관리자 접속후 외모 > 사용자 정의하기 > 추가CSS 에 아래 내용을 붙혀넣으면 됩니다.

/소제목 스타일 변경 시작/
.single .entry-content h1 { font-weight: 700; font-size: 32px; line-height: 1.5; color: #1a202c; }
.single .entry-content h2 { margin: 1.15em 0 0.6em 0; font-weight: normal; position: relative; font-size: 25px; line-height: 40px; background: linear-gradient(to right, #18609C, #49A9D0); 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: 7px 9px; margin: 30px 0 20px 0; background-color: #FFF; border-bottom: 3px solid #18609C; font-size: 1.3em; font-weight: 700; }
.single .entry-content h4 { padding: 3px 9px; border-left: 5px solid #18609C; border-bottom: 1px solid #18609C; margin-bottom: 15px;transition: all .4s ease-in-out; }
.single .entry-content h5 { padding: 3px 9px; border-left: 0px solid #18609C; border-bottom: 1px solid #18609C; margin-bottom: 15px;transition: all .4s ease-in-out; }
/소제목 스타일 변경 끝/

참고사이트 :

워드프레스 소제목 CSS 생성기