WordPress Cocoonテーマで選択した文字色が見えない時の原因と解決策

WordPressの人気テーマ「Cocoon」を使っていると、記事を編集したり、読者が文章を選択（ドラッグ）した際に、文字の色が透明になって見えなくなることがあります。

「ドラッグしても色が変わらない」「どの設定をいじればいいか分からない」と困っている方もいるのではないでしょうか？

この記事では、その原因と、誰でも簡単にできる解決策を2つご紹介します。

これは、「選択範囲の文字色」と「選択範囲の背景色」、そしてサイトの背景色が、すべて同じ色（例えば、白）に設定されていることが原因です。

特に、テーマのカスタマイズで色の設定を変更した際に、意図せずこの現象が起こることがあります。

ほとんどの場合、Cocoonテーマに用意されている設定項目を変更するだけで解決できます。

WordPressの管理画面から、左メニューの 「Cocoon設定」 をクリックします。
上部にあるタブから 「全体」 を選択します。
少し下にスクロールすると、以下の項目があります。
- サイト選択文字色
- サイト選択背景色
この2つの色を、サイトの背景色とはっきり区別できる色に変更しましょう。
- 【例】
  - サイトの背景が白い場合
  - サイト選択文字色：黒（#000000）
  - サイト選択背景色：青（#007bff）やグレー（#ccc）など
設定後、ページ下部にある 「変更をまとめて保存」 ボタンを忘れずにクリックしてください。

これで、ドラッグした際に文字がハイライトされて見えるようになります。

Cocoon設定に項目が見当たらない場合や、より自由に色をカスタマイズしたい場合は、CSSコードを追加する方法もあります。

WordPress管理画面の 「外観」 > 「カスタマイズ」 を開きます。
左側のメニューから 「追加CSS」 を選択します。
以下のコードをコピー＆ペーストします。
- background: #007bff; は選択範囲の背景色です。
- color: #ffffff; は選択範囲の文字色です。

CSS

::selection {
  background: #007bff; /* 選択範囲の背景色 */
  color: #ffffff; /* 選択範囲の文字色 */
}

カラーコードを好きな色に変更し、最後に「公開」ボタンをクリックして完了です。

Cocoonで選択した文字が見えなくなる問題は、色の設定が原因です。まずは最も簡単な**「Cocoon設定」の「全体」タブから「サイト選択文字色」と「サイト選択背景色」**を変更してみてください。それでも解決しない場合は、「追加CSS」を利用すると良いでしょう。

これらの方法で、ブログの読者さんが快適に記事を読めるようになります。ぜひ試してみてください。