워드프레스 사이트의 디자인은 방문자에게 강렬한 첫인상을 주는 중요한 요소다. 특히 소제목 헤딩 메뉴는 페이지의 구성과 분위기를 결정하는 핵심 디자인 요소다. 이번 글에서는 SEO에 최적화된 구조로, 워드프레스 편집기에 바로 붙여 쓸 수 있는 커스텀 CSS 코드를 제공하려고 한다. 바로 지금 이 블로그에서 사용하고 있는 CSS 코드를 바로 다운 받아 사용 할 수 있도록 제공하겠다.
1. 소제목 헤딩 메뉴의 중요성
소제목 헤딩 메뉴는 사용자가 페이지 내 원하는 섹션으로 빠르게 이동할 수 있도록 돕는다. 사이트의 전체적인 디자인 통일성을 부여하며, 사용자의 접근성을 높인다. 깔끔하고 세련된 메뉴 디자인은 방문자의 이목을 사로잡으며, 사이트의 전문성과 신뢰도를 높이는데 아주 중요하다.
2. 커스텀 CSS 코드 작성 및 적용 방법
워드프레스에서 커스텀 CSS 코드를 적용하는 방법은 간단하다. 워드 프레스 대시보드에서 외모 → 커스터마이즈 → 추가 CSS 메뉴에 코드를 입력하면 바로 적용된다. 코드 작성 시 현재 사용 중인 테마와의 호환성을 반드시 확인해야 하며, 브라우저 호환성과 반응형 디자인을 고려하여 작성해야 한다.
코드 적용 전 주의사항
- 백업 필수: 기존 스타일시트를 백업한 후 진행한다.
- 테스트: 다양한 브라우저와 기기에서 정상적으로 표시되는지 확인한다.
- 캐시 삭제: 코드 수정 후 브라우저 캐시를 삭제하고 결과를 확인한다.
3. “헤이든의 전산실” 블로그에서 사용하는 커스텀 CSS 코드 예시
아래는 소제목 Heading 메뉴 css코드를 적용했을 때 H2, H3, H4, H5에 각각 어떠한 효과가 나오는지를 보여주는 예시이다.
H2 Heading 소제목 적용.
H2 아래의 문단 글
H3 Heading 소제목 적용.
H3 아래의 문단 글
H4 Heading 소제목 적용.
H4 아래의 문단 글
H5 Heading 소제목 적용.
H5 아래의 문단 글
추가로, “헤이든의 전산실”에서 주인장이 직접 만들어 사용하는 이쁜 소제목 헤딩 메뉴 커스텀 CSS 코드를 제공한다. 나 스스로는 깔끔하고 눈에 잘 들어오며 과하지도 않는 디자인이라 생각하는데…. 혹시나, 필요한 분들은 아래 링크에서 다운 받으면 되겠다.
- 다운로드 링크 : heading_decoration_css
.single .entry-content h1 {
font-weight: 700;
font-size: 30px;
line-height: 1.5;
color: #1a202c;
}
.single .entry-content h2 {
color: #333;
padding: 3px 8px;
text-align: left;
background-color: #f5f5f5;
border-left: 5px solid #007f77;
margin: 18px 0 15px 0px; /* 좌측 여백 0px */
font-size: 19px;
font-weight: 700;
transition: none;
position: relative;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.single .entry-content h3 {
color: #333;
padding: 2px 8px;
text-align: left;
background-color: #f5f5f5;
border-left: 5px solid #4ebfb4;
margin: 18px 0 15px 10px; /* 좌측 여백 10px 추가 */
font-size: 17px;
font-weight: 600;
transition: none;
position: relative;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.single .entry-content h4 {
color: #333;
padding: 1px 8px;
text-align: left;
background-color: #f5f5f5;
border-left: 3px solid #aad4c6;
margin: 17px 0 15px 20px; /* 좌측 여백 20px 추가 */
font-size: 16px;
font-weight: 600;
transition: none;
position: relative;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.single .entry-content h5 {
color: #333;
padding: 1px 10px;
text-align: left;
background-color: #f5f5f5;
border-left: 0px solid #537FEE;
margin: 20px 0 15px 30px; /* 좌측 여백 30px 추가 */
font-size: 16px;
font-weight: 600;
transition: none;
position: relative;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
코드는 워드프레스 헤딩 메뉴를 돋보이게 하여 방문자가 직관적으로 원하는 정보를 찾을 수 있도록 돕는다. 해당 코드를 복사하여 워드프레스 추가 CSS 영역에 붙여넣으면 바로 적용되며, 필요에 따라 색상이나 폰트 등 세부 설정을 변경할 수 있다.
이상으로 워드프레스 소제목 헤딩 메뉴를 커스텀 CSS 코드로 꾸미는 방법을 소개해 드렸다. 제공된 코드를 활용하여 사이트 디자인을 세련되게 변경하고, SEO 향상을 도모할 수 있다. 워드프레스 사이트를 운영하는 초보 사용자들이 본 글의 내용을 참고하여 보다 깔끔하고 효과적인 디자인을 구현할 수 있기를 기대해 본다.