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

カテゴリー:WordPress投稿&固定ページ作成マニュアル

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>

文字色設定をクリア

文字色設定をクリア

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

こちらもおススメ!!

見出しブロック(WordPress5.5)

「見出し」はページの文章をわかりやすくするために段落などの前に配置します。書かれている文章を的確に表す「見出し」をつけることはサイトを閲覧しているユーザーのためにもSEOの観点からもとても重要です。「... もっと見る

段落ブロック(WordPress5.5)

「段落」はページの文章において見やすく、わかりやすくまとめられた文章のまとまりで最も使われるブロックです。段落はHTMLで記述すると以下のとおりです。段落ブロックを追加通常、ブロックを新規追加する... もっと見る

投稿の新規追加~ブロックエディターの基本(WordPress5.5)

WordPressの投稿、固定ページの作成画面はWordPress5のバージョンから「ブロックエディター」と呼ばれる画面になりました。長年WordPressに慣れ親しんできた方にはちょっと戸惑うほどの... もっと見る

カバーブロック(WordPress5.5)

ホームページ内のテキストを視覚的に装飾するには、文字に色を付けたり、サイズを変更したり…というのが一般的です。画像の上に文字を配置するというのも印象的でよいのですが、これまではなかなかハー... もっと見る

投稿と固定ページ

WordPressで作成するページには「投稿」と「固定ページ」の2種類があります。この2種類のページにはそれぞれ特徴があります。投稿時系列に並ぶページでカテゴリーに分類・主にブログ記事の作成に活用... もっと見る

投稿のカテゴリーを設定

WordPressの投稿はその記事の内容に関連性のある記事をグループに分けカテゴリーとして設定できます。記事をカテゴリーに分類することでWebサイトを訪れた人が迷うことなくWebサイト内を閲覧すること... もっと見る

投稿・固定ページ左上のアイコン(WordPress5.5)

投稿・固定ページの新規追加、編集画面の左上に7つのアイコンがあります。これらのアイコンについて詳しく解説します。投稿一覧を表示「投稿一覧を表示」をクリックすると投稿一覧ページを表示します。ブロッ... もっと見る

メディアと文章ブロック(WordPress5.5)

画像ブロックで画像の配置を設定できますが、「メディアと文章」ブロックではより豊富なレイアウトが可能になります。メディアと文章ブロックを追加上のスクリーンショットのように左上の「ブロックの追加」アイ... もっと見る

ブロックのグループ化

WordPressのブロックエディターでは複数またはひとつのブロックをまとめてグループに設定することが出来ます。「グループ化」の機能です。WordPressでは投稿や固定ページを作成する際に、見出し... もっと見る

投稿の新規追加(WordPress5.5)

WordPressの投稿の新規追加画面へのアクセス方法は2通りあります。ダッシュボード左側のメニューから投稿の新規追加画面にアクセスWordPressの管理画面(ダッシュボード)の左側メニューの「... もっと見る

こんな記事が良く読まれています

Amazonプライムの自動更新設定を解除いたしましたというメール

お知らせ&コラム

Amazonプライムというサービスをご存じの方も多いでしょう。Amazonをちょくちょく利用する方ならプライム会員になっている方も多いことと思います。みんなに嬉しい、Amazonプライムプライム会... もっと見る

ポータルサイトを作成するためのテーマ「EVERY」

ポータルサイトを作成するためのテーマ「EVERY」

WordPressテーマ

スマホの普及により多くの方が常にインターネットにアクセスし様々な情報やコンテンツにアクセスするようになってきました。この流れは今後もますます加速すると思われますが、これらのユーザーに満足してもらえる情... もっと見る

WordPressを簡単にインストールできるレンタルサーバー【1】

レンタルサーバーガイド

WordPressでWebサイトを制作する方が増えてきましたね。以前はWordPressをインストるする場合、サーバーにデータベースを作成し、インストールに必要な情報を入力したうえでWordPress... もっと見る

メディアと文章ブロック(WordPress5.5)

WordPress投稿&固定ページ作成マニュアル

画像ブロックで画像の配置を設定できますが、「メディアと文章」ブロックではより豊富なレイアウトが可能になります。メディアと文章ブロックを追加上のスクリーンショットのように左上の「ブロックの追加」アイ... もっと見る

引用ブロック(WordPress5.5)

WordPress投稿&固定ページ作成マニュアル

ホームページやブログを運営していて他のサイトや文献から引用することもあるでしょう。「コピペはいかん!」とは言っても、ホームページを見ている人に分かりやすくするために引用文を載せたほうがいいこともありま... もっと見る

アイキャッチ画像を自動設定してくれる「XO Featured Image Tools」

WordPressプラグインガイド

設定画面が日本語の自動アイキャッチ設定プラグイン投稿や固定ページで記事の内容を分かりやすく表すためのアイキャッチ画像を自動的に設定してくれるプラグインとして「EasyAddThumbnail」を... もっと見る

見出しブロック(WordPress5.5)

WordPress投稿&固定ページ作成マニュアル

「見出し」はページの文章をわかりやすくするために段落などの前に配置します。書かれている文章を的確に表す「見出し」をつけることはサイトを閲覧しているユーザーのためにもSEOの観点からもとても重要です。「... もっと見る

画像の拡大表示をカッコよく「Fancybox for WordPress」

WordPressプラグインガイド

「FancyboxforWordPress」はWordpressに貼り付けた画像、写真を拡大させるときにカッコよく表示させるためのプラグインです。どんな風に画像を拡大するのか?例えば以下のよう... もっと見る

wp_list_categories( パラメータ )

WordPressテンプレートタグ

WordPressテンプレートタグ

カテゴリーのリストをリンク付で表示させます。リンクをクリックするとそのカテゴリーに属する投稿を表示させることが出来ます。サイドバーで使うことが多いです。その他トップページや固定ページのテンプレートでも... もっと見る

このブロックには、想定されていないか無効なコンテンツが含まれています。

WordPress(ワードプレス)

WordPressのブロックエディターでは時々「このブロックには、想定されていないか無効なコンテンツが含まれています。」という表示が出ることがあります。これは初めて見るとびっくりしてしまいますが、落... もっと見る