WordPressのブロックエディタで横並びレイアウトを作成する方法
WordPress組み込みのブロックエディタで作成するでブロックは上から下にレイアウトされますが、横並びにしたいこともあります。サービス内容の紹介など、横並びの方がわかりやすいかもしれませんよね。
![ブロックを横並びにしたい](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-11_15-55-31.png)
ここでは、ページビルダー系のプラグインを使ってWordPressのブロックエディタで横並びのレイアウトを作成する方法を説明します。
横並びにするプラグインのインストール
横並びレイアウトを実現できるプラグインはいくつかありますが、ここでは2つのプラグイン(Page Builder by SiteOriginとSiteOrigin Widgets Bundle)インストールしました。
![Page Builder by SiteOriginプラグインのインストール](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-10_17-55-45.png)
![SiteOrigin Widgets Bundleプラグインのインストール](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-10_17-57-51.png)
横並びレイアウトを作成する
投稿または固定ページの編集画面を開いて「Add SiteOrigin Layout Block」をクリックします。
![「Add SiteOrigin Layout Block」をクリック](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-10_18-02-44.png)
ページビルダーが開きます。考え方は、まず2列、3列など横並びにしたい列を追加し、その各列に各種パーツを追加する仕組みです。まずは、「列を追加」をクリックします。
![「列を追加」をクリック](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-10_18-04-45.png)
何列を横並びにするのか設定します。デフォルトでは2列ですが3列、4列などに変更可能です。画面右下の「挿入」をクリックすると設定完了です。
![横並びにする列数を設定](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-10_18-10-23.png)
追加された列にパーツを設置します。それには左側の列(1)を選択して「ウィジェットを追加」(2)をクリックします。
![「ウィジェットを追加」をクリック](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-10_20-21-17.png)
追加するパーツ(ウィジェット)をクリックします。ここでは「SiteOrigin Editor」を選択しました。文章や画像をレイアウトできるエディタです。
![エディタを追加](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-10_20-25-25.png)
左列にエディタが追加されました。「編集」をクリックしてコンテンツを作成しましょう。
![ウィジェットの編集](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-10_20-27-46.png)
適宜、タイトルと本文を入力し、「メディアを追加」をクリックして画像を追加します。完了したら画面右下の「終了」をクリックして画面を閉じます。
![コンテンツの編集](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-10_20-33-11.png)
右列も同じようにコンテンツを作成します。ゼロから作成しても構いませんし、「重複」をクリックして現在のコンテンツをコピーしてもよいでしょう。
![コンテンツのコピー](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-10_20-37-03.png)
コピーしたコンテンツを右列にドラッグアンドドロップして、横並びブロックが完成です。
![横並びブロックの完成](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-10_20-42-06.png)
表示結果は次のようになります。
![横並びブロックの表示](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-10_20-47-22.png)
他のブロックはGutenbergの基本ブロックを使って上から下にレイアウトできます。
WordPressのブロックエディタで横並びレイアウトを作成したいときは参考にしてください。