WordPressでテキストの色を変更する方法（すべてのテーマに対応）

WordPress を使い始めた当初、テキストの色を変更するのは簡単だと思っていました。しかし、テーマ、設定、または使用しているエディターによって異なる場合があることにすぐに気づきました。

何千人もの初心者がWordPressウェブサイトをカスタマイズするのを支援してきた経験から、これは多くのユーザーにとって一般的な悩みであることを私たちは知っています。

良いニュースは、どのテーマを使用していても、WordPress でテキストの色を変更する簡単な方法がいくつかあることです。

このステップバイステップガイドでは、WordPressでテキストの色をカスタマイズする最も簡単な方法を順を追って説明します。

WordPressでテキストの色を変更する理由

WordPressでテキストの色を変更すると、重要なコンテンツを強調表示し、可読性を向上させ、サイトのブランディングに合わせることができます。

例えば、ランディングページで行動喚起を強調したり、サイトで色付きの小見出しを使用したりできます。

場合によっては、ウェブサイト全体のテキストの色を変更したいこともあります。たとえば、WordPressのテーマがグレーのフォントカラーを使用しているが、背景色とのコントラストを高めるために黒を使用したい場合などです。

色を使用して訪問者から感情を引き出すこともできます。たとえば、多くの人は青が信頼と安心感を生み出すと考えています。

詳細については、WordPressウェブサイトに最適なカラー配色の選び方に関するガイドをご覧ください。

それでは、WordPressでテキストの色を変更する方法を見てみましょう。

下のリンクをクリックして、希望する方法にジャンプしてください。

• Method 1: How to Change Text Color in Block Editor
  • 単語やフレーズのテキストカラーを変更する
• 方法2：テーマカスタマイザーでテキストの色を変更する方法（クラシックテーマのみ）
• 方法3：サイト全体エディターでテキストの色を変更する方法（ブロックテーマのみ）
• 方法4：CSSコードでテキストの色を変更する方法（よりカスタマイズ可能）
• 方法5：ページビルダーでテキストの色を変更する方法
• テキスト色の変更に関するよくある質問

方法1: ブロックエディターでテキストの色を変更する方法

投稿内の単語、段落、または見出しをいくつか変更したいだけであれば、WordPressコンテンツエディターを使用できます。この方法は、ブロックテーマまたはクラシックテーマのどちらを使用しているかに関わらず機能します。

開始するには、テキストの色を変更したい投稿またはページを開くか、新しいページを作成してください。

まだ行っていない場合は、カスタマイズしたいテキストを入力します。テキストによっては、段落、見出し、またはテキストを受け付けるその他のブロックを追加する必要がある場合があります。これについては、WordPressブロックエディターの使用方法に関するガイドを参照してください。

テキストがいくつかあれば、その色を変更する準備ができています。

ブロックのテキスト色の変更

この最初の例では、ブロック全体のテキストの色を変更します。これは、段落全体など、コンテンツのセクション全体を強調するのに適した方法です。

ブロックをクリックし、右側のメニューで「ブロック」タブを選択するだけです。

それが完了したら、「カラー」セクションを見つけて「テキスト」をクリックします。

ビジュアルエディターには、WordPressテーマを引き立てるいくつかの色が現在表示されます。ブロック内のすべてのテキストを変更するには、いずれかの色をクリックするだけです。

別の色を使用するには、ポップアップの上部にあるボックスをクリックするだけです。

これにより、新しいフォントカラーを選択できるピッカーが開きます。

もう1つのオプションは、特定の色のHTMLコードである16進数コードを入力することです。これは、ウェブサイトのロゴの正確な赤色のような、非常に特定の色を使用したい場合に便利です。

どのHEXコードを使用すればよいかわからない場合は、HTMLカラーコードのようなサイトを参照すると役立つかもしれません。ここでは、さまざまな色を探索し、そのHEXコードを取得できます。

コードを入手したら、「16進数」ボックスに貼り付けるか入力します。

気分が変わってデフォルトのテキストカラーに戻したい場合は、右側のメニューにある点線のボタンをクリックするだけです。

表示されるオプションは、ブロックの背景色を変更したかどうかによって異なります。そのため、「テキスト」または「すべてリセット」をクリックする必要がある場合があります。

単語やフレーズのテキストカラーを変更する

特定の単語、フレーズ、または文、例えばあなたのランディングページの行動喚起（call to action）の色だけを変更したい場合があります。

これを行うには、WordPressブロックエディターで変更したい単語またはフレーズをハイライトするだけです。次に、コンテンツエディターツールバーの小さな下向き矢印をクリックし、「ハイライト」をクリックします。

これにより、現在のテーマと相性の良い色がいくつか表示されるポップアップが開きます。

上記と同じ手順で、手動で色を選択したり、16進数コードを使用したりすることもできます。

プロのヒント: リンクの色を変更したいですか？WordPressのリンクの色を変更する方法に関する初心者向けガイドをご覧ください。WordPressのリンクの色を変更する方法。

方法2: テーマカスタマイザーでテキストの色を変更する方法 (クラシックテーマのみ)

色はページの最も重要なコンテンツに注意を引くことができますが、多くの異なる色は圧倒される可能性があります。それを念頭に置いて、通常はWordPressウェブサイトのほとんど全体で同じテキスト色を使用したいと思うでしょう。

各ページや投稿をブロックエディターで手動で変更するのは時間がかかるため、代わりにテーマカスタマイザーを使用してテーマ自体を変更することをお勧めします。

注意: テーマカスタマイザーが見つからない場合は、ブロックテーマを使用している可能性が高いため、方法3にスキップできます。

開始するには、外観 » カスタマイズに移動します。

次に、テーマのテキスト設定を見つける必要があります。テーマによって異なりますが、通常は「タイポグラフィ」オプションを探す必要があります。

画像では、OceanWPを使用しています。

「タイポグラフィ」または類似の設定をクリックしてください。この時点で、通常、テーマで使用されている見出し1やページタイトルなど、さまざまな種類のテキストが表示されます。

投稿やページのテキストを変更するには、「本文」または類似のセクションをクリックします。

テキスト色をカスタマイズするには、「フォントの色」セクションを見つけます。

次に、「カラーを選択」をクリックします。

これでピッカーが開きます。既製の色のいずれかを使用するか、設定を使用して新しい色を選択するか、16進数コードを入力できます。

いつでもテーマのデフォルトの色に戻したい場合は、「デフォルト」をクリックするだけです。

これらの設定を使用して、フォントサイズ、スタイル、文字間隔などを変更することもできます。

テキストの外観に満足したら、画面上部にある「公開」ボタンをクリックします。

方法3：サイト全体エディターでテキストの色を変更する方法（ブロックテーマのみ）

ブロックベースのテーマ（例：ThemeIsle Hestia ProやTwenty Twenty-Three）を使用している場合、テーマのテキストカラーを変更する手順は少し異なります。

フルサイトエディターを使用してテキストをカスタマイズするには、テーマ » エディターに移動します。

これで、ウェブサイトの外観をカスタマイズするためのいくつかのメニューが表示されます。

ここで「スタイル」を選択します。このセクションでは、ウェブサイトのグローバルカラー、タイポグラフィ、レイアウトを定義します。

次の画面で、いくつかのスタイルの組み合わせを選択できます。ブロックテーマの外観を完全に変更したい場合は、利用可能なオプションのいずれかを選択するだけです。

ただし、デモンストレーションのために、「編集スタイル」鉛筆ボタンをクリックします。

これでフルサイトエディターに到着し、スタイルタブが開かれます。

「カラー」をクリックしましょう。

サイドバーには、テキスト、リンク、キャプション、ボタン、見出しなど、色設定を変更できる要素が表示されます。

それぞれ異なるカラー設定があるので、どのようなことができるか確認するためにぜひ探してみてください。

例として、「見出し」をクリックしてみましょう。

見出しの色を変更するには、定義済みのテーマカラーのいずれかを選択するか、カラーセレクターをクリックしてカスタムカラーを使用できます。

テキストの色合いに満足したら、「保存」ボタンをクリックするだけです。行ったすべての変更は、すべてのページと投稿に適用されます。

詳細については、WordPressのフルサイト編集に関する初心者向けガイドをご覧ください。WordPressのフルサイト編集。

方法4：CSSコードでテキスト色を変更する方法（よりカスタマイズ可能）

ウェブサイトのテキストカラーをより細かく制御したい場合や、テーマ設定で利用できない要素を変更する必要がある場合は、カスタムCSSコードを追加するのが優れた解決策です。

この強力な方法は高度にカスタマイズ可能で、サイト全体の見出しや段落などの特定のテキストタイプを対象にできます。

サイト全体でテキストをカスタマイズできるのは、カスタムCSSを追加することで可能です。さらに良いことに、この方法では、見出し1（h1）や段落テキスト（p）など、特定の種類のテキストに異なる色を定義できます。

WordPressテーマの編集とカスタマイズはテーマごとに異なる可能性があるため、カスタムCSSをサイトに追加するにはWPCodeの使用をお勧めします。

WPCodeは、100万以上のWordPressサイトで使用されている最高のコードスニペットプラグインです。WordPressのコアファイルを編集することなく、カスタムCSS、PHP、HTMLなどを簡単に追加できます。

まず、無料のWPCodeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、コードスニペット » スニペットを追加に移動します。

ここで、サイトに追加できるすべての既製のWPCodeスニペットが表示されます。

「カスタムコードを追加」にマウスカーソルをホバーし、表示されたら「スニペットを使用」を選択するだけです。

開始するには、カスタムコードスニペットのタイトルを入力します。これは、WordPressダッシュボードでスニペットを識別するのに役立つものであれば何でも構いません。

その後、「コードの種類」ドロップダウンを開き、「CSSスニペット」を選択します。

次に、小さなコードエディターにカスタムCSSを追加できます。カスタマイズしたいテキストの種類のセレクターと、使用したい色の16進数コードを入力する必要があります。

たとえば、次を追加することで段落テキストの色を変更できます。

p { color:#990000; } 

サイトの見出しに別の色を使用したい場合は、h1、h2、h3などのセレクターを使用する必要があります。

下の画像で確認できます。

使用する16進数コードがわからない場合は、HTMLカラーコードのようなサイトを使用できます。

スニペットに満足したら、「挿入」セクションまでスクロールします。WPCodeは、各投稿の後、フロントエンドのみ、または管理画面のみなど、さまざまな場所にCSSを追加できます。

WordPressブログ全体でテキストを変更するには、まだ選択されていない場合は「自動挿入」をクリックします。次に、「場所」ドロップダウンメニューを開き、「サイト全体ヘッダー」を選択します。

それが終わったら、画面の上部までスクロールし、「非アクティブ」トグルをクリックして「アクティブ」に変更します。

最後に、「スニペットを保存」をクリックして、CSSスニペットをライブにします。

これで、サイトにアクセスすると、カスタムテキストがライブで表示されます。

任意の時点で異なるテキストカラーを使用したい場合や、そのスニペットにさらにCSSを追加したい場合は、コードスニペット » コードスニペットに移動してください。ここで、作成したスニペットにマウスカーソルを合わせると表示される「編集」をクリックします。

新しい色を使用するようにコードスニペットを編集し、「スニペットを保存」をクリックすると、変更がウェブサイトで公開されます。

テキストの色だけでなく、WPCode を使用して、テキストを選択したときのデフォルトの色を変更したり、ページや投稿のコンテンツでテキストのハイライトを有効にしたりすることもできます。

方法5：ページビルダーでテキストの色を変更する方法

多くの場合、ランディングページはウェブサイトの他の部分とは異なる外観にしたいと思うでしょう。これにより、目立ち、より多くのコンバージョンを獲得できます。

これは、バイラル待機リスト用とGoogle広告キャンペーン用の複数のランディングページがある場合に特に重要です。これらの各ページは、異なるオーディエンスやマーケティングチャネルを効果的にターゲットにするために、独自のデザインと配色が必要になる場合があります。

ランディングページやセールスページを作成したい場合は、SeedProd の使用をお勧めします。試した中で、これは市場で最高のページビルダーであり、使いやすいドラッグアンドドロップページビルダーを備えています。

SeedProdには90以上のブロックが付属しており、レイアウトにドラッグアンドドロップするだけで配置できます。その後、テキストカラーの変更など、さまざまな方法でこれらのブロックを微調整できます。

より多くのコンバージョンを獲得するためにカスタムページを使用している場合、SeedProdは、コンバージョン管理ですでに使用している可能性のある多くの人気サードパーティツールと連携します。

これらには、トップのメールマーケティングサービス、 WooCommerce、 Google Analyticsなどが含まれます。

まず、SeedProdをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

プラグインを有効化すると、SeedProdはライセンスキーを要求します。

この情報はSeedProdウェブサイトのあなたのアカウントで見つけることができます。ライセンスキーを入力したら、「キーの検証」ボタンをクリックしてください。

次に、SeedProd » Pagesにアクセスし、「新しいランディングページを追加」ボタンをクリックする必要があります。

その後、テンプレートを選択します。SeedProdには300以上のプロフェッショナルにデザインされたテンプレートがあり、独自の画像、テキスト、色などでカスタマイズできます。

テンプレートを選択するには、マウスカーソルを合わせ、[チェックマーク]アイコンをクリックするだけです。

すべての画像で「Juicy Sales Page」テンプレートを使用していますが、どのデザインでも使用できます。

次に、カスタムページの名称を入力します。SeedProdはページのタイトルに基づいてURLを自動的に作成しますが、このURLは好きなものに変更できます。

入力した情報に満足したら、「保存してページの編集を開始」ボタンをクリックします。

次に、SeedProdのドラッグ＆ドロップページビルダーに移動し、テンプレートをカスタマイズできます。

SeedProdエディタは、右側にデザインのライブプレビュー、左側にいくつかのブロック設定を表示します。

左側のメニューにも、レイアウトにドラッグできるブロックがあります。

例えば、ボタンや画像などの標準ブロックをドラッグアンドドロップしたり、カウントダウンタイマー、ローテーションするお客様の声、ソーシャル共有ボタンなどの高度なブロックを使用したりできます。

SeedProdには、「セクション」という、一緒に使用されることが多いブロックのコレクションもあります。たとえば、SeedProdにはヘッダー、ヒーロー画像、コールトゥアクション、お客様の声、 お問い合わせフォーム、 よくある質問、機能、フッターセクションなどがあります。これにより、プロフェッショナルにデザインされたページを素早く作成できます。

さまざまなセクションを確認するには、「セクション」タブをクリックするだけです。セクションをプレビューするには、マウスカーソルをその上にホバーし、虫眼鏡アイコンをクリックします。

セクションをデザインに追加するには、「このセクションを選択」をクリックするだけです。

これにより、セクションがページの下部に追加されます。

ドラッグ＆ドロップでセクションやブロックをレイアウト内で移動できます。

ブロックをカスタマイズするには、レイアウトでクリックして選択するだけです。左側のメニューに、そのブロックを設定するために使用できるすべての設定が表示されます。

テキストの色を変更するには、テキストが含まれるブロックをクリックするだけです。

左側のメニューで「詳細設定」タブを選択します。「スタイル」の下にある「色」をクリックします。

これによりポップアップが表示され、新しいテキスト色を選択できます。

他のオプションとして、'Hex'フィールドに16進コードを入力する方法があります。

これで、上記で説明したのと同じプロセスに従うだけで、他のブロックのテキスト色を変更できるようになります。

ページの見た目に満足したら、「保存」ボタンをクリックして公開します。次に、「公開」を選択します。

オンラインストア、ブログ、またはウェブサイトにアクセスすると、カスタムテキストカラーがすべて表示された新しいページが実際に表示されます。

テキスト色の変更に関するよくある質問

WordPressでテキストの色を変更することについて、読者からよく寄せられる質問を以下に示します。

ウェブサイト全体のテキストの色を変更する最も簡単な方法は？

最善の方法は、テーマに組み込まれている設定を使用することです。クラシックテーマの場合、WordPressカスタマイザーの「外観 » カスタマイズ」の下、通常は「タイポグラフィ」または「色」タブで見つけることができます。

モダンなブロックテーマでは、テーマ » エディターに移動し、「スタイル」アイコンをクリックすることで、グローバルカラーを設定できます。これにより、すべてのページで一貫した外観が保証されます。

WordPress でテキストの色を変更できないのはなぜですか？

この問題は、テーマのスタイルシート（CSS）がエディターで選択した設定を上書きしている場合に発生することがよくあります。テーマのコードには、テキスト色に対してより具体的なルールがある可能性があります。このような場合は、独自のカスタムCSSを追加すること（方法4で示す）が、目的の色変更を強制する最も信頼性の高い方法です。

テキストの色とアクセシビリティに関するベストプラクティスは何ですか？

アクセシビリティのため、テキストとその背景色の間に高いコントラストを確保することは非常に重要です。これにより、視覚障害のある訪問者にとってコンテンツが読みやすくなります。カラーコンビネーションがアクセシビリティ基準を満たしていることを確認するために、WebAIM Contrast Checkerのようなオンラインツールを使用することをお勧めします。

このチュートリアルでWordPressのテキストカラーを変更する方法を学べたことを願っています。また、WordPressにフォントサイズ変更機能を追加する方法や、モバイルフレンドリーなWordPressサイトを作成する方法に関するチュートリアルも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。