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

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

一般ブロック

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

  • 段落
  • 見出し
  • 画像
  • リスト
  • 音声
  • Classic Paragraph
  • ギャラリー
  • 引用
  • カバー
  • ファイル
  • 動画

段落

段落とはテキスト文章の一区切りを示すもので、基本的な文章作成の際のメインとなる要素です。

段落ブロックでは文字サイズの変更、先頭の文字を大きな表示に切り替えるドロップキャップ機能、背景色や文字色を変えることができます。

文字サイズ小

文字サイズ標準

文字サイズ中

文字サイズ大

文字サイズ特大

ドロップキャップ

背景色変更

文字色変更

中央揃え

太文字

斜体

リンク

Inline Image(テキストにアイコンのような画像を入れられます)

Inline Imageは文章の途中にも入れられます

蛍光ペン

バッジ

NEWS こんな使い方もできるよ

見出し

文章構成を分けたり整理したりしてユーザーにより分かりやすくさせる要素です。

見出しブロックではH1〜H6のレベルを設定できたり、文字サイズやテキストカラーを変更できる。また個別にCSSなどを追加できるため、見出し毎にデザインを変えることもできます。

H4レベル

H5レベル
H6レベル

H4テキストカラー変更

画像

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

元画像
丸型マスクを適用したスタイル

リスト

  • 通常リスト
  • 通常リスト
  • 通常リスト
  1. 番号付きリスト
  2. 番号付きリスト
  3. 番号付きリスト
  1. 初期値を5にした番号付きリスト
  2. 初期値を5にした番号付きリスト
  3. 初期値を5にした番号付きリスト
  1. 数字を逆順にした番号付きリスト
  2. 数字を逆順にした番号付きリスト
  3. 数字を逆順にした番号付きリスト

音声

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

実際に音声が出ますのでご注意ください。

Classic Paragraph

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

Classic Paragraphをキャプチャしたもの(なんだか懐かしい・・)

ギャラリー

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

画像毎にキャプションも入れることができ、細かな配慮がなされています。

3カラムでの表示

6カラムでの表示

引用

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

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

https://ja.wikipedia.org/

カバー

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

コンテンツページの印象を変えよう

カバーブロックをCTAに利用してみる

ディズニーシーへ行こう!

ファイル

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

動画

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

フォーマット

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

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

クラシック

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

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

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

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

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

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

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

背景色を変更した表

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

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

テーブルアレンジ1

アレンジ次第で豊かな表現が可能です。


テーブルアレンジ2

アレンジ次第で豊かな表現が可能です。


テーブルアレンジ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カラム

ゴールドチケット

最高級の旅をお約束する最も贅沢なチケットです。

¥100,000円

シルバーチケット

料金と内容のバランスが取れた最も人気のチケットです。

¥50,000円

ブロンズチケット

とりあえずが思い出に残る旅がしたい方におすすめです。

¥30,000円

グループ

選択したブロックをグループ化できるという非常に便利な機能です。

例えば5つのブロックをグループ化させ、グループ化させたブロックを他のページで共有できたりするので、超絶便利です。

区切り

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


↑こんな感じです。

ボタン

ボタンを作成できるブロックです。標準では下記の2つのスタイルのみですが、CSSで好きなデザインにすることも可能。

テキストカラーやボタンの背景カラーなどは簡単に変更できます。

メディアと文章

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

埼玉県川越市の小江戸メイン通り

土日になると非常に賑わいを見せる埼玉県川越市にある「小江戸」

風情ある通りを歩きながらの食べ歩きが楽しくとても人気の街。

続きを読む

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

改ページ

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

ウィジェット

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

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

RSS

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

設定では

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

が可能です。

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

RSS エラー: A feed could not be found at https://inspire-design.net/feed/. A feed with an invalid mime type may fall victim to this error, or SimplePie was unable to auto-discover it.. Use force_feed() if you are certain this URL is a real feed.

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

RSS エラー: A feed could not be found at https://inspire-design.net/feed/. A feed with an invalid mime type may fall victim to this error, or SimplePie was unable to auto-discover it.. Use force_feed() if you are certain this URL is a real feed.

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

ショートコード

WordPressで使用できるショートコードを入力するためのブロックです。

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

アーカイブ

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

カレンダー

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

2019年12月
« 11月  
 1
2345678
9101112131415
16171819202122
23242526272829
3031 

カテゴリー

予め設定したカテゴリーを設置できるブロックです。

ドロップダウン表示、階層の表示非表示、投稿数の表示非表示などが設定できます。

最近のコメント

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

最新の記事

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

設定項目は以下

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

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

検索

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

再利用可能

再利用可能ブロックでは、コンテンツの一部を他のページの任意の場所で再利用できる超絶便利なブロックです。

実際に例を挙げてご説明すると、下記の項目はは当サイト内のトップページサービスページで使用していますが、再利用ブロックに登録しておくことで、それを選択するだけで同じ内容を違うページに表示させることができています。

WordPressテーマ制作代行
WordPressテーマ制作代行
  • WordPressのテーマ制作
    を代行いたします
WordPressプラグイン開発代行
WordPressプラグイン開発代行
  • WordPressのプラグイン開発
    を代行いたします
WordPressシステム開発
Webシステム開発
  • WordPressを使ったWebシステム開発
    を代行いたします
MovableTypeからWordPressへの移行
Movable Typeからの移行
  • MovableTypeからWordPressへ
    ウェブサイトをそのまま移行
    します
WordPress+カラーミーショップ連携
カラーミーショップ連携
  • カラーミーショップと
    WordPressの自動連携
    を実現します
WordPress不動産サイト用テーマ制作
不動産物件管理・検索システム
  • 不動産サイト用のWordPressテーマ
    ご希望に合わせて制作します

再利用ブロックはWebサイトを運用する上で非常に便利な機能ですのでぜひ活用してみてください。

この記事を書いた人

浅賀理生

浅賀理生

株式会社インスパイアデザイン代表。仕事と趣味と家族のバランスを大切にしています。娘LOVE。