シリーズ記事「WordPressでブログを始める！」第12回は、「ブロック機能の使い方」についてです。第7回で、基本的な使い方についてかんたんに解説しました。
シリーズ記事「WordPressでブログを始める！」第7回は、WordPress5.0から追加された機能「ブロック」についてです。 ブログを投稿したり、固定ページを作っていく時にも必要なブロックについての知識です。この記事では、ブロッ[…]
今回はブロックのカテゴリーごとに、よく使う機能を分かりやすく解説していきます。新規の「投稿」ページの画面で、「テキスト」「メディア」「デザイン」カテゴリーにある機能を取り上げていきます。
基本的な使い方
まず、ナビゲーションメニュー ＞ 投稿 ＞ 新規追加 で編集画面を開きます。第7回で解説した通り、見出し（H1）を入力します。
画像では、「ブロック機能紹介」という「見出し（H1）」を入力し、「段落」ブロックに簡単な文章を入れました。その下に「テキスト」という「見出し（H2）」も入れています。
基本的には、最後のブロックの右下に出る＋ボタンを押し、ブロックを追加します。ポップアップでよく使うブロックが表示されますが、最下部の「すべてを表示」を選択してみましょう。左側にブロックの種類がカテゴリー別に表示されます。「テキスト」カテゴリー内に「リスト」があるのを確認できます。
共通して言えますが、どれかブロックを選択するとそのブロックが編集画面に追加されます。
画像のように、編集エリアにはそのブロックに対応したコントロールパネル（赤囲み部分）が表示されます。追加したブロックのすぐ上の位置に出ます。（画像では「リスト」ブロックが追加されています）
加えて、右側のパネルエリアのブロックタブ内で詳細な設定ができるようになっています。表示されていない場合は、右上にある設定（歯車マーク）をクリックしてください。編集エリアで選択されているブロックに対して様々な設定ができるようになっています。これから解説していく各ブロックの編集も、基本的にこの方法でできます。
テキスト
テキストに関連したブロックを追加できます。よく使う以下のブロックをかんたん解説します。
- リスト
- 引用
- クラシック版の段落
リスト
まず「テキスト」カテゴリーから「リスト」を選択してみましょう。
画像のように、●（黒丸）のついたリスト項目を作成できます。コントロールバーで「番号付きリストに変更」したり、太字（B）やリンクの設定も可能です。
引用
同じ「テキスト」カテゴリーから「引用」を選択します。
他のサイトから引用する場合に便利なブロックです。引用元を入力する部分があり、コントロールバーでリンクの挿入もできます。ブログで公式の見解を引用したり、役立つ他のブログ記事を紹介する場合に便利ですね。
クラシック版の段落
これは、旧エディターであるクラシックエディターのコントロールバーを使って入力ができる機能です。
これまでのクラシックエディターと併用しながら、記事が書けるというわけです。WordPressの公式な見解で、プラグイン「Classic Editor」について以下のような文面があります。
Classic Editor は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。
引用元：WORDPRESS.ORG
少し前までは2021年までということでしたので、サポート期間が延びたようです。それでも、基本的にはブロックエディターへの移行期間という認識でしょう。
メディア
次はブロックカテゴリー「メディア」についてです。「画像」の挿入方法は第7回で説明しました。ここでは、以下の機能を説明します。
- ギャラリー
- カバー
- メディアと文章
ギャラリー
このブロックは、画像をギャラリー表示させることができます。
追加すると、「画像」ブロックの時と同じように「アップロード」か、すでにアップロードした「メディアライブラリ」からファイル選択ができます。
上の画像は、3つのファイルをアップロードした場合です。「ギャラリー」なので、横3つに並んで表示されます。画像が2つの場合や5つの場合など、試して表示確認してみてください。
カバー
これは、画像の上にカバーテキストを表示させる機能です。
まず、これまでの画像系ブロックと同じようにベースとなる画像をアップロードします。
その後、カバーテキストが入力できるようになっています。コントロールバーでテキスト位置の調整もできます。詳細設定は、右側のパネルエリアでできます。オーバーレイ（画像の表面を薄く覆う）色や透明度の調整もできます。動画にも対応していますので、ヘッダー部分に活用できるかもしれません。
メディアと文章
左右のレイアウトで、画像と文章を表示できます。
コントロールバーで左右の切替や、テキストの配置を変更できます。上手に使えば、見栄えの良いレイアウトが出来上がりますね。
デザイン
「デザイン」カテゴリーからは、以下のブロックについて取り上げます。
- ボタン
- カラム
- スペーサー
ボタン
様々な部分で活用できるボタンの設定ができます。
画像のように「お問い合わせ」ページへのリンクボタンとしても活用できます。テキストにリンクを挿入するだけです。「ボタンを追加」でボタンを並べて追加できます。パネルエリアでは、ボタンの「スタイル」について詳細設定が可能です。ボタンやテキストの色、ボタンの形も調整できます。
カラム
ブロック内でのカラム設定ができます。これは旧エディターだと難しい部分でしたが、このブロック機能でかんたんに実現できます。
上の画像のように、まずカラムのパターン選択をします。右から2つ目の 33/33/33 を選択すると次の画像のようになります。
各カラムの＋プラスボタンをクリックすると、カラム内に加えるブロックを選択できます。
上の画像は、下に赤字で記したブロックを追加したプレビューです。グレーの線を加えていますが、3カラムで表示されていることが確認できます。この機能もリッチなレイアウトを作成するのに役立ちますね。
スペーサー
意外にほしいブロックの境界に入れるスペーサー機能です。これも旧エディターだと難しかった点です。
画像のように、編集エリアでポインターをドラッグしてスペース幅の調整がかんたんです。パネルエリアではpx値での設定もできます。デフォルトでブロック間のスペースは狭いので、要所で活用すると見やすいサイトになりますね。
まとめ
WordPressでブログを始める！第12回の「ブロック機能の使い方」はいかがでしたか。今回は「テキスト」「メディア」「デザイン」のカテゴリーから、よく使うものの説明をしました。
ブロック機能については、”習うより慣れる”です。使っていくうちにだんだん覚えてきますので、いろいろ触って楽しみましょう。
次回は、ブロック機能のカテゴリー「ウィジェット」や「埋め込み」について解説します。また、全体的な便利機能も併せてご紹介していきます。
今回も最後までお付き合いいただき、ありがとうございました。次回もお楽しみに！