기본 색상 및 레이아웃 옵션으로 충분하지 않을 때, 자체 CSS로 오디오 플레이어 스타일을 재정의하세요. 인라인 플레이어와 스티키 푸터 변형 모두에서 작동합니다.
커스텀 CSS를 추가하는 위치
테마 수준 (권장)
테마 커스터마이저를 사용하세요.
- 외모 → 커스터마이즈 → 추가 CSS
- 규칙 붙여넣기
- 게시
이 방법은 테마 업데이트 및 차일드 테마 교체 후에도 유지됩니다.
플러그인 수준
텍스트 음성 변환 → 고급 → 커스텀 CSS에서 플레이어가 있는 페이지에만 로드되는 CSS를 붙여넣으세요. 플러그인에 특정 스타일을 연결하고 싶을 때 유용합니다.
지정할 수 있는 플레이어 요소
플레이어의 모든 요소에는 안정적인 클래스 이름이 있습니다. 주요 선택자:
/* 전체 플레이어 컨테이너 */
.mementor-tts-player { }
/* 재생 버튼 */
.mementor-tts-play-button { }
/* 진행 막대 (선형) */
.mementor-tts-progress { }
/* 파형 막대 (PRO) */
.mementor-tts-waveform-bar { }
/* 시간 표시 */
.mementor-tts-time { }
/* 속도 선택기 */
.mementor-tts-speed { }
/* 볼륨 슬라이더 */
.mementor-tts-volume { }
/* 다운로드 링크 */
.mementor-tts-download { }
/* 스티키 푸터 (PRO) */
.mementor-tts-sticky-footer { }
브라우저 인스펙터를 사용하여 전체 HTML 트리를 탐색하고 지정하려는 요소를 정확히 찾으세요.
일반적인 예시
테마의 테두리 반경 맞추기
.mementor-tts-player {
border-radius: 12px;
}
특정 컨트롤 숨기기
.mementor-tts-loop {
display: none !important;
}
먼저 플러그인의 UI 설정을 사용하세요. 설정이 없을 때만 CSS로 재정의하세요.
재생 버튼 크게 만들기
.mementor-tts-play-button {
width: 56px;
height: 56px;
}
스티키 푸터에 커스텀 그림자 추가
.mementor-tts-sticky-footer {
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}
커스텀 타이포그래피
.mementor-tts-player {
font-family: "Your Theme Font", sans-serif;
}
.mementor-tts-time {
font-variant-numeric: tabular-nums;
}
CSS 변수
플레이어는 재정의할 수 있는 CSS 커스텀 속성을 제공합니다.
.mementor-tts-player {
--player-bg-color: #your-color;
--player-text-color: #your-color;
--player-play-color: #your-color;
}
특정 규칙을 재정의하지 않고 색상을 다시 스타일링하는 가장 깔끔한 방법입니다.
명시도 주의사항
TTSWP는 기본 CSS에서 html body .mementor-tts-* 선택자를 사용하여 테마 재정의보다 우선합니다. 테마에서 재정의하려면 이 명시도와 같거나 더 높게 맞추세요.
html body .mementor-tts-player {
background: #000;
}
또는 !important를 아껴서 사용하세요.
브라우저 인스펙터로 테스트하기
커스텀 CSS를 추가한 후:
- 프론트엔드에서 오디오가 있는 게시물을 엽니다.
- 플레이어를 마우스 오른쪽 버튼으로 클릭 → 검사.
- 계산됨 패널에서 어떤 규칙이 적용되고 있는지 확인하세요.