様々なテキストの文字色が用意されているwordpressですが、カラーコードを利用することで自分好みの色にテキストをカスタマイズすることができます。
wordpressのテキストを自分好みの色にカスタマイズしたい人は、ぜひ参考にしてみて下さい。
wordpressのテキストを自分好みの色にカスタマイズする方法
wordpressでは画面上部にあるメニューバーの「テキスト色」で文字色を変えることができます。
![wordpress メニューバー テキスト色](https://photoroamer.jp/wp-content/uploads/2020/03/c2811413c64c184ef22615c78801d3f8.png)
![wordpress メニューバー テキスト色](https://photoroamer.jp/wp-content/uploads/2020/03/c2811413c64c184ef22615c78801d3f8.png)
主な色は最初から用意されていますがカスタム機能のカラーコードを設定することで、より細かな色にテキストをカスタマイズすることができます。
カスタム機能
![wordpress メニューバー テキスト色 カスタム](https://photoroamer.jp/wp-content/uploads/2020/03/d0b30ad0ecd5bec9fd4e0a59ab715696.png)
![wordpress メニューバー テキスト色 カスタム](https://photoroamer.jp/wp-content/uploads/2020/03/d0b30ad0ecd5bec9fd4e0a59ab715696.png)
カラーコード設定
![wordpress メニューバー テキスト色 カスタム色](https://photoroamer.jp/wp-content/uploads/2020/03/8b5181d8e1f27ecc612bae1803ec0e99.png)
![wordpress メニューバー テキスト色 カスタム色](https://photoroamer.jp/wp-content/uploads/2020/03/8b5181d8e1f27ecc612bae1803ec0e99.png)
「#」の箇所に6桁のカラーコードを入れることで自分好みの色を作ることができます。
![](https://photoroamer.jp/wp-content/uploads/2019/12/cf9cd54a125c935cb8bf0dfb2990fe46-e1645953834805-150x150.jpg)
![](https://photoroamer.jp/wp-content/uploads/2019/12/cf9cd54a125c935cb8bf0dfb2990fe46-e1645953834805-150x150.jpg)
![](https://photoroamer.jp/wp-content/uploads/2019/12/cf9cd54a125c935cb8bf0dfb2990fe46-e1645953834805-150x150.jpg)
カラーコードが分からない人は、次のサイトを参考にしながら自分好みの色を探してみて下さい。
![原色大辞典 カラーコード](https://photoroamer.jp/wp-content/uploads/2020/03/7b86f16fef9472ec39b69be04a54b0b7.png)
![原色大辞典 カラーコード](https://photoroamer.jp/wp-content/uploads/2020/03/7b86f16fef9472ec39b69be04a54b0b7.png)
Web上で気になる色のカラーコードを知りたい人はGoogleの拡張機能にある「ColorPick Eyedropper」がおすすめです。
ColorPick EyedropperはWeb上の色をポイントするだけでカラーコードが分かる便利なツールで、気になるサイトに使われているカラーコードを簡単に知ることができます。
![ColorPick Eyedropper カラーコード](https://photoroamer.jp/wp-content/uploads/2020/03/9edbb15fed3226287a010ae7963d7fd7.png)
![ColorPick Eyedropper カラーコード](https://photoroamer.jp/wp-content/uploads/2020/03/9edbb15fed3226287a010ae7963d7fd7.png)
読み取ったカラーコードをカスタム機能に入力すれば、同じ色のテキストを簡単に作成することができます。
wordpressでカスタマイズしたテキスト色を登録する方法
カスタム機能を利用することで簡単に自分好みのテキスト色を作ることができますが、ここで問題が1つ。
カスタム機能で作成した色は作成中のページを閉じたり保存するとリセットされてしまい、もう一度利用する時には再度カスタム機能で色を作成する必要があります。
繰り返し作成すれば問題ありませんが、ページを開くたびにカラーコードを入力して作成するのはかなり面倒です。
そこで、自分の好きなテキスト色を繰り返し使いたい人はAddQuicktagsを利用してみて下さい。
AddQuicktagsは登録したタグをボタン1つで呼び出せるwordpressのプラグインで、吹き出しなども簡単に作成することができます。
![wordpress AddQuicktags](https://photoroamer.jp/wp-content/uploads/2020/03/wordpress-AddQuicktags.png)
![wordpress AddQuicktags](https://photoroamer.jp/wp-content/uploads/2020/03/wordpress-AddQuicktags.png)
プラグインをインストール後、AddQuicktagsの設定画面で4項目を登録するとメニューバーにタグが追加されます。
4項目を設定
![AddQuicktags 利用方法](https://photoroamer.jp/wp-content/uploads/2020/03/83d658c798603615171f06aab87fa0c5.png)
![AddQuicktags 利用方法](https://photoroamer.jp/wp-content/uploads/2020/03/83d658c798603615171f06aab87fa0c5.png)
メニュバーにタグ追加
![AddQuicktags メニューバー](https://photoroamer.jp/wp-content/uploads/2020/03/e5101d8037d255cdf8a1c8195365a615.png)
![AddQuicktags メニューバー](https://photoroamer.jp/wp-content/uploads/2020/03/e5101d8037d255cdf8a1c8195365a615.png)
- 設定②のコード:<span style=”color: #FFFFFF;”>
- #後のFに登録したい6桁のカラーコードを入力
タグ追加後はテキスト色の変更と同じようにメニューバーのAddQuicktagsからテキスト色を変更することができます。