【ワードプレス(WordPress)】文字の大きさと色の変更

ワードプレスの基本的な使い方を解説します。今回は「文字の大きさと色の変更」を説明します。

目次

1.文字の大きさの変更

2.文字の色の変更

(1)ブロック全体の文字の色の変更

(2)一部の文字の色の変更

1.文字の大きさの変更

文字の大きさの変更(1)

固定ページまたは投稿の新規追加をクリックすることによりページを作成する画面が表示されます。その画面で文字を入力します。

上の画像に示すように、ページを作成する画面の右端にあるブロックの「タイポグラフィ」をクリックすると、フォントサイズを変更する項目が表示されます。

文字の大きさの変更(2)

フォントサイズをクリックすると、上の画像に示すように、フォントサイズとして「デフォルト」「小」「標準」「中」「大」「特大」が選択されます。この中のいずれかをクリックして選択することでブロック全体の文字の大きさを変更することができます。

文字の大きさの変更(3)

上の画像は、フォントサイズがデフォルト、中、大、特大の文字の表示例を示しています。

なお、フォントサイズの横にある「カスタム」で「デフォルト」「小」「標準」「中」「大」「特大」の中間のフォントサイズを設定することができます。

2.文字の色の変更

(1)ブロック全体の文字の色の変更

文字の色の変更(1)

上の画像に示すように、ページを作成する画面の右端にあるブロックの「色設定」をクリックすると、色を設定する項目が表示されます。

文字の色の変更(2)

文字色を選択することで、ブロック全体の文字の色を変更することができます。

上の画像に示す例では、文字色として青色を選択しています。

文字の色の変更(3)

文字色を選択すると、上の画像に示すように、ブロック全体の文字の色が青色に変更されます。

文字の色の変更(4)

背景色を選択することで、ブロック全体の背景の色を変更することができます。

上の画像に示す例では、背景色としてピンク色を選択しています。

文字の色の変更(5)

背景色を選択すると、上の画像に示すように、ブロック全体の背景の色がピンク色に変更されます。

なお、文字色・背景色ともに「カスタムカラー」をクリックすることで、標準の色以外の色を設定することができます。

(2)一部の文字の色の変更

ワードプレスの以前のエディタでは、文章の一部の文字の色を簡単に変更することができましたが、WordPress 5.0の新エディタ「Gutenberg」では、文章の一部の文字の色の変更を行うことができないようです。

そこで、私はプラグインを新規追加して旧エディタを使えるようにしています。

旧エディタを使えるようにするためのプラグインは「Advanced Editor Tools (previously TinyMCE Advanced)」です。

このプラグインはブロックエディター (Gutenberg) とクラシックエディター (TinyMCE) を拡張・強化するプラグインです。また、このプラグインは以前は「TinyMCE Advanced」という名称のプラグインでしたが、「Advanced Editor Tools」と名称が変更されました。

文字の色の変更(6)

上記のプラグインをインストールして有効化した後、ブロックの横のプラスマーク「+」または画面の左上のプラスマーク「+」をクリックすると、上の画像に示すように、「クラシック版の段落」を選択する項目が表示されます。その「クラシック版の段落」をクリックします。

文字の色の変更(7)

すると、上の画像に示すようなメニューが表示されます。そのメニューの赤枠で囲った項目をクリックすると、下の画像に示すように、選択可能な色が表示されます。

文字の色の変更(8)

そして、表示された色を選択することで、文章の一部の文字色を変更することができます。

文字の色の変更(9)

上の画像では、「文字の色を変える」の「文字の色」の部分だけ赤色に変更されました。

おすすめのレンタルサーバー

当サイトおすすめのレンタルサーバーを紹介します。今回おすすめするレンタルサーバーの基準は満足度の高さです。

mixhost

アクセス処理速度、表示スピードについて顧客満足度No1のレンタルサーバーです。

エックスサーバー

ネットで最も多くの方がおすすめしているレンタルサーバーです。

カテゴリー「情報発信」の記事一覧