組み込みのカラーやレイアウトオプションでは対応できない場合、独自の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を追加した後は、以下の手順で確認します。
- フロントエンドでオーディオがあるいずれかの投稿を開く。
- プレーヤーを右クリックして 検証 を選択する。
- 計算済み パネルで、どのルールが適用されているかを確認する。