워드프레스 Enfold 테마: 소제목에서 앰퍼샌드 기호 스타일 초기화하는 방법

워드프레스 인기 테마 중 하나인 Enfold (엔폴드)는 깔끔하면서 속도가 괜찮은 편이라서 개인적으로 선호하는 테마 중 하나입니다. 엔폴드 테마는 우리나라에서도 많이 사용되는 워드프레스 테마 중 하나입니다.

워드프레스 Enfold 테마

엔폴드 테마에서는 현재 약 38개의 데모를 제공하고 있습니다.

Demo Import 메뉴에서 데모를 로드하여 사용할 수 있다.

소제목에서 앰퍼샌드 (&) 기호 스타일을 초기화하는 방법

Enfold 테마의 일부 데모에서는 앰퍼샌드 (&) 기호에 특수한 스타일이 적용될 수 있습니다. 예를 들어, Construction Demo를 설치하면 제목 부분의 앰퍼샌드 기호가 다음 그림과 같은 스타일로 표시됩니다.

개인적으로 이 스타일이 마음에 드네요. 앤퍼샌드(앤드 기호)의 색상과 스타일을 다른 소제목(헤딩) 문구와 동일한 스타일을 적용하고 싶은 경우가 있을 수 있습니다.

이 부분의 요소를 검사해보면 그림과 같이 앰퍼샌드 기호에 special_amp 클래스가 적용되고 있습니다.

이 경우 폰트 종류와 크기 등을 부모 요소의 스타일을 계승하도록 CSS inherit 키워드를 사용할 수 있습니다.

CSS inherit keyword

The inherit keyword specifies that a property should inherit its value from its parent element.
The inherit keyword can be used for any CSS property, and on any HTML element.

inherit 키워드는 모든 CSS 속성과 모든 HTML 요소에 사용할 수 있다고 w3schools 문서에서는 설명하고 있습니다.

다음과 같은 CSS 코드를 사용하여 special_amp 클래스의 스타일을 초기화할 수 있습니다.

/* Enfold 테마의 Ampersand 스타일 초기화 */
/* Disable Ampersand style in WoPress Enfold Theme */
.special_amp {
    font-family: inherit;
    font-size: inherit!important;
    font-style: inherit;
    font-weight: inherit;
    color: inherit!important;
}

엔폴드 테마에서 사용자 지정 CSS 코드 추가하기

엔폴드 테마에서는 워드프레스 알림판 > Enfold > General Styling으로 이동한 후에 Quick CSS 박스에 위의 코드를 넣으면 됩니다.

Enfold 테마에서는 Quick CSS 섹션에 커스텀 CSS 코드를 넣을 수 있다.

또는, 차일드 테마 내의 스타일시트 파일이나 테마 디자인 > 사용자 정의하기에 사용자 지정 CSS 코드를 추가해도 됩니다.

워드프레스에서 CSS 추가하기 - 워드프레스 기본

참고:

워드프레스 뉴스페이퍼, 아바다, 엔폴드 테마에 배경 이미지 설정하기