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

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

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

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

個々のブロック、グローバルテーマ設定（カスタマイザーまたはフルサイトエディター）、カスタムCSS、またはページビルダーを使用して、テキストの色を調整できます。

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

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

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

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

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

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

詳細については、WordPressウェブサイトに最適なカラー スキームを選択する方法に関するガイドをご覧ください。

それでは、WordPressでテキストの色を変更する方法を見てみましょう。以下のリンクを使用して、好みの方法にジャンプしてください。

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

WordPressブロックエディターで、特定の単語、フレーズ、またはブロック全体のテキストの色を変更するには、目的のテキストまたはブロックを選択します。次に、ブロックサイドバーの「色」設定またはツールバーの「ハイライト」オプションを使用して、新しい色を選択します。

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

ステップ1：ブロックエディターで投稿またはページを開く

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

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

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

ステップ2：ブロックのテキストの色を変更する

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

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

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

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

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

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

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

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

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

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

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

ステップ3：単語またはフレーズのテキストの色を変更する

場合によっては、スqueezeページの行動喚起など、特定の単語、フレーズ、または文の色のみを変更したい場合があります。

これを行うには、WordPressブロックエディターで変更したい単語またはフレーズをハイライトします。次に、コンテンツエディターツールバーの小さな「A」アイコン（「テキストの色」ボタン）をクリックします。これにより、カラーピッカーポップアップが表示されます。

テーマのデフォルトの色から選択したり、カスタム色を選択したり、16進数コードを入力したりできます。

フォントの色を変更するには、カラーピッカー内の「テキスト」オプションを選択していることを確認してください。別の「背景」オプションは、テキストの背景色を変更します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ThemeIsle Hestia ProやTwenty Twenty-Fiveのようなブロックベースのテーマを使用している場合、テーマのテキストの色を変更するプロセスは少し異なります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この強力な方法は高度にカスタマイズ可能で、見出し（h1、h2など）や段落（p）のような特定のテキストタイプをターゲットにして、サイト全体で色を変更できます。

簡単な変更の場合は、WordPressダッシュボードの外観 » カスタマイズ » 追加CSSから直接カスタムCSSを追加できます。

提供されたボックスにCSSコードを貼り付けて、「公開」をクリックするだけです。これは、追加のプラグインを必要とせずに、軽微な調整には十分な場合が多いです。

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

WPCodeは、100万以上のWordPressウェブサイトで使用されている最高のコードスニペットプラグインです。これにより、初心者はカスタムCSS、PHP、HTMLなどを安全に簡単に追加できます。テーマファイルを編集したり、サイトを壊すリスクを冒したりする必要はありません。

ステップ1：WPCodeプラグインをインストールして有効化する

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

ステップ2：新しいカスタムコードスニペットを追加する

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

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

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

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

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

ステップ3：カスタムCSSコードを追加する

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

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

p { color:#990000; }

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

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

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

ステップ4：挿入場所をサイト全体のヘッダーに設定する

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

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

ステップ5: スニペットの有効化と保存

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

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

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

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

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

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

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

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

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

ランディングページまたはセールスページを作成したい場合は、SeedProdの使用をお勧めします。試したページビルダーの中で、これは市場で最高であり、5,000件以上のレビューで4.9/5つ星評価を得て、100万人以上のウェブサイトから信頼されています。

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

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

これらには、Mailchimp、Constant Contact、ActiveCampaignなどの主要な電子メールマーケティングサービス、WooCommerce、Google Analyticsなどが含まれます。

ステップ1：SeedProdプラグインをインストールして有効化する

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

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

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

ステップ 2：新しいランディングページの作成

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

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

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

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

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

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

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

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

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

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

SeedProdには「セクション」も付属しています。これは、一緒に使用されることが多いブロックのコレクションです。たとえば、SeedProdにはヘッダー、ヒーロー画像、行動喚起、お客様の声、お問い合わせフォーム、FAQ、機能、フッターセクションなどがあります。これにより、プロがデザインしたページをすばやく作成できます。

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

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

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

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

ステップ3：任意のブロックのテキストカラーをカスタマイズする

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

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

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

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

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

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

ステップ4：ページを保存して公開する

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

あなたのオンラインストア、ブログ、またはウェブサイトにアクセスすると、カスタムテキストの色が完全に反映された新しいページが実際に動作しているのがわかります。

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

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

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

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

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

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

この問題は、エディターで選択した設定をテーマのスタイルシート（CSS）が無効にしてしまう場合に頻繁に発生します。テーマのコードには、文字色に対するより具体的なルールがある可能性があります。このような場合、独自のカスタムCSSを追加する（メソッド4に示すように）ことが、目的の色変更を強制する最も確実な方法です。

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

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

このチュートリアルでWordPressの文字色を変更する方法を学べたことを願っています。また、WordPressにフォントリサイザーを追加する方法やモバイルフレンドリーなWordPressウェブサイトを作成する方法に関するチュートリアルも参照することをお勧めします。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。