Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで文字色を変更する方法(4つの簡単な方法)

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressの文字色を変更したいですか?

色はページの最も重要なコンテンツに注目を集め、サイトのブランディングを強化します。また、文字色を変えることで、特に視力に問題を抱える人々にとって、サイトを読みやすくすることができます。

このガイドでは、WordPressサイトの文字色を簡単に変更する方法をご紹介します。

How to change the text color in WordPress

WordPressで文字色を変更する理由

WordPressでテキストの色を変更したい理由はたくさんあります。ランディングページの行動喚起を強調したいとか、サイトの小見出しに色を使いたいとか。

サイト全体の文字色を変更したい場合もあるでしょう。例えば、WordPressのテーマではグレーのフォントカラーを使用しているが、背景色とのコントラストを高めるために黒を使用したいとします。

また、色を使って訪問者の感情を引き起こすこともできます。例えば、青色は信頼感や安心感を与えると多くの人が考えています。さらに詳しく知りたい方は、WordPressサイトに最適な配色を選ぶ方法をご覧ください。

それでは、WordPressで文字色を変更する方法を見てみましょう。以下のリンクからお好きな方法にジャンプしてください:

方法1:ブロックエディターを使う(少量のテキストに最適)

投稿内の単語や段落、見出しを変更したい場合は、WordPressのコンテンツエディターを使用することができます。

まずは、文字色を変更したい投稿やページを開くか、新規ページを作成してください。

まだの場合は、カスタマイズしたいテキストを入力します。テキストによっては、段落や見出しなどのテキストブロックを追加する必要があるかもしれません。WordPressのブロックエディターの使い方については、こちらをご覧ください。

テキストを用意したら、すぐにその色を変更できる。

ブロックのテキスト色を変える

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

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

Changing the text color of a WordPress block

そうしたら、『カラー』セクションを見つけて、『テキスト』をクリックする。

ビジュアルエディターには、WordPressテーマを補完する色が表示されます。どの色をクリックしても、そのブロック内のテキストをすべて変更できます。

Choosing a color from your WordPress theme

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

ピッカーが開き、新しいフォントの色を選択できます。

Customizing your text using the color picker

もう一つのオプションは、特定の色のHTMLコードである16進コードをタイプすることです。これは、サイトのロゴに使われている赤の色合いなど、非常に特定の色を使いたい場合に便利です。

どの16進コードを使えばよいか本当に〜してもよいですか?ここでは、さまざまな色を調べて、その16進コードを取得することができます。

コードが決まったら、「Hex」ボックスにペーストするかタイプする。

Customizing text using a hex code

もし気が変わって初期設定の文字色に戻したい場合は、右側のメニューにある点線のボタンをクリックしてください。

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

Restoring the theme's default text color

単語やフレーズの文字色を変更する

セールスページの行動喚起のように、特定の単語やフレーズ、文章の色だけを変えたい場合もあるでしょう。

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

Changing the text color for specific words in WordPress

現在のテーマに似合う色がポップアップで表示されます。

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

How to change the text color in WordPress

方法2:テーマカスタマイザーを使う(クラシックテーマのみ)

色はページの最も重要なコンテンツに注目させることができますが、たくさんの色があると圧倒されてしまいます。その点を考慮し、WordPressサイトのほとんどで同じテキストカラーを使用するのが一般的です。

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

まずは外観 ” カスタマイザーから

The WordPress theme customizer

テーマのテキスト設定を見つける必要があります。テーマごとに異なりますが、通常は「Typography」オプションを探す必要があります。

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

The theme customizer Typography settings

先に進み、「タイポグラフィ」または同様の設定をクリックします。この時点で、見出し1やページタイトルなど、テーマで使用されているさまざまなタイプのテキストがすべて表示されます。

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

Changing the body text color using the WordPress theme customizer

テキストの色をカスタマイズするには、「フォントの色」セクションをご覧ください。

次に、『色を選択』をクリックする。

The font color selector

ピッカーが開きます。既成の色を使うか、設定を使って新しい色を選ぶか、16進コードをタイプすることができます。

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

The color picker settings in the theme customizer

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

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

方法3:フルサイトエディターを使う(ブロックテーマのみ)

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

フルサイトエディターを使ってテキストをカスタマイズするには、テーマ “ エディターへ進んでください。

Selecting the Full-Site Editor from the WordPress admin panel

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

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

Choosing Styles in the Full Site Editor

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

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

Clicking Edit Styles in Full Site Editor

フルサイトエディターが表示され、スタイルタブが開きます。

色』をクリックしてみよう。

Selecting Colors in the Full Site Editor

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

それぞれ色の設定が違うので、どんなことができるのかぜひ試してみてください。

Elements whose color you can change in the WordPress Full Site Editor

見出し』をクリックして例を見てみよう。

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

How to change the heading text color in the WordPress Full Site Editor

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

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

方法4:CSSコードを使って文字色を変更する(推奨)

テーマによっては、カスタマイザーメニューを使ってサイト全体のテキストを変更できない場合があります。1つのオプションは、この投稿のいずれかの方法を使用して、テキストの各ピースを手動で変更することです。しかし、これには多くの時間と労力がかかります。

良いニュースは、カスタムCSSを追加することで、サイト全体のテキストをカスタマイズできることです。さらに良いことに、この方法では見出し1(h1)や段落テキスト(p)のような特定のタイプのテキストに対して異なる色を定義することができます。

WordPressテーマの編集やカスタマイズはテーマによって異なるため、WPCodeを使用してサイトにカスタムCSSを追加することをお勧めします。

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

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

有効化したら、Code Snippets ” Add Snippetにアクセスしてください。

How to add custom CSS to your site using WPCode

ここでは、サイトに追加できる既製のWPCodeスニペットがすべて表示されます。これらのスニペットには、コメントを完全に無効化したり、WordPressが通常サポートしていないファイルタイプのアップロード、添付ファイルページの無効化などが含まれます。

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

Adding a custom snippet to WordPress

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

その後、「コードタイプ」のドロップダウンを開き、「CSSスニペット」を選択する。

Adding custom CSS to WordPress

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

例えば、段落テキストの色を変更するには、以下のように追加します:

p { color:#990000; }

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

下の画像をご覧いただきたい。

Changing the text color using custom code

どの16進コードを使えばよいか本当に〜してもよいですか?

スニペットに満足したら、「挿入」セクションまでスクロールしてください。WPCodeは、投稿の後、フロントエンドのみ、管理者のみなど、様々な場所にCSSを追加することができます。

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

How to add custom CSS across your entire website

そうしたら画面を一番上までスクロールし、「Inactive」トグルをクリックして「Active」に変更する。

最後に「Save Snippet」をクリックして、CSSスニペットをライブにする。

How to change the text color using WPCode

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

そのスニペットに別のテキスト色を使ったり、CSSを追加したい場合は、コード・スニペット コード・スニペットにアクセスしてください。ここで、作成したスニペットにマウスオーバーし、外観が表示されたら「編集」をクリックします。

Editing a code snippet in WordPress

コード・スニペットを編集して新しい色を使用し、’Save Snippet’をクリックしてサイト上で変更を反映させることができます。

テキストの色以外にも、WPCodeを使用して、テキストを選択したときの初期設定色を変更したり、ページや投稿コンテンツのテキストハイライトを有効化することもできます。

多くの場合、ランディングページやセールスページは、他のサイトとは異なる外観にしたいものです。そうすることで目立たせ、より多くのコンバージョンを獲得することができます。

ランディングページやセールスページのテキストカラーを変更したい場合は、SeedProdを使用することをお勧めします。WordPress用の最高のランディングページプラグインであり、使いやすいドラッグ&ドロップ式のページビルダーを備えています。

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

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

これには、トップクラスのメールマーケティングサービス、WooCommerceGoogle アナリティクスなどが含まれます。

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

注: SeedProdにはカスタムホームページやランディングページなどを作成できる無料版もあります。しかし、このガイドでは、より多くのテンプレートと高度なブロックがあるSeedProd Proを使用します。

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

Adding the license key to SeedProd

この情報は、SeedProdサイトのアカウントで確認できます。ライセンスキーを入力した後、「Verify Key」ボタンをクリックしてください。

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

How to create a new landing page in SeedProd

その後、テンプレートを選びます。SeedProdには300以上のプロがデザインしたテンプレートがあり、自分の画像、テキスト、色などでカスタマイズすることができます。

テンプレートを選択するには、マウスオーバーして「チェックマーク」アイコンをクリックするだけです。

Choosing a SeedProd template

すべての画像に「Juicy Sales Page」テンプレートを使用していますが、どのようなデザインを使用してもかまいません。

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

検索エンジンがページの内容を理解しやすくするために、関連キーワードを追加するとよいでしょう。これにより、WordPressのSEOを向上させることができます。

入力した情報に問題がなければ、「保存してページの編集を開始する」ボタンをクリックします。

Adding relevant keywords to a page URL

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

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

The SeedProd drag and drop page builder

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

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

Adding a social sharing block to a custom page

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

各セクションをご覧になるには、「セクション」タブをクリックしてください。セクションをプレビューするには、マウスをそのセクションにオーバーさせ、虫眼鏡のアイコンをクリックしてください。

The SeedProd ready-made sections

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

これでページの一番下にセクションが追加されます。

Adding a ready-made section to your website

ドラッグ&ドロップでセクションやブロックを移動できます。

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

Customizing SeedProd blocks on a landing page

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

左側のメニューで「詳細」タブを選択する。スタイル」で「カラー」をクリックする。

Changing the text color using SeedProd

新しい文字色を選択するポップアップが開きます。

もう一つのオプションは、’Hex’フィールドに16進コードをタイプすることである。

Customizing the text color using a page builder plugin

他のブロックのテキストカラーも、上記と同じ手順で変更できます。

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

Publishing a page with custom text colors

オンラインストア、ブログ、サイトにアクセスすると、カスタマイザーテキストカラーの新しいページが表示されます。

このチュートリアルで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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

19件のコメント返信を残す

  1. 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!

  2. Dennis Muthomi says

    QUICK QUESTION…. is there a way to customize the highlight color when selecting text?
    It would be awesome if that could match my brand’s color palette too instead of the default blue color.
    thanks in advance for any insight on that! :-)

    • WPBeginner Comments says

      In many cases this can be set with the theme settings in the Customizer.

      If it’s not available, the theme may not have included this feature, in which case you may have to use CSS.

    • WPBeginner Comments says

      If you are trying to customize the link color, this usually can be set in the Customizer, if the theme has this feature.

      Otherwise, CSS could be used to change the link color.

    • WPBeginner Support says

      If none of the recommendations from our article were able to assist you, we would recommend reaching out to the support for your specific theme to see if they have a recommendation in case their CSS is overriding that you add.

      管理者

    • Jiří Vaněk says

      If you use some kind of pagebuilder, there should be a problem too. For exhample Elementor could overwrite your CSS on its own. So if you have Elementor, Oxygen, Divi builder or anything like this, try to look on collor setings here too.

  3. Kayla says

    Do you have any insight into how to change the background color of just part of a sentence?

    Thank you for all of your help. I’ve learned an immense amount from the content you share.

  4. Ekta says

    The 2nd method worked very well for me. Had spent quite some time on the net looking for how to change the color of the widget title and this took only a minute. Thanks a lot.

  5. Bob Wood says

    I still cannot change the color of a single word.
    I pull down options on single word –
    Inline code
    Inline image
    justify
    strikethrough
    underline

  6. Tunde Sanusi (Tuham) says

    Users can only do this in the Block Editor!
    That’s why I’ve been recommending people to start learning about the Block Editor

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。