WordPress (ワードプレス)で文字色をカスタマイズする方法を徹底解説！

Wordpress (ワードプレス)の画像圧で文字色をカスタマイズする方法を、わかりやすく解説していきます。初心者でもできるように詳しく解説しているので、わからない方はぜひ参考にしてください。

2021年2月2日

CMS入門

WordPressの文字色の変更方法を知っていますか？　ユーザーが見やすいWebサイト、個性的なサイトページを作るには、文字色のカスタマイズが効果的です。

そこでこの記事では、WordPressでデフォルトの文字色を変更する方法、一部の文字色を変更する方法、文字色変更ができないときに役立つプラグインについて解説していきます。

WordPressで文字色の変更を使いこなしたい人はぜひ参考にしてみてください。

WordPress (ワードプレス)でデフォルトの文字色を変更する方法

ここではデフォルトの文字色変更をする方法と、そのときの注意点を解説します。

テーマエディターのCSSで文字色を変更する

WordPressでデフォルトの文字色を変更するには、テーマエディターのCSSを編集します。ダッシュボードの「外観」から「テーマエディター」を選択してください。テーマファイルの中にある「スタイルシート」で文字色を変更するCSSを書きましょう。

Body {

color: #00000

}

スタイルシートで文字色を変更するときは、必ず「body」の中にコードを書きます。ここではデフォルトの文字色の変更だけでなく、大きさ、フォント、背景カラーの変更も可能です。

テーマエディターを編集するときの注意点

テーマエディターを編集するときには、2つ注意点があります。

編集前後でバックアップをとる
親テーマと子テーマがある場合は子テーマを編集

まずどんなコードを編集する場合も必ず編集前後でバックアップをとっておきましょう。パソコンのテキストメモへのコピペで十分です。間違って重要なコードを消してしまったり、一度消したコードをもう一度使いたくなったりすることが多々あります。

またWordPressのテーマによっては、親テーマと子テーマがある場合があります。その場合は必ず子テーマのコードを編集するようにしてください。誤って親テーマのコードを編集してしまうと、WordPress全体のバランスが崩れてしまいます。

WordPress (ワードプレス)で一部の文字色を変更する方法

WordPressでは、ページ内の一部の文字色を変更することもできます。たとえば強調したいキーワードの文字色を変更したり、作成した表の一部分の文字色を変更するといった場合です。

ここでは最も簡単な文字色の変更方法を2つ紹介します。

エディターのボタンで文字色を変更する
コードエディターで文字色を変更する

エディターのボタンで文字色を変更する

エディターのボタンとは、記事の編集画面上部にある簡易編集ボタンのことです。文字を太字にしたり、斜体にしたり、ナンバーリストを作ったりできます。

その中にある「A」ボタン、もしくは「A」ボタンとなりの「▼」ボタンで文字色の変更が可能です。実際に文字色を変更する手順は次の通りです。

文字色を変更したい部分をカーソルで囲む
▼ボタンで変更したい文字色を選ぶ
Aボタンを押して文字色を変更する

コードエディターで文字色を変更する

コードエディターとは、HTMLコードを使って記事を作成するモードです。コードエディターで文字色を変更する場合は、文字を装飾するコードを手打ちで記述することになります。

コードエディターは手間がかかる一方で、エディターボタンを使うよりも細かい文字色の変更ができます。具体的には下記のコードで文字色変更をしてください。

<span style=”color: 変えたい色;”>色を変えたい文字</span>

表示したい文字色は、色コードで記述する必要があります。色彩表を使って色を選び、その色のコードを調べて記述しましょう。

一部の文字色変更ができないときに役立つWordPress (ワードプレス)プラグイン

WordPressのテーマやバージョンによっては、一部の文字色変更ができない場合があります。コードエディターで手打ちすることもできますが、一つひとつ記述するのはかなりの手間です。その場合は、Classic Editor とTiny MCE Advancedという2つのプラグインを導入してみてください。

Classic Editor

Classic Editorとは、WordPressの古いバージョンのエディターで記事作成ができるプラグインです。新しいバージョンのWordPressで使われるエディターの中には、文字色変更のボタンが使えないものがいくつかあります。使っているエディターに文字色変更ボタンがないときはClassic Editorを導入してみましょう。

Classic Editorを導入して有効化したら、記事の編集画面でエディター設定をしてください。WordPressのテーマによって、エディター設定画面があったり、編集画面がそのままClassic Editorになっていたりと状況が異なります。