よりリッチなテキスト制御(WordPress5.5)

WordPressのブロックエディターでテキストを入力する多くのブロックに「よりリッチなテキスト制御」というメニューがあります。このページでは「よりリッチなテキスト制御」について詳しく解説します。

目次

「よりリッチなテキスト制御」はどこにある?

よりリッチなテキスト制御

上の画像は段落ブロックでの例ですが、どのブロックにおいても同じ位置に、ブロック上部に表示されるメニューアイコンの右から2つ目に「よりリッチなテキスト制御」のメニューアイコンがあります。

それではこの「よりリッチなテキスト制御」のメニューアイコンをクリックしてみましょう。

よりリッチなテキスト制御

上の画像のように「インラインコード」「インライン画像」「上付き」「下付き」「取り消し線」「文字色」の項目があります。ひとつひとつ見ていきましょう。

インラインコード

インラインコード

インラインコードで表示するテキストを選択し「よりリッチなテキスト制御」→「インラインコード」をクリックします。

インラインコードはプログラムコードを表すHTMLタグで、HTMLやCSS、JavaScript等のコードを示す際に使用します。通常は等幅フォントで表示されます。インラインコードは以下のようなHTMLで記述されます。

<p>テスト投稿の本文<code>テスト投稿の本文テスト投稿の本文</code>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文</p>

インラインコードの解除

インラインコードで表示されているテキストを選択し再度「よりリッチなテキスト制御」→「インラインコード」をクリックするとインラインコードは解除されます。

インライン画像

インライン画像

インライン画像を貼り付ける位置にマウスカーソルを移動し「よりリッチなテキスト制御」→「インライン画像」をクリックします。「メディアの選択またはアップロード」の画面となります。「ファイルをアップロード」するか「メディアライブラリ」からインライン画像として貼り付ける画像を選択します。

インライン画像は上の画像のようにテキスト中に貼り付ける画像です。「画像ブロック」のように画像の配置を設定出来たりするものではありません。インライン画像は以下のようなHTMLで記述されます。

<p>テスト投稿の本文テスト投稿の本文<img class="wp-image-75" style="width: 60px;" src="https://example.com/wp-content/uploads/2020/08/taiyo.png" alt="">テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文</p>

インライン画像の削除

インライン画像は画像を貼り付けた部分にマウスカーソルを移動し「del」キーや「backspace」キーで削除できます。

上付き

上付きテキストはテキストを一回り小さくして他のテキストのやや上に表示されます。上付きに設定したいテキストを選択し「よりリッチなテキスト制御」→「上付き」をクリックします。

上付きは以下のようなHTMLで記述されます。

<p>テスト投稿の本文<sup>テスト投稿の本文テスト投稿の本文</sup>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文</p>

上付きを解除

上付きで表示されているテキストを選択し再度「よりリッチなテキスト制御」→「上付き」をクリックすると上付きは解除されます。

上付きの利用例

上付きはどのようなケースで利用されるでしょうか…例えば、

面積の単位…平方メートルは… m2
3の2乗は… 32

また、リンクを作成することも出来ますので注釈をつけるとき※こんな感じにも便利でしょう。

下付き

下付き

下付きテキストはテキストを一回り小さくして他のテキストのやや下に表示されます。下付きに設定したいテキストを選択し「よりリッチなテキスト制御」→「下付き」をクリックします。

下付きは以下のようなHTMLで記述されます。

<p>テスト投稿の本文<sub>テスト投稿の本文テスト投稿の本文</sub>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文</p>

下付きを解除

下付きで表示されているテキストを選択し再度「よりリッチなテキスト制御」→「下付き」をクリックすると下付きは解除されます。

下付きの利用例

下付きはどのようなケースで利用されるでしょうか…例えば、

水の化学式… H2O
二酸化炭素の化学式… CO2
のような使い方が出来ます。

取り消し線

取り消し線

取り消し線はテキストの上に横線を引いて取り消すことが出来ます。取り消し線を引きたいテキストを選択し「よりリッチなテキスト制御」→「取り消し線」をクリックします。

取り消し線は以下のようなHTMLで記述されます。

<p>テスト投稿の本文<s>テスト投稿の本文テスト投稿の本文</s>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文</p>

取り消し線を解除

取り消し線の表示されているテキストを選択し再度「よりリッチなテキスト制御」→「取り消し線」をクリックすると取り消し線は解除されます。

文字色

文字色

ブロック内の部分的なテキストの色を変更することが出来ます。文字色を変更したいテキストを選択し「よりリッチなテキスト制御」→「文字色」をクリックすると文字色を変更できます。

文字色、カスタムカラー

「カスタムカラー」をクリックするとより細かい文字色の設定を行うことが出来ます。文字色を設定したときのHTMLは以下のように記述されます。

<p>テスト投稿の本文<span style="color:#e91d0b" class="has-inline-color">テスト投稿の本文テスト投稿の本文</span>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文</p>

文字色設定をクリア

文字色設定をクリア

文字色を設定しているテキストを選択するとブロック上部に「文字色」のメニューアイコンが表示されます。その文字色アイコンをクリックし「クリア」をクリックすると文字色の設定がクリアになります。

よかったらシェアしてね!

この記事を書いた人

目次
閉じる