WordPressブロックエディターの具体的な表示例

各種ブロックは大きく分けて【一般ブロック】【フォーマット】【レイアウト要素】【ウィジェット】となっていますが、本記事ではそれぞれについて具体的にどのように表示されるのか？どのような活用法なのか？について解説していきます。

一般ブロック

一般ブロックでは下記のブロックがあります。それぞれについて解説していきます。

段落

段落とはテキスト文章の一区切りを示すもので、基本的な文章作成の際のメインとなる要素です。 段落ブロックでは文字サイズの変更、先頭の文字を大きな表示に切り替えるドロップキャップ機能、背景色や文字色を変えることができます。

文字サイズ小

文字サイズ標準

文字サイズ中

文字サイズ大

文字サイズ特大

ドロップキャップ

背景色変更

文字色変更

中央揃え

太文字 斜体 リンク Inline Image（テキストにアイコンのような画像を入れられます） Inline Imageは文章の途中にも入れられます 蛍光ペン バッジ NEWS こんな使い方もできるよ

見出し

文章構成を分けたり整理したりしてユーザーにより分かりやすくさせる要素です。 見出しブロックではH1〜H6のレベルを設定できたり、文字サイズやテキストカラーを変更できる。また個別にCSSなどを追加できるため、見出し毎にデザインを変えることもできます。

H4レベル

H5レベル

H6レベル

H4テキストカラー変更

画像

画像ブロックでは角を丸くさせるスタイル機能やSEO的にも優位になるAlt（代替えテキスト）を設定できたり、画像サイズを変えることができます。

リスト

• 通常リスト
• 通常リスト
• 通常リスト

1. 番号付きリスト
2. 番号付きリスト
3. 番号付きリスト

5. 初期値を5にした番号付きリスト
6. 初期値を5にした番号付きリスト
7. 初期値を5にした番号付きリスト

1. 数字を逆順にした番号付きリスト
2. 数字を逆順にした番号付きリスト
3. 数字を逆順にした番号付きリスト

音声

手軽に音声コンテンツが入れられるので、他サイトや他ブログとの差別化や独自性を持たせることが簡単にできます。下記は実際に音声ファイルを設置したものですが、再生ボタン、ボリューム、ダウロードがプレイヤーに付いていて便利です。

Classic Paragraph

Classic Paragraphとは新しいブロックエディター内で旧エディターを部分的に使えるといったものです。基本的にあまり使用することはないかもしれませんが、旧エディターをで作成したコンテンツは全てClassic Paragraphで表示されており、速やかにブロックエディターに変換することができます。

ギャラリー

ギャラリーとはその名の通り、複数枚の画像を見せやすくさせるものです。カラム数を変えられたり、リンク先をしてして画像をクリックすると大きく見せたりと、画像をメインにしている人には非常に便利なブロックです。 画像毎にキャプションも入れることができ、細かな配慮がなされています。

3カラムでの表示

• 

• 

• 

• 

• 

• 

6カラムでの表示

• 

• 

• 

• 

• 

• 

引用

文章を引用するときに用いるブロックです。文字を大きくしたり、テキストカラーを変更することもできます。

引用（いんよう、英語：citation, quotation[1]）とは、広義には、自己のオリジナル作品のなかで他人の著作を副次的に紹介する行為、先人の芸術作品やその要素を副次的に自己の作品に取り入れること。報道や批評、研究などの目的で、自らの著作物に他の著作物の一部を採録したり、ポストモダン建築で過去の様式を取り込んだりすることを指す。狭義には、各国の著作権法の引用の要件を満たして行われる合法な無断転載等[2]のこと。 https://ja.wikipedia.org/

カバー

カバーは設定した画像や動画を背景にし、キャッチコピーなどの文章を入れることができます。メインの用途はそのページを印象付けるヘッダーなどの利用ですが、ページ内でコンテンツを見やすくさせるための切り替えとして利用したり、ページ下部に設置するCTAなどに利用するのも良いと思います。 カバーブロックをCTAに利用してみる

ファイル

ユーザーにウェブ上からファイルをダウンロードさせるためのブロックです。例えば会員制サイトにして会員にしかダウンロードできない仕組みなどに使っても面白いかもしれません。

動画

YouTubeなどの外部サイトを利用せずとも動画を埋め込むことができます。外部サイトのアカウントを作成する手間もないですし気軽に投稿できるので非常に便利です。

フォーマット

フォーマットでは下記のブロックがあります。それぞれについて解説していきます。

• クラシック
• 表
• ソースコード
• カスタムHTML
• 整形済
• プルクオート
• 詩

クラシック

クラシックでは旧エディターを使用できます。旧エディターに慣れ親しんだ人や旧エディターの方が使いやすいと言う方はクラシックもしくはプラグインでクラシックエディター（旧エディター）を使うと良いでしょう。

表

列数と行数を入力し表を作成することができます。列数及び行数は後から追加削除することができます。

テキスト	テキスト
テキスト	テキスト
テキスト	テキスト
テキスト	テキスト

スタイルのストライプを適用した表

テキスト	テキスト
テキスト	テキスト
テキスト	テキスト
テキスト	テキスト

ヘッダーセクションを加えた表

ヘッダー	ヘッダー
テキスト	テキスト
テキスト	テキスト
テキスト	テキスト
テキスト	テキスト

背景色を変更した表

テキスト	テキスト
テキスト	テキスト

レイアウト要素で3カラムにしアレンジした表

ソースコード

ソースコードを書くときなどに使用します。

.balloon-simple .balloon {
width: 100%;
transition: all 0.6s ease 0s;  
}

カスタムHTML

カスタムHTMLの用途としては、ページの一部をHTMLを使用し自分好みにカスタマイズしたいときや、アフィリエイトのリンクを貼る時などに使用します。

整形済

整形済テキストです。

プルクオート

引用（いんよう、英語：citation, quotation[1]）とは、広義には、自己のオリジナル作品のなかで他人の著作を副次的に紹介する行為、先人の芸術作品やその要素を副次的に自己の作品に取り入れること。報道や批評、研究などの目的で、自らの著作物に他の著作物の一部を採録したり、ポストモダン建築で過去の様式を取り込んだりすることを指す。狭義には、各国の著作権法の引用の要件を満たして行われる合法な無断転載等[2]のこと。 https://ja.wikipedia.org/

詩

詩や川柳などに使うと良いでしょう。詩などを中心にしたブログ運営者などに適していると言えます。

スポーツジム　車で行って　チャリをこぐ

引用元：サラリーマン川柳より https://event.dai-ichi-life.co.jp/company/senryu/archive/index.html

レイアウト要素

レイアウト要素では下記のブロックがあります。それぞれについて解説していきます。

• スペーサー
• カラム
• グループ
• 区切り
• ボタンメディアと文章
• 続きを読む
• 改ページ

スペーサー

スペーサーを使うことで、例えば画像の上下の余白の高さをCSSなどの専門知識がなくとも調節することが可能です。バランスを気にされる方に便利な機能と言えます。

カラム

カラム機能を使えばHTMLやCSS、または専門業者に依頼せずとも、2カラム、3カラム、4カラムといった具合にカラム分けしてコンテンツを作ることが可能です。

2カラム

3カラム

商品一覧などにアレンジした3カラム

グループ

選択したブロックをグループ化できるという非常に便利な機能です。 例えば5つのブロックをグループ化させ、グループ化させたブロックを他のページで共有できたりするので、超絶便利です。

区切り

コンテンツを区切る罫線です。

---

↑こんな感じです。

ボタン

ボタンを作成できるブロックです。標準では下記の2つのスタイルのみですが、CSSで好きなデザインにすることも可能。 テキストカラーやボタンの背景カラーなどは簡単に変更できます。

メディアと文章

メディアと文章では画像とテキストをCSSなどの回り込みを使わずに横並びで表示させられます。

続きを読む

続きを読むブロックでは、その名の通り続きを読ませるために設置するブロックです。

改ページ

上記の画像ような感じでページを分割（ページング）することができるブロックです。1ページが長くなりすぎてしまったら改ページブロックを使い短くスッキリさせユーザビリティを高めると良いでしょう。

ウィジェット

ウィジェットでは下記のブロックがあります。それぞれについて解説していきます。

• RSS
• ショートコード
• アーカイブ
• カレンダー
• カテゴリー
• 最近のコメント
• 最新の記事
• 検索

RSS

RSSブロックではRSSのURL（当サイトであればhttps://inspire-design.net/feed/）を入力するだけで、更新情報を勝手に表示してくれるので非常に便利です。（外部サイトのRSSもOK） 設定では

• 示させる項目数
• 投稿者の表示非表示
• 日付の表示非常時
• 抜粋の表示非常時

が可能です。

タイトルのみ表示させた場合

投稿者、日付、抜粋を表示させた場合

ブログの更新情報などをWebサイトのトップページなどに表示させたいというニーズはかなりありましたが、実現させるためには専門知識が必要でコストもかかっていましたので、こうした機能がすぐに実装できるのは素晴らしいの一言です。

ショートコード

WordPressで使用できるショートコードを入力するためのブロックです。 ショートコード ではコードを一行追加するだけでお問い合わせフォームが設置できたり、吹き出しを入れたりすることができる便利な機能です。

アーカイブ

アーカイブとは過去の記事を月ごとに表示させられるブロックです。設定ではプルダウン形式の選択、投稿数の表示非常時が可能です。

• 2022年9月
• 2022年8月
• 2022年7月
• 2022年6月
• 2022年5月
• 2022年3月
• 2022年2月
• 2020年12月
• 2020年11月
• 2020年10月
• 2020年9月
• 2020年7月
• 2020年5月
• 2020年4月
• 2020年3月
• 2019年11月
• 2019年7月
• 2019年6月
• 2018年12月
• 2018年10月
• 2018年9月
• 2018年8月
• 2018年7月
• 2018年6月
• 2017年8月
• 2017年3月
• 2017年2月
• 2016年12月
• 2016年11月
• 2016年6月

カレンダー

サイトの投稿カレンダーを表示させることができるブロックです。

カテゴリー

予め設定したカテゴリーを設置できるブロックです。 ドロップダウン表示、階層の表示非表示、投稿数の表示非表示などが設定できます。

最近のコメント

最近のコメントを表示させられるブロックです。読者と積極的にコミュニケーションを取っているサイトであれば、あえてそこをアピールし活発に動いているサイト（ブログ）だということを魅せましょう。

最新の記事

下記のように最新の記事を表示させるためのブロックです。RSSの項目と違いURLの入力は必要ありませんが、他サイトの最新情報を取得できるものではありません。

• 【制作会社目線】STUDIOのメリット・デメリット
• いまスグできる！WordPressの簡単セキュリティ対策3選！！！
• WordPressサイト改修の費用について
• WordPressの保守に使える！バックアップ方法2種類のご紹介
• 【失敗しないホームページ制作】集客編（制作会社選びのチェックポイントあり）

設定項目は以下

• タイトル以外のコンテンツの表示非表示
• 投稿日の表示非表示
• 投稿日時の順番を新しいもの古いものと選択
• カテゴリー
• 投稿数

アイデア次第で既存コンテンツをうまく活用、再利用できる便利な機能ですので、イマジネーションを働かせてみましょう。

検索

任意の場所に検索窓を設置できるブロックです。情報が多い場合、検索窓を設置してユーザビリティを高めましょう。

検索

検索

再利用可能

再利用可能ブロックでは、コンテンツの一部を他のページの任意の場所で再利用できる超絶便利なブロックです。 実際に例を挙げてご説明すると、下記の項目はは当サイト内のトップページとサービスページで使用していますが、再利用ブロックに登録しておくことで、それを選択するだけで同じ内容を違うページに表示させることができています。 再利用ブロックはWebサイトを運用する上で非常に便利な機能ですのでぜひ活用してみてください。