GeneratePress 제목 스타일 지정하기

GeneratePress  제목 스타일 지정하기

• 티스토리 스킨 설정처럼 워드프레스도 CSS를 이용해 원하는 형태로 제목 스타일을 지정할 수 있습니다.
• 디자인 -> 사용자 정의하기 -> 추가CSS에 아래 코드를 추가, 수정하여 원하는 스타일을 지정하면 됩니다.

포스트 내의 제목 스타일 지정을 위한 CSS

모서리가 둥근 박스 디자인

• 아래와 같이 모서리가 둥근 박스형으로 제목을 설정하는 코드입니다.

.single .entry-content h2 {
margin: 1.15em 0 0.6em 0;
    font-weight: normal;
    position: relative;
    font-size: 25px;
    line-height: 40px;
    background: #111111;
    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: 설정하고자 하는 제목 종류 변경(h2, h3, h4 등)
• margin: 박스 밖의 여백 크기
• font-weight: 글자 굵기 설정 (보통이면 삭제해도 괜찮고, 굵게는 bold 또는 600을 입력합니다.)
• position: relative;
• font-size: 글자 크기
• line-height: 박스 높이
• background: 박스 색상
• border: 테두리 두께, solid 테두리 색상
• padding: 박스 테두리와 글자사이 여백 크기
• color: 글자 색상 
• border-radius: 모서리 둥근 정도(왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서)
• box-shadow: 박스 그림자 설정

 

선형 디자인

• 제목 앞 바나 글자 아래 언더바 등으로 제목을 설정하는 코드입니다.

.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 h3: 설정하고자 하는 제목 종류 변경(h2, h3, h4 등)
• COLOR: 글자색상
• PADDING-BOTTOM: 10px;
• TEXT-ALIGN: 글자 정렬(left, center, right)
• BORDER-LEFT: 글자 앞 바의 색상과 두께
• padding: 박스 테두리와 글자사이 여백 크기
• margin: 박스 밖의 여백 크기
• BACKGROUND-COLOR: 박스 색상
• BORDER-BOTTOM: 박스 밑줄 두께와 색깔
• font-size: 글자크기
• font-weight: 글자두께

 

글 목록에서 제목 스타일 지정을 위한 CSS

• 위와 같은 제목 디자인을 글 목록에도 적용하면 아래와 같은 코드를 추가 CSS에 입력하면 됩니다.
• home: 홈화면의 제목 스타일을 변경합니다.
• archive: 카테고리 화면의 제목 스타일을 변경합니다.
• search: 검색결과 화면의 제목 스타일을 변경합니다.

.home h2 {
margin: 1em 0 0.6em 0;
    position: relative;
    font-size: 28px;
    font-weight: 600;
    line-height: 45px;
    background: #f6f6f6;
    border: 0px solid #fff;
    padding: 5px 15px;
    color: white;
    border-radius: 0 10px 0 10px;
}

.archive h2 {
margin: 1em 0 0.6em 0;
    position: relative;
    font-size: 28px;
    font-weight: 600;
    line-height: 45px;
    background: #f6f6f6;
    border: 0px solid #fff;
    padding: 5px 15px;
    color: white;
    border-radius: 0 10px 0 10px;
}

.search h2 {
margin: 1em 0 0.6em 0;
    position: relative;
    font-size: 28px;
    font-weight: 600;
    line-height: 45px;
    background: #f6f6f6;
    border: 0px solid #fff;
    padding: 5px 15px;
    color: white;
    border-radius: 0 10px 0 10px;
}

 

• 위와 같은 기능을 응용해서 각 화면마다 다른 스타일을 적용할 수 있고, 하나의 코드로 뭉치는 것도 가능합니다.
• 워드프레스는 원하는 스타일로 꾸며보세요.