初心者向けブロックエディター講座その②:テキスト編

このコンテンツではWordPress初心者向けに、ブロックエディターの「テキスト」カテゴリーで使用頻度の高いブロックの使い方や活用方法を解説しています。コンテンツ作成時のマニュアルとしてご活用下さい。

ブロックの追加方法(共通)

まず初めに、ブロックの追加方法を解説します。

ブロックを追加するには、トップメニューの左端(左上)にある「+」のアイコンをクリックする。これが基本です。しかし、作成直後はともかく、細かな修正や調整を掛ける段階になると画面の左上と中央とを行き来するよりもコンテンツエリアに表示される「+」のアイコンをクリックした方が早い。

ということで、ここではコンテンツエリアに表示される「+」アイコンを使ったブロックの追加方法を解説していきます。

ブロックを表示(挿入)したい場所にカーソルを当てると、「+」マークのアイコンが表示されます。

アイコンをクリックすると、利用可能なブロックの候補が表示されます。

さらに「すべて表示」リンクをクリックすると、利用可能なブロックの一覧が表示されます。

使いたいブロックを探し、クリックするとブロックが表示(挿入)されます。

ブロックの追加例(リスト)

ブロックの編集が終わり、次のブロックを追加したい場合は「Enterキー」を押して下さい。すると「+」マークのアイコンが表示されるので、同じ手順を繰り返すことで新しいブロックを追加出来ます。

ヒント

基本的に、「+」マークのアイコンが表示された場所にはブロックを追加出来ます。例えば、ブロックとブロックの間にさらにブロックを追加したい場合などは、ブロックの間にマウスのポインターを当ててみましょう。「+」マークのアイコンが表示されれば、そこに新しいブロックを追加可能です。

最初は戸惑うかもしれませんが、何度かやっているうちに慣れますので心配無用です。続いて、使用頻度が高いブロックを見ていきましょう。

段落

「段落」ブロックは最も使用頻度が高いブロックで、テキスト(文章)の入力時に使います。
段落ブロックに入力したテキストは、下記内容で設定/調整が可能です。

※このテーブルは、横にスクロールします。

no. 設定/調整箇所 設定/調整項目 備考、他

1

ブロックツールバー(画面上部)

表示位置(左中右)/太字/斜体/リンク挿入

2

ブロック設定サイドバー(画面右側)

文字色/背景色

「色設定」

ワンポイントレッスン:改行

文章を入力する際に欠かせないのが「改行」です。WordPressでは改行する方法は2つあり、方法によって表示内容は異なります。それぞれの操作方法と表示の違いを理解し、使い分けるのがベストです。

2つの改行方法
  • 改行時に行間を開けたい場合:Enterキーを押す。
  • 改行時に行間を開けない場合:Shift+Enterキーを押す。

コードを見ると、Enterキーだけを押した場合は「改行」ではなく「新しい段落」と認識されています。とは言え、ほとんどの閲覧者はそんな細かいことを考えていません。気にするのは「見やすさ」のみ。

よって、話が変わったと認識させたければEnterキーで段落を変える。文章を見やすいと感じさせるために適宜Shift+Enterキーで改行を入れる、という使い分けが必要になってきます。

うんちくはこの位にして、例を見ていきましょう。下記の文章は、全く改行されていないため見づらいですよね。この文章に改行を入れ、見やすくしていきましょう。

春はあけぼの。やうやうしろくなりゆく山ぎは、すこしあかりて、紫だちたる雲のほそくたなびきたる。夏は夜。月の頃はさらなり、闇もなほ、蛍のおほく飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くも、をかし。雨など降るも、をかし。

清少納言:「枕草子」
Shift+Enterだけで改行した例

春はあけぼの。
やうやうしろくなりゆく山ぎは、すこしあかりて、紫だちたる雲のほそくたなびきたる。
夏は夜。
月の頃はさらなり、闇もなほ、蛍のおほく飛びちがひたる。
また、ただ一つ二つなど、ほのかにうち光りて行くも、をかし。
雨など降るも、をかし。

改行が入ったことで文章が一気に読みやすくなりました。しかし、異なる話題(春と夏)の間に空白が入っていないので、話題が変わったということを瞬時に判断しづらい文章になっています。

Enterだけで改行した例

春はあけぼの。

やうやうしろくなりゆく山ぎは、すこしあかりて、紫だちたる雲のほそくたなびきたる。

夏は夜。

月の頃はさらなり、闇もなほ、蛍のおほく飛びちがひたる。

また、ただ一つ二つなど、ほのかにうち光りて行くも、をかし。

雨など降るも、をかし。

こちらも、改行が入ったことで文章が読みやすくなりました。しかし、本来つながっているはずの文章まで空白が入っているので、同じ話題なのか違う話題なのかが判断しづらい文章になっています。

上記2つの組み合わせ

春はあけぼの。
やうやうしろくなりゆく山ぎは、すこしあかりて、紫だちたる雲のほそくたなびきたる。

夏は夜。
月の頃はさらなり、闇もなほ、蛍のおほく飛びちがひたる。
また、ただ一つ二つなど、ほのかにうち光りて行くも、をかし。
雨など降るも、をかし。

改行+段落変えを組み合わせたものです。同じ話題は改行を使い、「春」と「夏」という異なる話題は段落を変えることで空白を入れ、識別しやすくしています。読みやすさを追求するためには、改行と段落の使い分けがベストです。

見出し

「見出し」ブロックも使用頻度が高いブロックで、文章に見出しを入れる際に使います。見出しブロックに入力したテキストは、下記内容で設定/調整が可能です。

※このテーブルは、横にスクロールします。

no. 設定/調整箇所 設定/調整項目 備考、他

1

ブロックツールバー(画面上部)

表示位置(左中右)/見出しレベルの変更(H1~H6)

2

ブロック設定サイドバー(画面右側)

文字色/背景色

「色設定」

ワンポイントレッスン:見出しレベル

ウェブコンテンツではH1~H6までの6段階の見出しが設定可能となっていて、「H1」や「H6」のことを「見出しレベル」と言います。ぱっと見た感じでは文字が太く・大きくなるだけですが、実は検索エンジンや音声読み上げソフトでは見出しレベルを読み取り、文章構造を理解しているのです。なので、ルールを守った使い方を覚える必要があります。

「ルール」と聞くと難しそうに感じるかもしれませんが、下記2項目だけを徹底すればOKです。

見出しレベルについて、押さえるべきポイント
  • コンテンツ本文で使う見出しレベルは、原則H2とH3。使ってもH4まで。
  • 見出しはH2。小見出しはH3を使う。決して順番を逆にしない。H4を使う場合も同様。

この2点さえ守っていれば、閲覧者にとっても検索エンジン等にとっても、分かりやすい構造の文章構造になります。

リスト

「リスト」ブロックは、箇条書きを表示する際に使います。リストには「箇条書きリスト」と「番号付きリスト」の2種類があり、用途に応じた使い分けが可能です。リストの設定/調整に関しては下表の通りです。

※このテーブルは、横にスクロールします。

no. 設定/調整箇所 設定/調整項目 備考、他

1

ブロックツールバー(画面上部)

箇条書きリスト/番号付きリストの設定

2

ブロック設定サイドバー(画面右側)

文字色/背景色

「色設定」

箇条書きリストの例

  • 日時:2021年3月〇日
  • 場所:○○株式会社 本社イベントホール

番号付きリストの例

  1. ブロック一覧から「リスト」を選択
  2. 「箇条書きリスト」「番号付きリスト」のいずれかを選択
  3. 内容を入力

Tips:スマートフォン閲覧時の見え方を意識する

同じ内容の箇条書きの文章を「段落」と「リスト」で作成した場合、スマートフォン閲覧時に見やすいのは「リスト」です。論より証拠、下の図を見比べてみて下さい。

まずは「段落」ブロックを使った箇条書きから。スマートフォンで閲覧するとこうなります。

「段落」ブロックで作った箇条書きのスクリーンショット(スマートフォン閲覧時)

画面が狭いため、本文が改行されてしまいます。それは仕方ないことですが、箇条書きの頭の記号のところにテキストがはみ出してしまうので、非常に見づらい印象を受けます。

次に、「リスト」ブロックで作った箇条書きを見てみましょう。スマートフォン閲覧時の画面は下記の通りです。

「リスト」ブロックで作った箇条書きのスクリーンショット(スマートフォン閲覧時)

箇条書きの頭部分にテキストが一切はみ出していません。段落で作った箇条書きより断然見やすくなっています。閲覧者の75%以上がスマートフォン閲覧と言われているので、どちらを選ぶべきかは一目瞭然ですね。

リスト活用のヒント
  • スマートフォン閲覧時の箇条書きは、「段落」よりも「リスト」の方が圧倒的に見やすい。

引用

「引用」ブロックは、もともと他社(他者)の著作物を引用する場合に使うブロックです。引用ブロックは「本文」と「引用元」の2つのエリアから構成されており、著作権侵害との指摘を受けないよう、正しく使う必要があります。

※このテーブルは、横にスクロールします。

no. 設定/調整箇所 設定/調整項目 備考、他

1

ブロックツールバー(画面上部)

テキストの配置(左中右)/太字/斜体/リンク

2

ブロック設定サイドバー(画面右側)

スタイル(デフォルト/大)

引用ブロックの使用例

他人の著作物を自分の著作物の中に取り込む場合,すなわち引用を行う場合,一般的には,以下の事項に注意しなければなりません。

(1)他人の著作物を引用する必然性があること。
(2)かぎ括弧をつけるなど,自分の著作物と引用部分とが区別されていること。
(3)自分の著作物と引用する著作物との主従関係が明確であること(自分の著作物が主体)。
(4)出所の明示がなされていること。(第48条)
(参照:最判昭和55年3月28日 「パロディー事件」)

文化庁:著作権制度の概要 > 著作物が自由に使える場合

Tips①:正しい引用の仕方を理解する

あなた自身の主張の正当性を示すため、引用を行う場合が出てくると思います。正しい引用の仕方については、「引用ブロックの使用例」で取り上げた文化庁の注意事項を遵守すればOKです。なお、ここで言う著作物とは、本や雑誌などの印刷物はもちろん、ウェブサイトのコンテンツも含まれますのでご注意下さい。

Tips②:「第三者の声」を表示する際に使う

「引用」ブロックのもう1つの使い方は、「お客様の声」など第三者の声を表示する場合です。通常のテキストより目立つので、上手く活用していきましょう。使用例は下の図をご覧下さい。

「引用」ブロックを使った「お客様の声」作成例

なお、第三者の声は相手の同意を必ず得てから使うようにして下さい。同意なき利用は、著作権法ではなく個人情報保護法に抵触する可能性があります。

クラシック

「クラシック」ブロックは、WordPress5.0以前に使われていた旧エディターです。ブロックエディターがサポートしていないコンテンツを作るときに使います。例えば、当サイトで多用している「スクロールテーブル」や「外部リンクカード」はクラシックブロックで作成しています。

あくまで限定的な使い方になりますが、ブロックエディターで作成出来ないコンテンツでも、クラシックブロックなら作成可能な場合があります。ですのでクラシックブロックの存在は覚えておいて下さい。

他のブロックや機能はこちらをチェック

ブロックエディターの概要と、各ブロックの調整や設定を行う「ツールバー」について知りたい場合はこちらをチェックして下さい。

画像の挿入やデザインなど、「メディア」と「デザイン」カテゴリーでよく使うブロックについて知りたい場合はこちらをチェックして下さい。

ウェブサイトは初心者じゃ作れない?いや、全然自作出来ますよ。

あなたが価値ある商品・サービスを提供している事業者なら、全くの初心者であってもWordPressサイトの自作は可能です。

最も速く、安く、完成度の高いサイトを完成させるために必要なポイントを完全無料で徹底解説。詳細は下のボタンをクリックして確認して下さい。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう