訪問者がウェブサイトでテキストを選択したときの表示に気づいたことはありますか？ブランドカラーに合わせるために、作業しているウェブサイトのテキスト選択色を更新する必要がある場合があり、多くのユーザーがその方法を尋ねています。
幸いなことに、この見過ごされがちなデザイン要素をカスタマイズするのは、思っているよりも簡単です。ブランドカラーに合わせたい場合でも、可読性を向上させたい場合でも、テキスト選択の色を変更することで、ウェブサイトのユーザーエクスペリエンスを向上させることができます。
このガイドでは、WordPressでデフォルトのテキスト選択色を変更する方法を正確に説明します。
WordPressでデフォルトのテキスト選択色を変更する理由
テキスト選択色とは、WordPressでコンテンツ内のテキストの一部をハイライトしたときに表示されるフォントの色のことです。例えば、次のような場合です。
場合によっては、WordPressのウェブサイトのデザインとうまく合わないため、この色を変更したい場合があります。配色は、サイトを良く見せ、一貫したブランド体験を維持するために重要な役割を果たします。
もしWordPressブログを運営しているなら、デフォルトのテキスト選択色が他のコンテンツから十分に目立たず、読みにくいと感じる場合は、その色を変更したいと思うかもしれません。
それを踏まえた上で、WordPressでテキスト選択のフォントカラーを変更する方法を見てみましょう。以下のリンクを使用して、使用したい方法にジャンプしてください。
方法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カラーコードのウェブサイトでさまざまな色を探索し、そのコードを取得できます。
コードが希望通りになったら、「非アクティブ」トグルをクリックして「アクティブ」に切り替えてください。
次に、「スニペットを保存」をクリックして、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
管理者
リン・クレイ
コーディングを変更せずに、投稿タイトルの色だけを変更する方法はありますか？コーディングについては何も理解しておらず、それをいじりたくありません。
WPBeginnerサポート
コーディングが必要ですが、コードを理解せずにカスタマイズしたい場合は、CSS Heroのようなプラグインを検討できます。ここではレビューしています：
https://www.wpbeginner.com/plugins/css-hero-review-wordpress-design-customization-made-easy/
管理者
サマル・ジャミール
この素晴らしい投稿に感謝します。
WPBeginnerサポート
You’re welcome
管理者
クリシュナチャイタニヤ
本当にありがとうございます。サービスは素晴らしかったです。学ぶことがたくさんあります。
WPBeginnerサポート
Glad our tutorial was helpful
管理者
エイドリアン・ウォリス
ありがとう、Twenty Fourteen Childでうまく機能しました。これで、テンプレートからデフォルトの緑色が消えることを願っています。
ミケーレ
これを試しましたが、うまくいきませんでした… Thesis を使用していますが、関係ありますか？
編集スタッフ
私たちの知る限りではありません。なぜなら、これは基本的なCSSの変更だからです。私たちが考えられる唯一のことは、Thesisがあなたのスタイルを上書きしている可能性があるということです。
管理者
マービン
こんにちは、
コードをGenesis eleven40の子テーマにコピーしましたが、機能しません。
ありがとうございます
編集スタッフ
eleven40が独自のスタイルを事前に定義していない限り、問題なく動作するはずです。その場合、!important値を yoursに追加してオーバーライドする必要があります。
管理者
ローレン
なんてこった。この問題の解決策をインターネットの至る所で必死に探していましたが、何も得られませんでした。しかし、Marvinの質問へのこの回答がそれを解決しました！とても簡単です。本当にありがとうございます!!!!!
デビッド・エイブラムソン
クールなトリックです。Genesisでウェブサイトを構築していますが、テクニカルサポートの担当者が言うように、「水を一杯飲むのと同じくらい簡単」です。
ありがとう！
-デビッド
ブラッド・ダルトン
Chris Coyierは2009年にcss-tricks.comにこれを投稿しました http://css-tricks.com/snippets/css/change-text-selection-color/
編集スタッフ
ああ、ブライアンのサイトで見るまで知りませんでした。
管理者
キース・デイビス
はい、Brian Gardnerさんのサイトで見ました。
彼の記事を読むまで、選択項目の色を変更できるなんて知りませんでした。
使うかどうかはわかりませんが、できると知っておくのは良いことです。
ジョシュ・マッカーティ
これは、多くの人がおそらく気づかないであろう簡単なことの一つですが、ウェブサイトに追加するのに良い「追加機能」です。私は最初にHTML5 Boilerplateでこれを見て、構築するサイトで頻繁に使用しています。
ブンゲシェア
実際には、次のように組み合わせることができます。
::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はサイト構築のための非常に優れたフレームワークです。
管理者