워드프레스 소제목 스타일 예쁘게 변경하기 (h2, h3, h4)

티스토리나 워드프레스 블로그를 운영하다보면 소제목을 좀 더 예쁘게 변경하고 싶다는 생각이 드실텐데요. 소제목 스타일을 변경해주는 것만으로 가독성이 올라가기도 합니다. 오늘은 간단하게 css를 이용해서 워드프레스 소제목 스타일을 변경하는 방법에 대해 알아보도록 하겠습니다. 테마마다 적용해야하는 css 코드가 조금씩 다르기 때문에 GeneratePress 테마를 사용하시는 분들이 적용하시길 바랍니다.

워드프레스 소제목 꾸미기

1번째 스타일

현재 제가 사용하고 있는 테마는 GeneratePress 입니다. 제가 지금 적용하고 있는 소제목 코드를 아래에 남겨놓겠습니다.

이 이미지는 대체 속성이 비어있습니다. 그 파일 이름은 %EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7-2023-11-16-%EC%98%A4%ED%9B%84-3.11.01-1024x219.png입니다

.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.4em;

font-weight: 700;

}

.single .entry-content h4 {

   padding: 3px 9px;

    border-bottom: 1px solid #18609C;

COLOR: #124875;

    margin-bottom: 14px;

font-size: 1.1em;

font-weight: 700;

}

색상과 글씨 크기는 원하는 스타일에 맞춰서 변경해주시면 됩니다.

2번째 스타일

.single .entry-content h2 {
margin: 1.5em 0 1em 0;
font-weight: 700;
position: relative;
font-size: 28px;
line-height: 45px;
background: linear-gradient(to bottom right, #f0f0f0, #e0e0e0);
border-left: 7px solid #FF4081;
padding: 8px 12px;
color: #333;
border-radius: 5px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
font-family: ‘Muli’, sans-serif;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
transition: none;
}
.single .entry-content h3 {
color: #333;
padding: 5px 10px;
text-align: left;
background-color: #f5f5f5;
border-left: 5px solid #FF4081;
margin: 20px 0 15px 0;
font-size: 1.3em;
font-weight: 700;
transition: none;
position: relative;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

3번째 스타일

.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;

}

4번째 스타일

h2 {

position: relative;

padding: 1rem 0.5rem;

}

h2::after {

position: absolute;

bottom: 0px;

left: 0px;

content: ”;

width: 100%;

height: 6px;

border-radius: 3px;

background-image: -webkit-linear-gradient(right, #00b0ff 0%, #00e676 100%);

background-image: linear-gradient(to left, #00b0ff 0%, #00e676 100%);

}

적용 방법

css코드를 적용하는 방법은 간단한데요.

[외모]-[사용자정의하기]-[추가 css코드]에 들어가셔서 원하는 스타일의 코드를 붙여넣기 해주시면 됩니다. 만약 적용이 안되는 경우에는 소제목 css 코드를 제일 위로 넣고 적용해보시길 바랍니다. (1번부터)

이 게시물이 얼마나 유용했습니까?

평점을 매겨주세요.

평균 평점 5 / 5. 투표수: 1

지금까지 투표한 사람이 없습니다. 가장 먼저 게시물을 평가해보세요.

Leave a Comment

error: 우클릭이 불가능 합니다.