ワードプレスの各種設定

【超簡単】WordPress5.0以降で文字色をサクサクっと変更する方法

こんにちは。山ばりゅです。

今回は、WordPress5.0で記事を作成する際、フォントカラー(文字色)を変更する方法についてご紹介したいと思います。

こちらは、前回ご紹介した文字サイズの変更のようにHTMLタグを直接入力しなくても、WPのツールバーに搭載されている、記事作成サポート機能を使って行うことができ、やり方自体もめちゃくちゃ簡単です。

ぜひ、あなたのブログやサイトにひとさじのアクセントを盛り込むためにも、ぜひ今回も最後までお付き合いいただけましたらと思います。

WordPress5.0以降でフォントカラーをサクッと楽して変更

少し前までは、サイトやホームページを作成する際、文字色を変更して、記事にアクセントをつけたければ、HTMLタグを使ってカラーコードを直接入力する必要がありました。

しかしながら、現在はWPや他のブログ作成サービスなどでも、色を選択すれば自動的にフォントカラーが変更されるようになり、プログラミングの知識なくとも、クオリティの高いブログやサイトが作れるようになってきました。

この辺りは、本当に非常にありがたいところですよね。

少し前に私たちユーザーがひっくり返るような大型アップデートをしたWordPress5.0以降でもこれは引き継がれております。

カラーコードとは

カラーコードというものを簡単に説明させていただくと、文字色や背景をウェブ上で表現したい時、それに対応する色にあてがわれた文字列のことで、「#」の後に6文字の英数字を組み合わせたものです。

例を少し挙げると、

  • 黒のカラーコード:#000000
  • 白のカラーコード:#FFFFFF
  • 黄色のカラーコード:#FFFF00

ってな感じですね。

ちなみにウェブで表現されている色は「RGBカラー」といい

  • R:Red(赤)
  • G:Green(緑)
  • B:Blue(青)

の光の三原色から構成されております。こちらは深掘っていくと結構深いので今回はサラッとこの辺りで。

では、早速フォントカラーを変更する方法についてご紹介していきましょう。

WordPress5.0以降でフォントカラーを変更する手順

まずは記事作成画面で、フォントカラーを変更したい文字列をドラックして選択します。

ドラックして文字列を選択したら、ツールバーのテキスト色の下三角をクリックします。

するとこのように、用意されている色が表示されますので、候補の中から変更したい色をクリックします。

これで色の変更は完了。文字の色が変更されました。

ね。めっちゃ簡単でしょ。

候補にない色を指定したい時

この候補にない色を指定したい時は、候補の色の下にある「カスタム」をクリックします。

するとこのように、カラーピッカーウィンドウが起動しますので、真ん中より少し右にある、カラーバーのスクロールバーを動かして、ご希望の色に近いところに移動させ、左の正方形のカラーピッカーで色を指定すれば、候補にない詳細な色の指定も行うことができます。

また、カラーコードを直接入力する場合は、「#」のボックスに該当するカラーコードを入力します。

カラーコードはこちらのサイトで詳細にアップして下さっておりますので、是非ご参考いただければと思います。

カラーピッカー、カラーコードで色を指定し終われば、「OK」をクリックして設定を完了させます。

これで、候補にない色の指定は完了です。

最後に

いかがだったでしょう。今回はWordPress5.0以降でツールバーのサポートツールを使ってフォントカラーを変更する方法についてご紹介させていただきました。

ぜひ、ご参考いただければ幸いです。

ちなみにHTMLタグを使って直接フォントカラーを変更するには、記事作成画面をコードエディタに変更して、タグを直接入力することにより、変更することもできます。

タグを一応ご紹介しておくと、

<font color="#ご希望のカラーコード">色を変更する文字列</font>

になります。

ただ、コードを直接入力する場合、一文字でも違ったり、スペースなどが入ると反映されず、場合によっては記事の構成に大きな崩れが生じる場合がありますので、タグを入力する時は、くれぐれもお気をつけいただければと思います。

ビジュアルエディタをコードエディタに変更する方法はこちらの記事をご覧いただければと思います。

WordPress5.0 ビジュアルとテキストの簡単切り替え方法

こんにちは(^^♪山ばりゅです。 ワードプレス、今回のアップグレードでメッチャ大幅に変更かけてきましたね~。。。もう5.0へのアップグレード、済まされました?? 僕も先日、アップグレードを済ませて、さ ...

では、今回はこの辺りで。今回の記事があなたのブログやホームページの更なるクオリティアップのお役に立てれば幸いです。

記事が役に立ったらクリックプリーズ(^^♪

おススメの記事

-ワードプレスの各種設定
-