ワードプレス 横並びブロック（5.9導入の行ブロックが改名）の機能と使い方を解説
本記事は元々、ワードプレス5.9で新規導入された行ブロックについての紹介記事でしたが、version6.0で”横並び”ブロックに改名されました。
それに伴いブロックのアイコン等見映えが若干変わりましたが、使い方は従来の行ブロックと変わりません。したがって、以降の記事内容では”行”を”横並び”と置き替えて読んで頂けると幸いです。
ただし横並びブロックは、もともとグループブロックの派生ブロックでして、version6.0ではグループブロックと横並びブロックとの間でブロック変換できるようになりました。グループブロックの記事を参照ください。
ワードプレス5.9から、ブロックのレイアウトカテゴリーの中に行ブロックが新規追加されました。
本記事では、行ブロックについて機能と使い方を紹介します。
- 行ブロックとは？
- 行ブロックの使用事例とフルサイト編集との関係
- 行ブロックの使い方
- 行ブロックの機能と使用上の注意
行ブロックとは
行ブロックはワードプレスversion5.9から新規追加されたブロックです。ブロック一覧の中のデザインカテゴリーに属しています。
行ブロックを使えば、行ブロックの中に配置した他のブロックを横並びにレイアウトすることができます。
行ブロックの使用例
ワードプレスversion5.9ではフルサイトエディター（FSE）が導入されましたが、行ブロックもこのタイミングで導入された理由はFSEと関連があります。
従来はウィジェットを配置したりテーマにお任せするしかなかったヘッダーやフッターといった部分も、FSEの導入によってブロックエディターで編集が可能となりました。
ヘッダーには通常、サイトロゴやサイトタイトル、そしてヘッダーナビゲーションが横並びとなるレイアウトがよく使われます。フッターも同様です。
そこで必要となったのが行ブロックというわけです。実際にテーマTwenty Twenty-twoで見てみましょう。
Twenty Twenty-Twoのヘッダー
Twenty Twenty-Twoのヘッダーをリスト表示しながら見てみれば、ヘッダー内のレイアウトに行ブロックが使われているのがわかります。
行ブロック（下記赤の破線）の中に、行ブロックとナビゲーションブロックが配置されて横並びレイアウトとなり（下記黄色部分）、さらに内部の行ブロックではサイトロゴブロックとサイトのタイトルブロックが横並びレイアウトとなっています。
Twenty Twenty-Twoのフッター
Twenty Twenty-Twoのフッターについても、下記のように行ブロックの中にサイトのタイトルブロックと段落ブロックが配置され、横並びのレイアウトとなっています。
行ブロックの使い方と機能
それでは実際に行ブロックを使いながら、その機能を紹介していきましょう。
テーマはTwenty Twenty-Oneを使っていきますが、基本的な使い方はどのテーマでも同じです。
行ブロックの基本操作
行ブロックを挿入
ブロックエディター内で行ブロックを挿入します。すでに紹介したようにデザインカテゴリーの中にあるので選択クリックしましょう。
挿入すると次のようになります。
ブロックのすぐ真上にはツールバー、画面右サイドに設定用パネルが表示されるのは他のブロックと同様です。
※編集画面右に設定用パネルが表示されていない場合は、画面右上の設定（歯車マーク）をクリックすれば表示されます。（再度クリックすれば非表示となります。）
画面右の設定用パネルはしばらく使わないので非表示とし、画面左にリスト表示させながら作業を進めます。
行ブロック内に画像ブロックを挿入
行ブロック内に画像ブロックを挿入してみます。
①行ブロック内の+マークをクリック
②画像ブロックを選択
適当に画像を入れてみました（画像大きさはサムネイルとしています）。
リスト表示を見れば、行ブロックの中に画像ブロックが配置されているのがわかります。
行ブロック内にさらに段落ブロックを挿入
続いて行ブロック内に段落ブロックを挿入します。
①行ブロックを選択しておく
②行ブロック内の+マークをクリックして段落ブロックを挿入
段落内には”いちごタルト”と入力してみました。自動的に画像ブロックの右横に段落ブロックが配置されます。
このように行ブロック内に追加挿入したブロックは、どんどん右隣りにレイアウトされていく仕様となっています。
行ブロック内の+マークがうまく見つからないときがあります。実際私が操作したときも、３つ目のブロックを追加するときにはすぐに見つかりませんでした。
そんなときは、ブロック内ツールバーの３点メニューまたはリスト表示のブロック右の3点メニューから操作するのが確実です。
今回事例の段落ブロックの後ろに３つ目のブロックを挿入するには次のようにします。
ブロックツールバーの３点メニューからのブロック挿入は従来からも可能でしたが、リスト表示からも同様に操作できるようになったのは、ワードプレスversion5.9からの新仕様です。
行ブロックの機能の紹介
基本操作がわかったところで、各機能について紹介していきましょう。
内部ブロックのツールバーの機能（ブロックの左右入れ替え）
行ブロック内部に配置したブロックには、もともとそのブロックが持っていたツールバーにボタンが２つ追加されています。
例えば、次は行ブロック内に配置した段落ブロックのツールバーです。
- 行を選択ボタン・・・親ブロックである行ブロックへ移動
- 左右の移動ボタン・・・行ブロック内で、左右に配置を入れ替える
左右に要素を自由に入れ替えることができるのはカラムブロックに似ていますね。
https://web-children.com/2019/09/22/multi-column-layout-by-b...レイアウト（行ブロックのツールバー）
行ブロック内のレイアウトは、行ブロックのツールバーで可能です。
配置を変更ボタンでは、テーマが対応していれば幅広や全幅レイアウトを選択することができます。幅広ではコンテンツ幅いっぱい、全幅では画面幅いっぱいに行ブロックが広がります。
項目の揃え位置レイアウト（横方向レイアウト）
項目の揃え位置は、初期値は左揃えですが、中央揃え、右揃え、項目の間隔も選択できます。
中央揃え
右揃え
項目の間隔
※”項目の間隔”は日本語ではわかりにくいのですが、CSSで表現するとjustify-content: space-betweenだと説明した方がわかりやすい方もおられるでしょう。ブロックエディター内では右側がスペースがない見映えになっているのですが、実際web表示するとスペースはあります。
複数行に折り返すのON/OFF
項目の揃え位置レイアウト （横方向レイアウト）は、ブロックのツールバー以外に画面右の設定用パネルでもできるようになっています。
横方向レイアウトについてはツールバーのものと機能は同じなのですが、ここでは”複数行に折り返す”という機能を紹介しておきます。
”複数行に折り返す”は初期値では上図のようにON状態となっています。そうすると、行ブロック内の項目を増やしていった場合、横幅が足りなくなると自動的に改行します。
しかし、”複数行に折り返す”をOFFとすると改行しません。
行ブロックの使用上の注意点
改行あり・なしで、スマホでの表示を確認してみましょう。
改行しない場合は、あきらかに読みにくくなるので注意が必要です。
また、改行している場合でも、１つ目の項目（画像）の左側マージンが他の行と異なります。CSSで調整したほうがよいでしょう。
このように行ブロックは、画像のギャラリー的な使い方には向いていません。あくまでヘッダーやフッターのような部位のレイアウト用と考えればよいでしょう。
まだリリースしたところなので、今後の改善に期待です。
スタイル（枠線）と配色
画面右の設定パネルで、スタイル（枠線あり）と配色（文字色・背景色）が設定可能です。
試しに次のように設定してみます（枠線あり、テキスト色と背景色を設定）。
さらに、”項目の間隔”、”幅広”としてweb表示させると次の通りです。
まとめ
ワードプレスversion5.9で新規追加された行ブロックについて紹介してきました。
まとめると次の通りです。
- 行ブロック内に配置したブロックは自動的に横並びにレイアウトされる
- ヘッダーやフッターのように、要素を横並びレイアウトするのに用いられる
（フルサイト編集には必要） - 行ブロック内の要素配置は、左揃え・中央揃え・右揃え・項目の間隔（justify-content:space-between）を選択することができる
- 改行なし、改行ありを選択できる
- スタイルとして枠線ありを選択できる
- 配色（テキスト色と背景色）が設定できる
- 画像ギャラリーとして用いるのには向いていない（CSSによる調整が必要）
