WordPressの初期設定のテキスト選択色を変更したいですか？
時には、初期設定のテキストセクションの色と背景色のコントラストを強くしたい場合もあるでしょう。こうすることで、ユーザーはコンテンツで何が強調されているのかがよくわかります。
この投稿では、WordPressテーマのデフォルトのテキスト選択色を変更する方法を紹介する。
WordPressでテキスト選択の初期設定を変更する理由
テキスト選択色とは、コンテンツ内のテキストをハイライトしたときに表示される色のことです。こんな感じ：
場合によっては、WordPressサイトのデザインに合わないため、この色を変更したいと思うかもしれません。配色は、サイトの見栄えを良くし、一貫したブランド体験を維持するための重要な権限グループです。
WordPressでブログを運営している場合、テキストの選択色が他のコンテンツより目立たず、読みにくいと思うのであれば、初期設定を変更することもできる。
ということで、WordPressで初期設定のテキスト選択色を変更する方法を見てみましょう。以下のリンクから、使いたい方法にジャンプしてください：
方法1：WordPressのテーマ設定を使う（簡単）
WordPressテーマの中には、デフォルトのテキスト選択色を含め、タイポグラフィやフォントの設定を変更できるものがあります。あなたのテーマがそうであるかどうかを確認するには、外観 ” カスタマイズに行く必要があります。
注： ブロックテーマを使用している場合、このオプションはありませんので、テキスト選択色を変更するには方法2に進む必要があります。
ここで、「Colors（色）」と書かれた設定を探します。
General（全般）」や「Global（グローバル）」などのタブがある場合は、テーマのカラー設定がコンテナに含まれていることが多い。
例えば、人気のWordPressテーマ「Astra」を使用している場合、「Global」タブを選択する必要があります。
その後、このWordPressテーマを構成するすべての異なる色を表示するには、「色」をクリックします。
次に「アクセント」をクリックする。
カラーピッカーが表示され、新しいテキスト選択色を選ぶことができます。
変更を加えると、ライブプレビューは自動的に更新されます。そのため、さまざまな設定を試して、WordPressサイトに最適な設定を確認することができます。
変更に満足したら、「公開する」をクリックするだけです。
その後、WordPressブログやサイトに新しいテキスト選択色が表示されます。
WordPressテーマのカスタマイザーに色の設定がない場合でも、テーマのドキュメンテーションをチェックして、デフォルトのテキスト選択色を変更する方法があるかどうかを確認する価値はある。
テーマの開発者に助けを求めることもできます。詳しくは、WordPressのサポートを正しく依頼し、サポートを受ける方法をご覧ください。
方法2：コードを使用してテキスト選択色を変更する（すべてのテーマで動作します）
テーマ・カスタマイザーでテキスト選択色を変更する方法が見つからない場合は、CSSコードを使うという設定もあります。
WordPressのチュートリアルには、テーマのfunctions.phpファイルにCSSを追加する方法が書かれていることがよくあります。
最大の問題は、コード・スニペットの小さなミスでもWordPressサイトを完全に壊してしまう可能性があることだ。言うまでもなく、WordPressテーマを更新すると、すべてのカスタムコードを失うことになる。
そこでWPCodeの登場です。このコードスニペットプラグインを使えば、エラーを起こしたりサイトにアクセスできなくなったりすることなく、WordPressにカスタムコードを簡単に追加することができる。
最初に行う必要があるのは、無料のWPCodeプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化したら、WordPress管理ダッシュボードのCode Snippets ” Add Snippetにアクセスしてください。
ここで、「カスタムコードを追加」にマウスオーバーするだけです。
外観が表示されたら、「Use snippet」ボタンをクリックする。
はじめに、カスタムコードスニペットのタイトルを入力します。これは、後でWordPressダッシュボードでスニペットを識別するのに役立つものであれば何でも構いません。
その後、’コードタイプ’ドロップダウンを開き、’CSSスニペット’を選択する必要があります。
次に、コード・プレビュー・ボックスに以下の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セレクタはFirefoxブラウザで動作し、::selectionセレクタはGoogle Chrome、Safari、IE9+、Operaなどの他の一般的なブラウザで動作します。
上の例では、#の16進コードはリンクの色を緑に変更するので、 background-colorを変更する必要があります： #をハイライト・テキストに使用したい色に変更する必要があります。
どの16進コードを使えばいいかわからない場合は、HTML Color Codesサイトでさまざまな色とそのコードを調べることができる。
コードの見た目に満足したら、’Inactive’トグルをクリックして、代わりに’Active’を表示させる。
そして「Save Snippet」をクリックして、CSSスニペットをライブにする。
このサイトでは、変更を実際に確認することができます。
デモサイトではこんな感じ。
WordPressタイポグラフィのヒントとコツをもっと見る
WordPressサイトのフォントをカスタマイズしたいけれど、方法がわからない？まずはこれらのガイドをご覧ください：
- デザインを向上させるWordPressタイポグラフィプラグインベスト
- WordPressでフォントサイズを簡単に変更する方法
- ウェブセーフフォントとは＋ベストウェブセーフフォント（初心者ガイド）
- WordPressテーマにアイコンフォントを簡単に追加する方法
- WordPressの投稿にドロップキャップを追加する方法
このチュートリアルで、WordPressの初期設定のテキスト選択色を変更する方法をご理解いただけたでしょうか。また、WordPress用の最高のドラッグ＆ドロップページビルダーや、WordPressを使ってオンラインでフォントを販売する方法についてのガイドもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Michael says
Thank you so much for your post ! Clear and useful.
WPBeginner Support says
Glad you found our content helpful
管理者
Lynne Clay says
Is there a way to change just my posts titles color without having to change the coding? I don’t understand anything about coding and don’t want to mess with that anyway.
WPBeginner Support says
While it requires coding, if you wanted customizations without needing to understand the code you could look into a plugin such as CSS Hero which we have reviewed here:
https://www.wpbeginner.com/plugins/css-hero-review-wordpress-design-customization-made-easy/
管理者
Samar Jamil says
Thanks for this awesome post.
WPBeginner Support says
You’re welcome
管理者
KrishnaChaitanya says
Thank you very much, your service was excellent. Lot to learn from you.
WPBeginner Support says
Glad our tutorial was helpful
管理者
Adrian Wallis says
Thanks, it worked great for me in a Twenty Fourteen Child. Hopefully that is the last of the default green gone from template
Michele says
I tried this but it didn’t work… I’m using Thesis, does that make a difference?
Editorial Staff says
Not that we know of because it is a basic CSS change. The only thing we can think of is that thesis is overriding your styles maybe?
管理者
Marvin says
Hello there,
I just copied your code in my Genesis eleven40 child theme but it is not working.
Thank You
Editorial Staff says
It should work just fine unless eleven40 has it’s own styles pre-defined. In which case you would need to override them by adding an !important value in yours.
管理者
Lauren says
Oh my gosh. I have been searching tirelessly all over the internet for the solution to this problem, but to no avail. But this response to Marvin’s question solved it! So simple. Thanks so much!!!!!
David Abramson says
Cool trick. I am working on a website in Genesis and like my tech support guy says, “it’s as easy as drinking a glass of water”
Thanks!
-David
Brad Dalton says
Chris Coyier posted this on css-tricks.com back in 2009 http://css-tricks.com/snippets/css/change-text-selection-color/
Editorial Staff says
Ah well, didn’t know about it until we saw it on Brian’s site.
管理者
Keith Davis says
Yes I saw it on Brian Gardner’s site.
Never knew you could change the selection colours until I read his article.
Not sure if I would ever use it, but nice to know it can be done.
Josh McCarty says
This is one of those simple things that many people probably won’t notice, but it’s a nice “extra” to add to a website. I first saw it in HTML5 Boilerplate and use it frequently on sites that I build.
bungeshea says
You actually can combine them, like this:
::selection,
::-moz-selection {
background-color: #ff6200;
color: #fff;
}
Editorial Staff says
We saw this tutorial on Brian’s site. He suggests that combining them will not work (not sure which environment it was not working). But we’d stick with what we know works.
管理者
Clean Digital says
Nice post. Just updated our site with a nice red background! Cheers!
Gautam Doddamani says
genesis has a nice text selection color. your site’s is orange which is cool
p.s. speaking about site appearances, yoast.com got an upgrade too, he is also now using the genesis framework kudos to that!
Editorial Staff says
Yup, Genesis is a very good framework to build your site on.
管理者