워드프레스 제목 소제목 꾸미기

워드프레스 제목, 소제목을 꾸미는 방법을 알아보겠습니다. 워드프레스는 기본적으로 테마에 설정이 들어 있는 경우도 있지만 대부분 직접 설정해야 하는 경우도 있는데요. 방법은 간단합니다.

이렇게 제목을 꾸미고 있는 사이트가 많이 있어서 저도 같은 설정을 했습니다. 각자 사용하는 테마에 CSS를 설정할 수 있습니다.

1. 앞에서 말했지만 테마마다 CSS설정을 할 수 있기 때문에 따라하시면 됩니다. 우선 개인 워드프레스에 들어가서 [외모] - [사용자 정의하기]에 들어가서 아래로 내리면 제가 쓰고 있는 스킨은 Custom Css를 눌러주세요.

2. 위에 그림처럼 Custom 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: #2F9D27;
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: #2F9D27;
    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: #006700;
PADDING-BOTTOM: 10px;
TEXT-ALIGN: left;
BORDER-LEFT: #2F9D27 10px solid;
padding: 3px 9px;
margin: 30px 0 20px 0;
BACKGROUND-COLOR: #FFF;
BORDER-BOTTOM: 2px solid ##2F9D27;
font-size: 1.2em;
font-weight: 700;
}

/* 소제목 끝 */

제목 꾸미기.txt

0.00MB

그리고 색을 바꿀 수도 있는데요. 위에 보시면 background, COLOR, BORDER라고 나온 부분에 색을 바꿔 주시면 됩니다. 색상은 찾는 방법을 아래 포스팅을 참고하세요.