WordPress5のブロック機能

ブロックの追加

WordPress 5の新エディターGutenbergは、「ブロック」でコンテンツを管理しています。ブロックは、すでに60種以上、搭載されています。

ブロック機能に対応しているプラグインも出始めていて、プラグインをインストールする際にオリジナルプラグインも同時にインストールされます。
これらのブロックも、[ブロック]メニューに追加されます。

ブロックを使うには

ブロックの挿入位置でクリックし、[ブロックの追加]ボタンをクリックします。
[ブロックの追加]ボタンは、挿入位置の左側と、ツールバー左端にあります。また、前後のブロックを選択したときに表示される場合もあります。
どのボタンをクリックしてもOKです。

ブロックの追加
▲[ブロックの追加]ボタンは、どれをクリックしてもOK

 

ブロックメニュー

ブロックのメニューは、カテゴリーに分けて整理されています。
カテゴリー内のブロックの配置は、使用環境によって変化します。

  • 最も使われている
  • インライン要素(表示されない場合もあり)
  • 一般ブロック
  • フォーマット
  • レイアウト要素
  • ウィジェット
  • 埋め込み

この他にも、プラグインベンダーから提供されるオリジナルブロックがメニューに追加されます。

ブロックカテゴリー
▲ブロックカテゴリー(プラグインベンダーのブロックも追加される)

 

最も使われている

頻繁に使われるブロックが10種類表示されます。ここに表示されるブロックは、お使いの環境によって変化します。
また、最もよく使うブロック([段落]ブロックは除く)は、ウィンドウ右側に表示されるので、ここで選ぶことも可能です。

よく使うブロック
▲最も使われているブロック(表示ブロックは使い方によって変化)

 

インライン要素

タイトル以外で、テキストを選択できる状況になったときに表示されるカテゴリーです。[インライン画像]ブロックは、とても重宝する機能です。
インライン画像は、文字と同様に扱われますので、文字の増減があったときに付随して動いてくれます。

また、他のブロック内に挿入することで、ワンポイントの画像をすばやく作成できます。たとえば、[テーブル]ブロック内に[インライン]ブロックを使うと、以下のような表を簡単に作成できます。

▲[テーブル]ブロックに[インライン]ブロックを組み合わせる
▲[テーブル]ブロックに[インライン]ブロックを組み合わせる

 

一般ブロック

使用頻度の高いブロックが集まっています。中でも[段落]ブロックはよく使います。
[段落]や[見出し]などのテキスト系ブロックは、ブロックを挿入したら、直接文字を入力していきます。
[画像]ブロックや[カバー]ブロックなどのファイル選択系ブロックは、ブロックを挿入すると続けて選択パネルが表示されるので、必要な画像やファイルを選択して挿入します。

  • 段落 テキスト系
  • 見出し テキスト系
  • リスト テキスト系
  • 引用 テキスト系
  • 画像 ファイル系 →→ 選択パネルが表示される
  • カバー ファイル系 →→ 選択パネルが表示される
  • ギャラリー ファイル系 →→ 選択パネルが表示される
  • 音声  ファイル系 →→ 選択パネルが表示される
  • ファイル ファイル系 →→ 選択パネルが表示される
  • 動画 ファイル系 →→ 選択パネルが表示される
ファイル選択系ブロック
▲ファイル系のブロックでは、選択パネルが表示される

 

段落

[段落]ブロックが最もカスタマイズ機能が豊富です。
太字、イタリック、リンク、取り消し線、行揃え、文字サイズ、ドロップキャップ、背景色/文字色などを設定できます。
最も使用頻度が高いブロックです。

フォーマット

「ビジュアルエディター」上でコードを入力するための[コード]ブロック、同じくHTMLを直接入力するための[カスタムHTML]ブロック、作表用の[テーブル]ブロックなど、コンテンツの形を保ったまま挿入するブロックが集められています。

この中で、[クラシック]ブロックは特殊な役目のブロックで、旧エディターのコンテンツをまるごと包みこみます。他のブロックでは、ブロック挿入時に専用のコード(コメントタグ)が付与されますが、[クラシック]ブロックにはありません。いわば、旧エディターのコンテンツを救済するブロックです。

レイアウト要素

段組みを設計する[カラム]ブロックや[メディアと文章]ブロック、ボタンを挿入する[ボタン]ブロックなどがあります。

ウィジェット

最新の記事一覧を自動表示させる[最新の記事]ブロック、カテゴリー一覧を自動表示される[カテゴリー]ブロックなどがあります。
ウィジェットに属するブロックは「動的ブロック」になっていて、記事やコメントが更新されたときに、連動して表示内容も更新されます。

埋め込み

TwitterやYouTubeなどのコンテンツを埋め込むためのブロックです。数が多いです。

プログラムベンダーのブロック

JetpackやYoast SEOのように、プラグインをインストールするときに同時にブロックもインストールされる場合があります。今後は、このタイプが増えていくと思われます。スタイルの設定もできるので、なかなか使いやすいです。
Yoast SEO、Gutenbergブロックに対応→→


『WordPress はじめてのデザイン&カスタマイズ入門』
ブログ・サイトの改善方法がわかる

WordPressはじめてのデザイン&カスタマイズ入門

著 者:茂木葉子、岩本修
監修者:星野邦敏、吉田裕介
出版社:技術評論社
ISBN978-4-294-10362-0
292ページ
2,580 円
2019年1月25日発売

↓ シェア: