訪問者がウェブサイトでテキストを選択したときの表示に気づいたことはありますか？ブランドカラーに合わせるために、作業しているウェブサイトのテキスト選択色を更新する必要がある場合があり、多くのユーザーがその方法を尋ねています。
幸いなことに、この見過ごされがちなデザイン要素をカスタマイズするのは、思っているよりも簡単です。ブランドカラーに合わせたい場合でも、可読性を向上させたい場合でも、テキスト選択の色を変更することで、ウェブサイトのユーザーエクスペリエンスを向上させることができます。
このガイドでは、WordPressでデフォルトのテキスト選択色を変更する方法を正確に説明します。
WordPressでデフォルトのテキスト選択色を変更する理由
テキスト選択色とは、WordPressにおいて、コンテンツ内でテキストの一部をハイライトしたときに表示されるフォントの色を指します。このようになります：
WordPressウェブサイトのデザインと合わない場合があるため、この色を変更したい場合があります。配色は、サイトを良く見せ、一貫したブランド体験を維持するために重要な役割を果たします。
WordPressブログを運営している場合、デフォルトのテキスト選択色がコンテンツの他の部分から十分に目立たず、読みにくいと感じる場合は、その色を変更したいと思うかもしれません。
それを踏まえた上で、WordPressでテキスト選択のフォントカラーを変更する方法を見てみましょう。以下のリンクを使用して、使用したい方法にジャンプしてください。
- 方法1：コードを使用してテキスト選択色を変更する（すべてのテーマで機能します）
- Method 2: Using the WordPress Theme Settings (Varies by the Classic Theme)
方法1：コードを使用してテキスト選択色を変更する（すべてのテーマで機能します）
一部のWordPressテーマには、テキスト選択色の変更機能が組み込まれていますが、すべてではありません。そのため、より普遍的な方法として、カスタムCSSコードを使用することをお勧めします。
WordPressのチュートリアルでは、CSSコードスニペットをテーマの functions.php ファイルに追加するように指示されていることがよくあります。
最大の問題は、コードスニペットのわずかな間違いでもWordPressサイトが完全に壊れてしまう可能性があることです。ましてや、WordPressテーマを更新すると、カスタムコードはすべて失われます。
そこで役立つのが WPCode です。このコードスニペットプラグインを使用すると、エラーを引き起こしたり、サイトにアクセスできなくしたりすることなく、WordPressにカスタムコードを追加するのが簡単になります。
まず最初に行うべきことは、無料のWPCodeプラグインをインストールして有効化することです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、WordPress管理ダッシュボードの Code Snippets » Add Snippet に移動します。
ここで、「カスタムコードを追加（新規スニペット）」にマウスカーソルを合わせます。
表示されたら、「+カスタムスニペットを追加」ボタンをクリックします。
次に、画面に表示されるオプションのリストからコードタイプを選択する必要があります。
このチュートリアルでは、「CSSスニペット」を選択します。
次のページで、カスタムコードスニペットのタイトルを入力します。
後でWordPressダッシュボードでスニペットを識別するのに役立つものなら何でも構いません。「テキスト選択色の変更」など。
次に、以下のCSSをコードプレビューボックスに追加できます：
/* Customizing text selection for Firefox */
::-moz-selection {
/* Background color when text is selected in Firefox */
background-color: #008000; /* Green color */
/* Text color when text is selected in Firefox */
color: #fff;
}
/* Customizing text selection for other browsers */
::selection {
/* Background color when text is selected in other browsers */
background-color: #008000; /* Green color */
/* Text color when text is selected in other browsers */
color: #fff;
}
2つのスタイルを追加したことに注意してください。::moz-selection CSSセレクターはFirefoxブラウザで機能し、::selection CSSセレクターはGoogle Chrome、Safari、IE9+、Operaなどの他の一般的なブラウザで機能します。
上記の例では、#16進数コードはリンクの色を緑に変更するため、ハイライトされたテキストに使用したい色に background-color: #008000 を変更する必要があります。
使用する16進コードがわからない場合は、 HTML Color Codes ウェブサイトでさまざまな色を探索してコードを取得できます。
コードが希望通りになったら、「非アクティブ」トグルをクリックして「アクティブ」に切り替えてください。
次に、「スニペットを保存」をクリックして、CSSスニペットを公開します。
これで、ウェブサイトにアクセスして変更が適用されていることを確認できます。
これは、デモウェブサイトでの表示方法です。
方法2：WordPressテーマ設定を使用する（クラシックテーマによって異なります）
一部のWordPressテーマでは、タイポグラフィやフォントの設定を変更でき、選択したテキストの色も含まれます。お使いのテーマでこれが可能かどうかを確認するには、**外観 » カスタマイズ**に移動する必要があります。
注意：この方法はブロックテーマには適用されません。
ここで、「色」というラベルの付いた設定を探してください。
「一般」、「グローバル」、または類似のタブが表示される場合、そこにはテーマの色設定が含まれていることがよくあります。
例えば、Astra WordPressテーマを使用している場合、[グローバル]タブを選択する必要があります。
その後、「色」をクリックすると、このWordPressテーマを構成するさまざまな色が表示されます。
次に、「アクセント」をクリックする必要があります。
新しいテキスト選択色を選択できるカラーピッカーが開きます。
ライブプレビューが自動的に更新されるため、フォントの色が変わるのを確認できます。したがって、さまざまな設定を試して、WordPressウェブサイトに最適なものを確認できます。
変更に満足したら、「公開」をクリックして公開します。
その後、WordPressブログまたはウェブサイトで新しいテキスト選択色がライブで表示されます。
WordPressテーマカスタマイザーに色の設定が表示されなくても、テーマのドキュメントを確認して、デフォルトのテキスト選択色を変更する方法があるかどうかを確認する価値はあります。
テーマの開発者にヘルプを求めることもできます。詳細については、WordPressサポートを適切に求め、取得する方法に関するガイドを参照してください。
WordPressのタイポグラフィに関するヒントとコツをもっと発見する
WordPressウェブサイトのフォントをカスタマイズしたいけれど、方法がわからないですか？これらのガイドを参考に始めましょう。
- デザインを改善するための最高のWordPressタイポグラフィプラグイン
- WordPressでフォントサイズを簡単に変更する方法
- ウェブセーフフォントとは？ + おすすめのウェブセーフフォント（初心者ガイド）
- WordPressテーマにアイコンフォントを簡単に追加する方法
- WordPress投稿にドロップキャップを追加する方法
このチュートリアルがWordPressでデフォルトのテキスト選択色を変更する方法を学ぶのに役立ったことを願っています。また、WordPressのベストドラッグアンドドロップページビルダーとWordPressでフォントをオンラインで販売する方法に関するガイドも参照してください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
イジー・ヴァネック
最近、あなたの記事を使って、モバイルデバイスのChromeブラウザでヘッダーの色を変更しました。これもウェブサイトを大きくパーソナライズできる小さなディテールです。これらは些細な調整にすぎないことはわかっていますが、あなたのガイドのおかげで、これらの小さなディテールをすべて徐々に完璧にできるのが気に入っています。なぜなら、私の意見では、美しさはディテールにあるからです。素晴らしいチュートリアルと、それを非常に簡単にしてくれたスニペットに感謝します。
マイケル
投稿いただき、誠にありがとうございます！明確で役立ちます。
WPBeginnerサポート
Glad you found our content helpful
管理者
Lynne Clay
コーディングを変更せずに、投稿タイトルの色だけを変更する方法はありますか？コーディングについては何も理解しておらず、それをいじりたくありません。
WPBeginnerサポート
コーディングが必要ですが、コードを理解せずにカスタマイズしたい場合は、CSS Heroのようなプラグインを検討できます。ここではレビューしています：
https://www.wpbeginner.com/plugins/css-hero-review-wordpress-design-customization-made-easy/
管理者
サマル・ジャミール
この素晴らしい投稿に感謝します。
WPBeginnerサポート
You’re welcome
管理者
KrishnaChaitanya
本当にありがとうございます。サービスは素晴らしかったです。学ぶことがたくさんあります。
WPBeginnerサポート
Glad our tutorial was helpful
管理者
Adrian Wallis
ありがとう、Twenty Fourteen Childでうまく機能しました。これで、テンプレートからデフォルトの緑色が消えることを願っています。
ミケーレ
これを試しましたが、うまくいきませんでした… Thesis を使用していますが、関係ありますか？
編集スタッフ
私たちの知る限りではありません。なぜなら、これは基本的なCSSの変更だからです。私たちが考えられる唯一のことは、Thesisがあなたのスタイルを上書きしている可能性があるということです。
管理者
マービン
こんにちは、
コードをGenesis eleven40の子テーマにコピーしましたが、機能しません。
ありがとうございます
編集スタッフ
eleven40が独自のスタイルを事前に定義していない限り、問題なく動作するはずです。その場合、!important値を yoursに追加してオーバーライドする必要があります。
管理者
Lauren
なんてこった。この問題の解決策をインターネットの至る所で必死に探していましたが、何も得られませんでした。しかし、Marvinの質問へのこの回答がそれを解決しました！とても簡単です。本当にありがとうございます!!!!!
デビッド・エイブラムソン
クールなトリックです。Genesisでウェブサイトを構築していますが、テクニカルサポートの担当者が言うように、「水を一杯飲むのと同じくらい簡単」です。
ありがとう！
-デビッド
ブラッド・ダルトン
Chris Coyierが2009年にcss-tricks.comに投稿しました http://css-tricks.com/snippets/css/change-text-selection-color/
編集スタッフ
ああ、ブライアンのサイトで見るまで知りませんでした。
管理者
キース・デイビス
はい、Brian Gardnerさんのサイトで見ました。
彼の記事を読むまで、選択項目の色を変更できるなんて知りませんでした。
使うかどうかはわかりませんが、できると知っておくのは良いことです。
ジョシュ・マッカーティ
これは、多くの人がおそらく気づかないであろう簡単なことの一つですが、ウェブサイトに追加するのに良い「追加機能」です。私は最初にHTML5 Boilerplateでこれを見て、構築するサイトで頻繁に使用しています。
bungeshea
実際には、次のように組み合わせることができます。
::selection,
::-moz-selection {
background-color: #ff6200;
color: #fff;
}
編集スタッフ
Brianのサイトでこのチュートリアルを見ました。彼はそれらを組み合わせると機能しないと提案しています（どの環境で機能しなかったかは不明）。しかし、私たちは機能することがわかっているものに固執します。
管理者
クリーンデジタル
良い投稿ですね。ちょうど私たちのサイトを素敵な赤い背景に更新しました！乾杯！
ガウタム・ドダマニ
genesis has a nice text selection color. your site’s is orange which is cool
追伸：サイトの外観といえば、yoast.comもアップグレードされ、彼も現在genesisフレームワークを使用しています。素晴らしいです！
編集スタッフ
はい、Genesisはサイト構築のための非常に優れたフレームワークです。
管理者