CSSセレクター

CSSセレクターは、投稿のどの部分を読み上げるか、または読み上げないかをTTSWPに伝える設定です。シンプルな「音声なしクラス」の方法では対応できない場合や、すべての投稿を編集せずにサイト全体で特定の要素を除外したい場合に使用します。

#2種類のセレクター

#インクルードセレクター

デフォルトでは、TTSWPは投稿のコンテンツエリア全体を読み上げます。使用しているテーマがメイン記事を特定のコンテナ（.article-bodyや#main-contentなど）で囲んでいる場合、読み上げをそのコンテナのみに限定できます。

例:

.article-body

.article-bodyに一致する要素の内部にあるテキストのみが読み上げられます。そのコンテナの外側はすべて無視されます。

デフォルト（投稿コンテンツ全体）を維持する場合は、フィールドを空のままにしてください。

#エクスクルードセレクター

エクスクルードセレクターに一致する要素は、音声生成前にテキストから削除されます。それらの要素の内部にあるコンテンツもすべて削除されます。

複数のセレクターを1行ずつ入力できます:

.wp-caption
figcaption
.sidebar
.widget-area
.ad-container

#よく使う除外の例

使用しているテーマに該当するものがあれば、以下をコピーして除外リストに貼り付けてください。

#画像キャプション

.wp-caption
figcaption
.caption

#サイドバーとウィジェット

.sidebar
#secondary
.widget-area
.elementor-sidebar

#広告

.ad-container
.advertisement
.ads
[data-ad]
.google-auto-placed

#コメント

.comments-area
#comments
.comment-list

#関連投稿とニュースレター登録フォーム

.related-posts
.yarpp-related
.mailchimp-signup
.newsletter-form

#パンくずリストとメタ情報

.breadcrumbs
.post-meta
.entry-meta
.author-box

#Truncate After（以降を切り捨て）

Truncate Afterは、投稿の特定の位置で読み上げを停止したい場合に使用します。最初に一致した箇所以降のすべてのコンテンツが、音声生成前に削除されます。メインコンテンツエリア内にある脚注、参考文献リスト、著者プロフィールなどを、単一のCSSクラスで囲むことが難しい場合に便利な機能です。

#設定方法

1. テキスト読み上げ → CSSセレクター に移動します。
2. Truncate After カードまでスクロールします。
3. 1行ずつ文字列を入力します。保存してください。
4. 対象の投稿で音声を再生成します。

#マッチングのルール

• レンダリングされた投稿HTMLに対して、大文字と小文字を区別しない部分文字列で一致します。
• プレーンテキストまたはHTMLマークアップを入力できます。例えば、<strong>Footnotes</strong>は「Footnotes」が太字の場合のみ一致しますが、Footnotesはページ上のあらゆる表記に一致します。
• 複数の切り捨てポイントを設定したい場合は、複数の文字列を入力してください。投稿内で最初に一致した箇所が優先されます。

#例

太字の「Footnotes」見出しの位置で切り捨てる:

<strong>Footnotes</strong>

複数のマーカーのうち最初に一致した位置で切り捨てる:

<h2>References</h2>
<strong>About the author</strong>

#エクスクルードセレクターとTruncate Afterの使い分け

• スキップしたい対象が明確なクラスまたはID（サイドバー、広告、ウィジェットなど）で囲まれている場合は、エクスクルードセレクターを使用してください。
• マーカー以降のすべてをカットしたい場合や、対象を囲む明確なラッパーがない場合は、Truncate Afterを使用してください。

どちらも合成処理の前に実行されるため、音声にのみ影響し、表示されるページには影響しません。

#正しいセレクターの見つけ方

フロントエンドで投稿を開き、ブラウザの開発者ツール（F12キー、その後対象要素をクリック）を使用します。

確認するポイント:

• class属性（class="..."で始まる）- .クラス名の形式になります
• id属性（id="..."で始まる）- #id名の形式になります
• 一般的なタグ - タグ名をそのまま使用します（figcaption、asideなど）

除外したいすべての要素を対象としつつ、できるだけ具体的なセレクターを選択してください。同様の要素が複数ある場合は、クラスまたはタグを使用してください。

#セレクターのテスト方法

セレクターを保存した後:

1. 音声付きの投稿を開きます。
2. 投稿 → すべての投稿 に移動します。
3. 再生成アイコンをクリックします。
4. 新しい音声を再生して確認します。

不要なコンテンツがまだ読み上げられる場合、セレクターが一致していません。ブラウザの開発者ツールでクラスまたはタグを確認して、再度お試しください。

#制限事項

• CSSセレクターは、投稿の生コンテンツに対して合成処理の前に実行されます
• セレクターは表示されるページには影響せず、ElevenLabsに送信されるテキストのみに影響します
• 複雑なセレクター（.widget-area aside > .titleなど）も機能しますが、メンテナンスのしやすさのためにシンプルに保つことをお勧めします

#関連ページ

• 読み上げコンテンツの制御
• カスタムCSS