文字をCSSで非表示にすることはできますが、検索順位を狙って読者に見えないキーワードを見出しに埋め込む方法はおすすめしません。
旧版の本記事はこの用途を勧めていましたが、その説明と実装例を撤回しました。
見出しのキーワードは読者に見える文章へ
見出しは、その節で何が分かるかを読者が判断できる文章にします。
同じ語を繰り返しすぎる場合は見出しを短く書き直し、必要な説明は本文に移してください。
HTMLに文字が残ることと、検索評価が上がることは別です。
Googleは検索順位の操作を目的とするテキストの非表示をスパムの対象としています。
一方、読者が操作して開ける説明などは用途が異なります。
Google検索のスパムポリシーで目的と実装を確認してください。
補足を折りたたむ場合の実装例
長い補足を必要な人だけが読めるようにするなら、非表示のキーワードを置く代わりに「詳細」ブロックを使えます。
この折りたたみにはカスタム書式の追加やfunctions.phpの変更は不要です。
カスタムHTMLブロックで試す場合は次のコードです。
要約をクリックするほか、Tabで要約に移動してEnterまたはSpaceで開閉できます。
<details class="waza-note"><summary>対応環境の補足を読む</summary><p>この例はHTMLのdetails要素を使っています。補足は開いて読むことができ、検索用のキーワードを隠すためのものではありません。</p></details>対応環境の補足を読む
この例はHTMLのdetails要素を使っています。補足は開いて読むことができ、検索用のキーワードを隠すためのものではありません。
以前の非表示CSSを戻す
変更前に、対象記事の本文と、非表示ルールを保存したCSSの内容を控えます。
同じクラスを使う他の記事にも影響するため、対象文字と使用箇所を先に確認してください。
追加CSS・子テーマstyle.css・SWELL設定のカスタム書式用CSSのうち、実際にルールを保存した場所を確認します。
追加した .swl-format-1 { display:none; } の非表示指定だけを取り除き、同じ場所にある無関係な装飾は残します。
親テーマを直接編集する方法は避けます。
次に、記事の編集画面で対象文字のカスタム書式を解除して保存し、キャッシュを更新します。
カスタム書式の名前を消すだけでは、保存済み本文のspanが残る場合があります。
見出し・目次・本文が自然な文章になったか確認してください。
公開ページをPCとスマホで開き、意図した文字が見えることと、同じ書式を使う他の記事の表示を確認します。
読者のサイトにある旧CSSの削除・書式解除や、スクリーンリーダーでの読み上げは、この記事の検証には含みません。
表示不要な情報を機密情報のように扱わないでください。
CSSで隠してもHTMLから読めます。
またdisplay:noneの内容は通常、スクリーンリーダーにも伝わりません。
読み上げ用ラベルの代わりにはしません。
カスタム書式そのものの追加方法はSWELLのカスタム書式を追加する手順を参照してください。
よくある質問：SWELLで文字を非表示にする前に
見えない文字で、検索順位を上げられますか？
おすすめしません。記事では、HTMLに文字が残ることと検索評価が上がることは別で、Googleは検索順位の操作を目的とするテキストの非表示をスパムの対象としています。目的と実装は、Google検索のスパムポリシーで確認してください。
旧版の記事は、何を勧めていましたか？
記事によると、旧版は読者に見えないキーワードを見出しに埋め込む用途を勧めていましたが、その説明と実装例は撤回されています。
見出しのキーワードは、どう書けばよいですか？
見出しは、その節で何が分かるかを読者が判断できる文章にします。同じ語を繰り返しすぎる場合は見出しを短く書き直し、必要な説明は本文に移してください。
補足を隠したいときは、どうしますか？
記事では、長い補足を必要な人だけが読めるようにするなら、非表示のキーワードを置く代わりに「詳細」ブロックを使えます。この折りたたみにはカスタム書式の追加やfunctions.phpの変更は不要で、カスタムHTMLブロックで試す場合はHTMLのdetails要素を使います。要約はクリックのほか、Tabで移動してEnterまたはSpaceで開閉できます。
以前の非表示CSSを戻すには？
変更前に、対象記事の本文と、非表示ルールを保存したCSSの内容を控えます。同じクラスを使う他の記事にも影響するため、対象文字と使用箇所を先に確認してください。実際にルールを保存した場所の非表示指定だけを取り除き、無関係な装飾は残します。親テーマを直接編集する方法は避けます。
カスタム書式の名前を消せば、非表示は解除されますか？
解除されない場合があります。記事では、記事の編集画面で対象文字のカスタム書式を解除して保存し、キャッシュを更新します。名前を消すだけでは、保存済み本文のspanが残る場合があります。
display:noneで隠した内容は、機密情報として扱えますか？
扱わないでください。記事では、CSSで隠してもHTMLから読め、display:noneの内容は通常スクリーンリーダーにも伝わらないため、読み上げ用ラベルの代わりにもしないとされています。
修正後は、何を確認しますか？
見出し・目次・本文が自然な文章になったか確認します。公開ページをPCとスマホで開き、意図した文字が見えることと、同じ書式を使う他の記事の表示を確認します。なお、読者のサイトにある旧CSSの削除・書式解除や、スクリーンリーダーでの読み上げは、記事の検証に含まれていません。
