【本サイトではGoogleアドセンス、または、アフィリエイト広告を利用しています。】
ブログで記事を書いてから、公開前にプレビューを眺めてると、
うーん、もっと読みやすく工夫できないかな？
なんて思うことがよくあります。
ここでは、プレビューで見てもしっくりこない、もっと上手に記事を書きたい！
そういったお悩みを持つ皆さんに向けて、記事作成に最適なブロックの種類と選び方をご紹介します！
読みやすい記事を書くコツは？
読みやすい記事を書くには、文章や画像などのコンテンツをいかにきれいに整理するか
ということが大切になってきます。
記事をきれいに整理して見せるということは、
レイアウトやデザインを工夫するということになりますが、
WordPressでは、HTMLやCSSなどのコードを自分で書かずとも、
ブロックを使いこなすことで簡単に実現できちゃいます！
でも、ブロックを使いこなすには、何よりもまず、
ブロックの種類や特徴を知っている必要があります。
存在すら知らないと使えないですからね。
ただ知っているか知らないかというだけで記事の見栄えが大きく変わるので、
上手に記事を書くために、どんどん知識を仕入れていきましょう！
ブロックの種類
ブロックエディタで使えるブロックの種類はかなり多く、以下のようにカテゴリ分けされています。
また、WordPress標準のものだけではなく、
⑦のように、テーマやプラグインが持つ独自ブロックも存在します。
初めて使う人はきっと、どれを使えばいいのか迷うと思いますが、
すべて覚えて使いこなす必要はありません。
まずはこれから紹介するものをメインに使っていきましょう！
また、今回は、本ブログでも利用中のテーマであるCocoon独自のブロックもあわせてご紹介します！
Cocoonの詳細についてはこちらを参考にしてください。
ブロックエディタの基本的な使い方についてはこちらを参考にしてください！
テキスト
テキストのカテゴリには、文章を入力する際に使うブロックがあります。
記事を書く時は、まず最初に、テキストにあるブロックを配置しておおよその構成を決めましょう。
見出しブロック
見出しブロックは、記事のタイトルを書く時に使います。
また、見出しにはH1～H6の種類（レベル）があって、
数字が大きくなるにつれて見出しの大きさが小さくなります。
この特徴を活かして、以下のような時に使えば、読みやすい記事を作ることができます。
段落ブロック
段落ブロックは、文章を書く時に使います。
ブロックの中に文章を延々と書いていくこともできますが、
段落と段落の間には自動的に1行分のスペースが入るので、
その特徴を活かして、文章を段落ブロックで小分けすることで、
読みやすい記事を書くことができます。
ちなみに、この章に書かれている文章も段落を5つに分けています。
2種類の改行方法
WordPressのブロックエディタには、2つの改行方法があります。
先ほど、段落ブロックを分けることで文章を自動的に改行できるというお話をしましたが、
これは、「段落改行」と呼ばれるものです。（「段落送り」「ハード改行」とも呼ばれます。）
WordPressでは、それとは別に「行改行」と呼ばれるものがあり、
段落ブロック内で改行をしたい時に使います。（「行送り」「ソフト改行」とも呼ばれます。）
それぞれ以下の特徴があり、文章の内容や表示方法によって使い分けます。
| 改行 | 操作方法 | 特徴 |
|---|---|---|
| 段落改行 | Enterキー | ・改行時に1行分のスペースが入る。 ・段落ブロックが新たに作成される。 ・モバイル表示でも改行される。 |
| 行改行 | Shift＋Enterキー | ・次の行に改行される。 ・同じ段落ブロックで改行される。 ・モバイル表示では改行されない。 |
特に、行改行については、モバイル表示では改行しないという特徴があるので、
画面の幅を考えながら上手に改行を使い分けていきましょう。
テーブルブロック
テーブルブロックは、表を作成する時に使います。
例えば、3行3列のテーブルを書くとこんな感じです。
| 列1 | 列2 | 列3 |
|---|---|---|
| 行1-1 | 行1-2 | 行1-3 |
| 行2-1 | 行2-2 | 行2-3 |
| 行3-1 | 行3-2 | 行3-3 |
ヘッダは設定によって非表示にもできます。
特徴を比較する時など、文章で説明するより、表で整理して伝えた方がわかりやすい時があるので、
説明が難しいなと感じたら表にしてみるという方法も考えてみましょう！
メディア
メディアのカテゴリには、画像や音声などのコンテンツを追加するためのブロックがあります。
文章に補足するような形でファイルを差し込みたい時は、ここにあるブロックを使いましょう。
画像ブロック
画像ブロックは、記事内に画像を差し込む時に使います。
例えば、ブログのイラストを文章に差し込むとこんな感じになります。
ただただ文章を書くよりも、絵日記のように画像を差し込むだけでイメージが伝わりやすくなるので、
文章を書いている時に絵が思い浮かんだらどんどん使っていきましょう！
デザイン
デザインのカテゴリには、記事の見栄えをよくするためのブロックがあります。
伝えたい内容は文章だけで表現することもできますが、
ブロックを使って少し工夫するだけで、見栄えがすっきりして読みやすさも変わってきます。
カラムブロック
カラムブロックは、ページ内を複数列に分割して使う時に使います。
例えば、分割を2カラムとして設定すると、
こんな感じで左側に文章を書いて、
右側に画像を差し込んだりできます。
その場合は、こうやって、画像の高さと
文章の高さが合うように調整しましょう。
また、モバイル表示などで画面が狭くなる場合は、カラムの左から順番に表示されることになるので、
その辺りも意識してコンテンツを配置するようにしましょう！
ページ区切りブロック
ページ区切りブロックは、記事を複数ページに分けたい時に使います。
記事を複数ページに分けると、画面下にページネーションと呼ばれるリンクが自動的に付加されます。
また、その際、2ページ目以降にはURLの末尾に自動的にページ番号が振られます。
設定よっても変わりますが、例えば、2ページ目にアクセスした時のURLは以下のようになります。
https://ドメイン/パーマリンク/2/ページを分けた場合、Googleなどの検索エンジンからは、
1ページ目と2ページ目は別の記事として評価されるので、
それによって発生するメリット、デメリットをしっかり考慮した上で使っていきましょう。
ウィジェット
ウィジェットのカテゴリには、
コンテンツに何らかのツールを埋め込みたい時に使うブロックがあります。
技術的な要素もあって、少しハードルが高くなるので、
ブロックエディタの操作に慣れてきた頃に使ってみましょう！
カスタムHTMLブロック
カスタムHTMLブロックは、HTMLコードを記事に直接書き込みたい時に使います。
WordPressの標準機能では実現できない動きをカスタマイズして自作したい時や、
アドセンスやアフィリエイトなどの広告コードを埋め込む際によく使います。
ショートコードブロック
ショートコードブロックは、コンテンツのまとまりやプログラムを
ショートコードと呼ばれる文字列で呼び出す時に使います。
例えば、どこのページにも書くようにしているお決まりの定型文や画像のセットがあるとします。
その組み合わせをすべてのページにブロックから追加して作っていては大変な作業です。
また、定型文の内容を修正するとなったら、すべてのページを修正することになってしまいます。
そうならないように、定型で使うコンテンツのまとまりを
1つの文字列として定義しておくのですが、この文字列をショートコードと呼びます。
呼び出す側は、その文字列だけ指定しておけば、
ブラウザで画面を表示する際にWordPressがショートコードをコンテンツに置き換えてくれます。
そして、定型文を修正する際は、
定義内のコンテンツを1つ修正するだけですべてのページに内容が反映されます。
ショートコードについては、テーマ内で設定したり、標準で実装されているものもあるので、
どんな種類のコードが用意されているのか調べて使ってみましょう！
また、ショートコードをブロックに入力する際は、
「[]（四角括弧）」でコードを囲って指定する必要があるので、
ブロック内にコードだけ書いてしまわないように注意しましょう。
テーマ
テーマのカテゴリには、サイト全体に関連する情報を差し込む時に使うブロックがあります。
例えば、投稿者名や投稿日、ブログのタイトルなどを挿入できます。
あまり記事作成で頻繁に使うようなブロックはないので、
リストを少し眺めたり、試しに挿入して動きを確かめておきましょう。
埋め込み
埋め込みのカテゴリには、SNSなど他サイトのコンテンツを埋め込む際に使うブロックがあります。
ブログカードなどでリンクを指定しても良いですが、
このカテゴリにあるブロックを使うことで他サイトに一度移動するのではなく、
動画などを記事上で直接再生することができます。
YouTubeブロック
YouTubeブロックは、YouTubeの動画を記事内に差し込む時に使います。
例えば、ITロードが公開している動画を埋め込むとこんな感じになります。
ユーザーにページを離れることなくおすすめの動画を再生してもらえるのは魅力的ですね！
動画のサイズが大きいなと感じた場合は、
先ほど紹介したカラムブロックを先に作っておいて、その中に埋め込むなど工夫して調整しましょう！
COCOON
COCOONのカテゴリには、WordPressのテーマ「Cocoon」が持つ独自のブロックがあります。
WordPress標準のブロックでは実現できないような魅力的なデザインを簡単に表現できます。
アイコンボックスブロック
アイコンボックスブロックは、本文の補足情報など追記したい時に使います。
例として、補足情報を以下に追加してみました。
アイコンは複数用意されていて、注意を促したり、メモ書きやコメントを書く場合にも使えます。
こんな感じで、アイコンを添えて別枠で内容を記載できるので、
ユーザーに注目して欲しい情報など記載する時に便利です。
吹き出しブロック
吹き出しブロックは、誰かが発言しているような表現をしたい時に使います。
サンプルは以下です。
吹き出しブロックですよ！
発言している人の画像は自由に設定できます。
ロボットや動物などにしてもいいかもしれませんね！
吹き出しのデザインや色、位置なども自由にカスタマイズできるので、
カラムブロックとうまく組み合わせて使えば2人が掛け合いをしているような場面も表現できます。
ブログカードブロック
ブログカードブロックは、外部サイトやブログ内部のページを紹介したい時に使います。
サンプルとして、本ブログのWordPressカテゴリを追加してみました。
右上にあるラベルの文言は数種類から選択できます。
アイキャッチ画像や説明文がついた状態でリンクを表示できるので、
紹介先のページへアクセスして欲しい時に使いましょう。
ラベルボックスブロック
ラベルボックスブロックは、整理した情報にラベルを付けてまとめたい時に使います。
サンプルは以下です。
詳しい内容はこちらに書きます！
箇条書きで説明したい時など、枠線で囲って表現すると本文と差別化できるので読みやすくなります。
情報全体にラベルでタイトルをつけられるので、
詳細を読まずともどんな内容を書いているのか瞬時に伝えることができるのも特徴のひとつです。
ブロックの種類と選び方 まとめ
ブロックの種類と選び方について以下説明しました。
ここでご紹介した以外にもブロックはいろいろあります。
WordPressテーマだけでなく、プラグインを追加することで、
新たなブロックが使えるようになることもあるので、
もし今あるブロックだけで表現できないことがあればネットで探してみるのも一つの手です。
また、ブロックは単体の特徴だけでなく、
複数組み合わせて使うことでさらに表現できることが増えるので、
いろいろ工夫して自分だけの表現方法を探してみてください！
