もっとリッチなテキスト制御(WordPress5.5)

もっとリッチなテキスト制御

よりリッチなテキスト制御ではブロック内テキストの装飾を細かく行うことが出来ます。ブロックエディター登場したころはこのような装飾を行うのは少し面倒だったのですが、かなり使い勝手がよくなりました。

このページではプラグインを活用してもっとリッチなテキスト制御を行う方法を解説します。

目次

LIQUID BLOCKSプラグインを活用しよう!

もっとリッチなテキスト制御を可能にしてくれるプラグインをインストールしましょう。WordPressのダッシュボードの左側のメニュー「プラグイン」→「新規追加」と進みましょう。右上のプラグインの検索フォームに「LIQUID BLOCKS」と入力します。表示されたプラグインを「インストール」→「有効化」します。これで準備はOKです。

もっとリッチなテキスト制御を見てみよう

もっとリッチなテキスト制御を見てみよう

プラグインをインストールする前のよりリッチなテキスト制御は「インラインコード」「インライン画像」「上付き」「下付き」「取り消し線」「文字色」の項目でしたが上の画像を見るとわかるように項目が増えています。増えた項目についてチェックしてみましょう。

Big

Big

「Big」は文字サイズを一回り大きく出来ます。文字を大きくしたいテキストを選択し「よりリッチなテキスト制御」→「Big」をクリックすると文字サイズが一回り大きくなります。「Big」は以下のようなHTMLで記述されます。

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

Bigを解除

文字サイズを大きくしたテキストを選択し再度「よりリッチなテキスト制御」→「Big」をクリックするとBigが解除され元のテキストサイズに戻ります。

Small

Small

「Small」は文字サイズを一回り小さく出来ます。文字を小さくしたいテキストを選択し「よりリッチなテキスト制御」→「Small」をクリックすると文字サイズが一回り小さくなります。「Small」は以下のようなHTMLで記述されます。

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

Smallを解除

文字サイズを小さくしたテキストを選択し再度「よりリッチなテキスト制御」→「Small」をクリックするとSmallが解除され元のテキストサイズに戻ります。

アンダーライン

アンダーライン

「アンダーライン」はテキストの下にラインを引くことが出来ます。ラインを引きたいテキストを選択し「よりリッチなテキスト制御」→「アンダーライン」をクリックすると選択したテキストにアンダーラインを引くことが出来ます。「アンダーライン」は以下のようなHTMLで記述されます。

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

アンダーラインを解除

アンダーラインを引いたテキストを選択し再度「よりリッチなテキスト制御」→「アンダーライン」をクリックするとアンダーラインが消えます。

マーク

マーク

「マーク」はテキストにマーカーを引くことが出来ます。マーカーを引きたいテキストを選択し「よりリッチなテキスト制御」→「マーク」をクリックすると選択したテキストにマーカーを引くことが出来ます。「マーカー」は以下のようなHTMLで記述されます。

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

マークを解除

マーカーを引いたテキストを選択し再度「よりリッチなテキスト制御」→「マーク」をクリックするとマーカーが消えます。

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

この記事を書いた人

初めてホームページを作成したのは1996年。
2000年よりフリーランスで主に中小企業、学校、各種公的団体、個人事業主のホームページ制作を行っています。
近年はほとんどがWordPress案件となっています。
ビール、料理、カメラ、アウトドア好き!

目次
閉じる