オーディオプレーヤーは、訪問者が目にしてクリックする要素です。色、ページ上の位置、サイズ、表示するコントロールを変更できます。保存前にライブプレビューで変更内容を確認できます。
プレーヤー設定ページを開く
テキスト読み上げ → プレーヤー に移動します。ページは5つのセクションで構成されています。
- 配置
- カラー
- プログレスバーのスタイル
- 表示するコントロール
- ライブプレビュー
変更を加えるたびに、ページ下部のプレビューが更新されます。
配置
投稿内でプレーヤーを表示する位置を選択します。
- タイトルの前: 投稿タイトルの上
- タイトルの後: タイトルと最初の段落の間
- コンテンツの後: 投稿の末尾（デフォルト）
- 抜粋の前: アーカイブやブログ一覧ビューのみに表示
- 抜粋の後: アーカイブ内の投稿サマリーの後に表示
- スティッキーフッター（PRO）: 訪問者がスクロールしてもページ下部に固定表示
ほとんどのブログでは、タイトルの後 または コンテンツの後 が最適です。固定バーのオプションについては スティッキーフッタープレーヤー をご覧ください。
カラー
3つのカラーピッカーでプレーヤーの外観を調整します。
- 背景: プレーヤーの背景色
- テキスト: タイトルと時間表示の色
- アクセント / 再生: 再生ボタン、プログレスの塗りつぶし、アクティブなアイコン
テーマに合った色を選択してください。プレビューはリアルタイムで更新されます。
ヒント: テーマでCSS変数を使用している場合は、カスタムCSSでこれらの色を上書きできます。カスタムCSS をご覧ください。
プログレスバーのスタイル
2つのオプションがあります。
- リニア: 標準の水平プログレスバー（デフォルト）
- ウェーブフォーム（PRO）: 各投稿に固有のパターンが表示されるビジュアルウェーブフォーム
ウェーブフォームは各投稿に個性を加え、ポッドキャスト形式のコンテンツに最適です。SVGベースのため、ページの読み込み速度にほぼ影響しません。ウェーブフォームプログレスバー をご覧ください。
表示するコントロール
各コントロールはシンプルなオン/オフの切り替えです。表示したいときはオンに、シンプルな外観にしたいときはオフにします。
- 再生 / 一時停止: 常にオン（オフにできません）
- 現在の再生時間と総再生時間
- 再生速度（0.5x、1x、1.25x、1.5x、2x）
- 音量
- ダウンロード
- ループ
- 情報アイコン（音声名と言語を表示）
アクセシビリティのため、時間表示、速度、ダウンロード はオンのままにすることをお勧めします。
ライブプレビュー
ページ下部には、訪問者に表示される内容が正確に表示されます。クリックすると短いテキストサンプルが再生されます。変更を加えるたびにプレビューが更新されます。
設定が完了したら、上部バーの 変更を保存 をクリックします。変更はオーディオ付きのすべての投稿に即時反映されます。
モバイルの動作
プレーヤーはレスポンシブ対応で、小さな画面にも自動調整されます。
- 480px未満: ダウンロードと情報コントロールがメニューに折りたたまれます
- 320px未満: ループと速度コントロールが非表示になり、再生と時間のみ表示されます
動的CSSキャッシュ
ページ読み込みのたびにCSSを再生成しないよう、色の設定は12時間キャッシュされます。変更を保存すると、キャッシュは自動的にクリアされます。古い色が表示される場合は、ページをハードリフレッシュ（Ctrl+Shift+R）してください。