6.3 フロックの種類と使い方

フロックエディタの使い方 Lightning編Ver11.2.0

2018年12月ワードプレス5.0がリリースされて標準エディタがGutenbergに変わりました。
その後新エディタも進化して使いやすくなったようだし、そろそろ本格的にブロックエディタを使おうと思い、その機能をまとめてみました。
まずは、各種ブロックの種類と役割を知ることが大事だと思います。

新エディタ、旧エディタどちらを使うか?

WordPressのエディタ画面と言えば、ビジュアルエディタとテキストエディタの2種類という認識ですよね。
しかし、現在は初期状態で「Gutenberg」という名のブロックエディタのみとなっています。
これは2018年12月6日にWordPress5.0にアップデートされた時の最も大きな変更でした。

今まで慣れ親しんでいたエディタが利用できなり、未だに古いものを利用している人も少なくありません。
私もそうでした。クラシックエディタ愛好者!
しかし、世の中の流れはGutenbergのようなブロックエディタです。
実は、WixやJindoなどのほとんどのホームページ作成サービスではブロックエディタを採用しています。

WordPressの新しいエディタである「Gutenberg」はビジュアルエディタの一種です。
つまり、最終的な仕上がりを確認しながら編集できるという便利なエディタなのです。
しかし、長い間今までのエディタを使用していた人にとっては非常に使い辛いと感じるはずです。
新エディタに慣れたほうが良いですが、クラシックエディタに変更することも可能です。

標準ブロック

◆よく使うブロック
よく使うブロックは「見出し」「段落」「画像」など一般的に使用頻度の高いブロックや過去利用したブロックが表示されます。
基本的には上記の3つだけで記事は書けますね。

◆一般ブロック
段落: 通常の文章を入力する際に利用します。最も使用頻度の多いブロックの一つです。
画像 :画像を挿入する際に利用します。最も使用頻度の多いブロックの一つです。
見出し: 見出しを挿入する際に利用します。最も使用頻度の多いブロックの一つです。
ギャラリー: 横並びの画像を利用する際に利用するブロックです。
リスト: リスト(箇条書き)を作る際に利用します。使用頻度の高いブロックの一つです。
引用 :引用blockquoteを挿入します。
音声: 音声ファイルをアップロードできます。
カバー: 画像の上に簡単にテキストを載せることができ、コンテンツの見た目を変えられるます。
ファイル: PDFなどの任意のファイルをアップロードするためのブロックです。
動画: mp4などの動画ファイルをアップロードするためのブロックです。

◆フォーマット
ソースコード: 何かのソースコードを利用したいときに挿入する。利用頻度は低いでしょう。
クラシック: 従来のエディター(クラシックエディター)を利用したいときに挿入する。
カスタムHTML: HTMLで記述したいときに挿入するブロックです。
整形済み: 整形済みテキスト(preタグ)を利用したいときに挿入する。利用頻度は低いでしょう。
ブルクオート: 引用にさらに装飾をしたブロックです。利用頻度は低いでしょう。
テーブル: 表を挿入したいときに利用するブロックです。

◆レイアウト要素
ボタン: ボタンリンクを入力する際に利用します。VK blocksのボタンと同じ?
カラム: 2カラム(2列横並び)のブロックを使用する際に利用します。3,4カラムも作れます。
メディアと文章: 2カラム(2列横並び)で左側を画像、右側を文章にしたい場合に利用します。
続きを読む: 「続きを読む」の表示にしたい場合に利用します。
改ページ: 改ページにする際に利用します。
区切り: 区切り線hrタグを挿入します。
スペーサー: 縦の余白(スペース)を作りたい場合に利用します。

◆ウィジェット
ショートコード: 任意のショートコードを入力したい場合に利用するブロックです。
アーカイブ: 日付別アーカイブを入力したい場合に利用するブロックです。
カレンダー: カレンダーを挿入したい場合に利用するブロックです。
カテゴリー: 投稿のカテゴリーを挿入したい場合に利用するブロックです。
最新のコメント: 最新のコメントを挿入したい場合に利用するブロックです。
最新の記事: 最新の投稿記事を挿入したい場合に利用するブロックです。
RSS: RSSフィードを挿入したい場合に利用するブロックです。
検索: 検索ボックスを挿入したい場合に利用するブロックです。

◆埋め込み
埋め込み: 埋め込みを挿入する際に利用するブロックです。
Twitter: Twitterの埋め込みを挿入する際に利用するブロックです。
Youtube: Youtubeの埋め込みを挿入する際に利用するブロックです。
Facebook: Facebookの埋め込みを挿入する際に利用するブロックです。
Instagram: Instagramの埋め込みを挿入する際に利用するブロックです。
WordPress: WordPressの埋め込みを挿入する際に利用するブロックです。

テーマ独自ブロック

以下は、テーマが「Lightning 」の場合に使用できるブロックです。
※(Pro)は有料版テーマ「Lightning Pro」の機能です。

◆VK blocks
PR Blocks: 3列のPRボックスを表示します。丸の中は画像でもフォントオーサムの記号でもOK。
PR Content:画像と文章 左右の組み合わせ
スタッフ:自己紹介、スタッフ紹介
見出し:デザインが可能な見出し
アラート:各種背景色つきテキスト
フキダシ:吹き出しを表示します。
ボタン:ボタンにテキスト記入してリンクを張る。デザイン可能
質問と解答:よくあるご質問、Q-A
フロー:題目とその説明、画像を右側に表示できる。手順などをフローを示す際に使える
Share botton:フェイスブック、ツイッター、はてな、ポケットのシェアボタン表示
投稿リスト(Pro):投稿をアイキャッチ画像と並べて縦3列に表示できます。
カード(Pro):画像とそのタイトル、説明を3列でカード状に表示
子ページリスト(Pro):固定ページの子ページで指定した記事をカード状に2列で表示
目次(Pro):見出しを自動的に目次表示
ステップ(Pro):丸の中の数字で1、2,3と各行表示。手順
のステップ表示に便利
タイムライン(Pro):時刻の数字で、6:00am、7:30amと各行表示、沿革のな表示に便利

◆VK blocksレイアウト
Outer(Pro):幅いっぱいの背景色の帯中に文字を書き込めます。(全幅)
レスポンシブ・スペーサー:ブラウザサイズに合わせた高さ(余白)を設定するブロック

※記事を最後までお読みいただきありがとうございました。

くま吉

2010年から「ビジネスサイト制作教室」を主宰してきた現役ウエブデザイナーです。多くの生徒さんと一緒に、ワードプレスによるサイト作りに携わった経験を生かしてこの講座を始めました。

くま吉をフォローする
6章 ブロックエディタ
くま吉をフォローする
深堀りワードプレス講座
タイトルとURLをコピーしました