워드프레스 소제목 스타일 개요
보기도 좋은 떡이 맛도 좋은 법이다. 이번에 말씀드릴 워드프레스 소제목 스타일 꾸미는 방법에 대해서 간단하게 설명 드리고자 한다. 다양한 방법이 있지만, 기존 유저들이 간단하게 사용하고 있으며 그리고 워프에서 가장 중요하다고 할 수 있는 속도에 대한 부분까지 크게 영향미치지 않는 방법을 설명드리려고 한다.
참고로 지난 포스팅에서 소제목 깔끔하게 꾸미기 방법에 대해서 아래의 링크와 같이 기 설명하였으나 다시한번 더 쉽게 설명 드리고자 한다.
들어가기 앞서 유의점
지금 설명 드릴 변경 방법은 주로 CSS(Cascading Style Sheets)를 이용하여 스타일을 변경하거나 테마 설정에서 설정하는 방법을 사용할 수 있다. 먼저 들어가기에 앞서 전체적 방향은 GeneratePress테마를 위주로 맞춰졌긴 하나, CSS 수정이나 Style.css 편집의 경우 전 테마의 공통 사항이니 그대로 위치만 잘 찾아서 하시면 된다는 말씀을 드리는 바다.
꾸미는 방법 2가지 초간단
GeneratePress 테마 편집기능 이용
워드프레스는 모든 테마에 스타일 편집 파일에 접근할 수 있다. 그리고 그 파일을 편집하면서 소제목에 원하는 스타일을 추가하거나 변경하는 방법이다.
자 먼저, 내 워드프레스 외모를 들어가 사용자 정의하기를 찾아준다. 그리고 Typography를 클릭하면 아래와 같이 Font manager와 Add Typography가 나온느데 여기서 Add Typography를 클릭하여 준다.
그렇게되면 다시 아래와 같은 화면이 나올것이다. 여기서 꾸며줄 소제목을 선택하여 자유롭게 스타일을 조정하여 주면되는데, 먼저 꾸며주고자 하는 Heading 선택한다. 참고로 h1~h6까지 자유롭게 설정이 가능하다. 스타일 꾸미는 것에 대해 다소 제한이 있다는 것이다. 기타 설명은 아래 사진을 참고바란다.
CSS 이용한 소제목 스타일 꾸미기
다음은 CSS 수정을 통하여 바꾸어주는 방법이다. 먼저, 위와 비슷하지만 조금 다르게 들어간다. 아래의 사진과 같이 외모에서 사용자 정의하기를 들어가준다. 그리고 활성테마에서 아래와 같이 추가 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: #000000;
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: 1.8em;
line-height: 40px;
background: #003458;
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: #003458;
PADDING-BOTTOM: 10px;
TEXT-ALIGN: left;
BORDER-LEFT: #003458 10px solid;
padding: 3px 9px;
margin: 30px 0 20px 0;
BACKGROUND-COLOR: #FFF;
BORDER-BOTTOM: 2px solid #003458;
font-size: 1.6em;
font-weight: 700;
}
/* 제목 꾸미기 끝 */
본인의 블로그의 형태와 색깔 테마 형식에 맞게 코드를 조금씩 바꿔주시면 된다. 주요 코드에 대한 설명만 드리면 아래와 같다.
font-size 폰트 크기(em으로 해도됨)
Background 소제목 글자 배경색
color 글자색
Border-left 왼쪽 벽색
Border-bottom 밑줄 색
font-family 글꼴
여기서 장점은 바꾸는데로 실시간으로 색깔과 폰트(글꼴), 여백 크기, 글자 크기 등이 변경 되기 때문에 바로 공개(저장) 누르시지 마시고, 하나씩 설정을 넣어가며 본인의 방향대로 맞춘뒤 발행을 누르시길 권장드리는 바다.
결론
이외에도 Style.css를 통하여 바꾸어주는 방법도 있는데 차일드 테마를 먼저 만드시고 하는 것을 추천드린다. 어쨌거나 이러한 방법을 통해 원하는 스타일로 소제목을 꾸밀 수 있다. 네이버나 티스토리도 어느정도 소제목 등 설정이 가능하지만 워드프레스는 일일이 바꿔줘야하는게 약간 노가긴 하다. 그래도 위처럼 하면 그렇게 어렵지 않다고 느낄 것이다.
다만, CSS를 수정하는 경우에는 실수로 웹사이트에 영향을 주지 않도록 주의해야 하며, 테마 설정을 이용할 때는 테마에 따라 설정 옵션의 유무와 제공되는 기능이 다를 수 있으니 테마 설정 페이지를 정확히 확인하는 것이 중요하다. 항상 백업 잊지말자.