みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。
今回は、複数のブロックをまとめて、横に並べて配置する方法をお伝えいたします。
![カラムブロックアイコン](https://kotatsu.info/blog/wp-content/uploads/2021/08/icon_column.png)
複数のブロックを並べる時は「カラム」ブロックを使います。
![画像や複数のブロックを並べたレイアウト](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-layout-example.jpg)
このように、複数の画像を別々のリンクをつけて並べたり、テキストとテキストを横に並べたりしたいときがあるでしょう。
ここで「カラム」ブロックの出番です。
カラムブロックは、横に複数並べるためのブロックです。
「カラム」ブロックを追加
![プラスボタンから「カラム」ブロック選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-add-2.png)
![左上のプラスボタンからメニューを開いて「カラム」ブロックを選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-add-1-872x1024.png)
![カラムブロックのレイアウト選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-block-select.png)
最初に「いくつ並べるか」「幅の比率はどうするか」をこの中から選びます。
この時点で何も決めていないなら、一番下にある「スキップ」で構いません。後で調整できます。
![カラムブロック追加完了](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-block-add-after.png)
列が2つ追加されました。
![カラムの挿入(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/akjVAReWyM-min.gif)
「カラム」ブロックに変換する
複数のブロックを「カラム」ブロックに変換する方法があります。
![複数のブロック](https://kotatsu.info/blog/wp-content/uploads/2021/09/blocks-colums-change.jpg)
![ブロック選択後変換ツールからカラムを選択する](https://kotatsu.info/blog/wp-content/uploads/2021/09/blocks-column-change-block-tool.jpg)
![カラムブロックに変換](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-blocks-change-after.jpg)
![カラムブロックに変換(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/09/weR82AkLY3-min.gif)
「カラム」ブロック全体を選択する
まず、「カラム」ブロック全体を選択する方法をお伝えいたします。
![カラムブロックのパンくずナビ](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-bread-crumb-selects.png)
![カラムブロック全体を選択完了](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-bread-crumb-select-after.png)
![カラムブロック全体を選択(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/JjXjnE4O4U-min.gif)
カラムのブロックツールにある「カラムを選択」でも、カラム全体を選択できます。
![ブロックツールでのカラム選択](https://kotatsu.info/blog/wp-content/uploads/2021/09/colum-select-block-tool.png)
カラム全体の垂直配置
![カラムブロック全体の垂直配置設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-block-tool-align.png)
ブロックツールバーでは、カラム内の垂直配置を右寄せ・中央揃え・左寄せに調節できます。
![カラムブロック全体の垂直配置設定(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/qa6ukWTNU8-min.gif)
「メディアとテキスト」と同じく、高さの違うブロックを揃える基準を選択します。
新しいカラムを追加
![カラムを追加](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-add-column.jpg)
カラムとカラムの間にマウスカーソルを合わせると、プラスマーク(カラムを追加)が現れます。これをクリックすれば、新しいカラムを追加できます。
![カラムの追加方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/lrD15zO4sm-min.gif)
では右メニューバーにご注目ください。
カラム全体の色設定
![右メニューバーの色設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-color-select.png)
カラム全体の文字と背景の色を設定できます。
![カラム全体の色設定(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/iPkbQSQGGp-min.gif)
カラムの数を変更
![カラム数の設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-setting-column.png)
「カラム」では列の数を変更できます。
![カラム数の設定(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/ZjFlgIJQ91-min.gif)
増やすと新しいカラムが右に追加され、減らすと右のカラムから消えていきます。
一度数を減らすと、減らしたカラムの中身は消えてしまいます。ご注意ください。
中の「カラム」ブロックを選択
その中の個別カラムブロックを選択します。
カラムの中が空の場合
![カラムブロック全体の中のカラムを選択する](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-in-column-select.png)
![個別のカラムブロックを選択する](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-in-column-select-2.png)
![個別カラムブロック選択完了](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-in-column-select-3.png)
![空の個別カラムブロックを選択する(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/aUI3XHaUhD-min.gif)
カラムの中身がある場合
![個別カラムブロックの中のブロックを選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-in-block-select.png)
![ブロックパンくずナビの左から3番めの「カラム」を選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-bread-crumb-in-select.png)
![個別カラムブロック選択完了](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-bread-crumb-in-select-after.png)
![個別カラムブロックを選択する(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/FUV62dtWx2-min.gif)
カラムブロックやグループブロックを編集するときは、必ず下のバー(ブロックのパンくずリスト)を確認しましょう。
![ブロックツールの個別カラムブロックの選択](https://kotatsu.info/blog/wp-content/uploads/2021/09/block-tool-colums-select-in-column.png)
カラム内のブロック選択後に、ブロックツール「カラムを選択」をクリックしても、同様に個別カラムを選択できます。
カラムやグループのブロックを選択するコツ
カラムやグループのブロックは、クリックで選択できているかわからない場合があります。複数のカラムやグループブロックを使ったときは、特に面倒です。
枠組みであるカラムやグループなどのブロック全体の選択は、この順番で行うのをオススメします。
![カラムブロックの選択順番](https://kotatsu.info/blog/wp-content/uploads/2021/08/block-select-order.png)
- 中身のブロックをクリック
- 下のバーで該当のブロック要素をクリック
もしくは、ブロックツールの左端に現れる「カラムを選択」「グループを選択」で選択できます。
![ブロックツールのカラムブロックの選択](https://kotatsu.info/blog/wp-content/uploads/2021/09/block-tool-select-columns.png)
![ブロックツールの個別カラムブロックの選択](https://kotatsu.info/blog/wp-content/uploads/2021/09/block-tool-colums-select-in-column.png)
![ブロックツールのグループブロックの選択](https://kotatsu.info/blog/wp-content/uploads/2021/09/block-tool-select-group.png)
カラムの削除
![個別カラムブロックの削除](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-block-delete.png)
特定のカラムを削除したい時は、中のカラムブロックを選択した状態で「ブロックを削除」を選択しましょう。
個別カラムの垂直配置
![個別カラムのブロックツールにある垂直配置変更](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-incolumn-block-tool-align.png)
ブロックツールバーには、カラムの全体ブロックと同じく、垂直配置を選択できるボタンがあります。
![個別カラムの垂直配置(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/StmxtsvOoX-min.gif)
これはカラム全体でなく、中のカラムブロックで垂直の配置を変えるときに利用します。
![個別カラムでの垂直配置例](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-incolumn-block-align.png)
全体のカラムで垂直配置を設定してしまうと、中のカラムの垂直配置設定が解除されます。ご注意ください。
![全体カラムの垂直配置設定により個別カラムの設定が解除(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/wpPYbJSbu0-min.gif)
カラムの位置順番
![個別カラムの移動](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-move.png)
位置の順番は、左右の矢印で自由に変更できます。
![個別カラムの移動(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/i3T2knEJw1-min.gif)
右メニューバーを見てみましょう。
個別カラムの色設定
![右メニューバーの色設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-color-select.png)
選択したカラムのみ、テキストと背景の色を設定できます。
![中のカラムの色設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-in-color.png)
![中のカラムの色設定(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/bmYvep77jd-min.gif)
![中と全体のカラムで別々の色設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-color-whole-incolumn.png)
カラム全体と中のカラムで色を分けられます。
全体と個別のカラムで色を変えると、全体カラムを枠線のようにできます。
個別カラムの幅を設定
![カラム設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-incolumn-width.png)
選択しているカラムの幅を変更します。
![カラム設定の単位を選択(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/U1HKaVkwmZ-min.gif)
右端の「px」をクリックすると、単位を変更できます。
固定の幅で指定したいときはこのままで、カラムの割合で幅を設定したいなら「%」に変えましょう。
![カラム設定の単位選択一覧](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-incolumn-width-unit.png)
デバイス別の表示
ウィンドウ幅によって表示が異なります。
デスクトップ
![デスクトッププレビューの3カラム](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-preview-desktop.jpg)
色分けした幅30%・50%・20%の3カラムで確認していきます。
デスクトップのプレビューでは設定通り表示されています。
タブレット
タブレット幅になると、このような表示になります。
![タブレットプレビューの3カラム](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-preview-tablet.jpg)
- 各カラムサイズ設定が無効
- 3カラム以上の設定でも2カラムの表示
- 奇数と偶数のカラムの背景色がそれぞれ同じだと、くっついているように見える
(例:1つ目と3つ目のカラムが同じ色)
モバイル
モバイル幅まで縮まると、また表示が変わります。
![モバイルプレビューの3カラム](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-preview-mobile.jpg)
- 各カラムサイズ設定が無効
- 強制的に1カラムになる
- カラムの背景色が同じだと、全てくっついているように見える。余白がない。
2カラムでも同様の表示形式になります。
![デスクトッププレビューの2カラム](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-preview-2colmn-desktop.png)
![モバイルプレビューの2カラム](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-preview-2colmn-mobile.png)
様々なデバイスや環境で閲覧されることを考慮し、レイアウトしていきましょう。
実際に作ってみた
実際にカラムブロックを使って、横並びのコンテンツを作ってみました。
![カラムブロックを使ったレイアウト例](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-examlpe-layout.jpg)
「画像」ブロックを複数のカラムに入れれば、「ギャラリー」ブロックではできなかった、複数画像を並べての個別リンク設定ができます。
![複数の画像にそれぞれ別のリンクを挿入(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/XMEu8ZKn3u-min.gif)
複数行のカラムブロック配置
複数行にブロックを並べたいときがあるでしょう。
その場合、一つの内部カラムブロックに入れるのはおすすめしません。
![1つのカラムブロックで2行にしたレイアウト](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-2line-1block-clm.jpg)
複数の「カラム」ブロックを作成して並べましょう。
![2つのカラムブロックを作成して2行にしたレイアウト](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-2line-2block-clm.jpg)
実際に比較しましょう
1つのカラムに、2行分のブロックを入れたものを作成しました。
プレビューで見比べてみましょう。
![2つのカラムブロックで2行のレイアウト(デスクトッププレビュー)](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-2line-2block-clm_preview-desktop-627x1024.jpg)
![1つのカラムブロックで2行のレイアウト(デスクトッププレビュー)](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-2line-1block-clm_preview-desktop-622x1024.jpg)
1つのカラムブロックのみで作成した方は、高さが違うブロックがあると、並びがずれてしまいます。
2つのカラムブロックの方は、ブロックの高さが違っても、きれいに整列されています。
その上、パソコンとスマートフォンで表示順番が変わってしまいます。
![2つのカラムブロックで2行のレイアウト(モバイルプレビュー)](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-2line-2block-clm-preview-mobile.jpg)
![1つのカラムブロックで2行のレイアウト(モバイルプレビュー)](https://kotatsu.info/blog/wp-content/uploads/2021/08/column-2line-1block-clm-preview-mobile.jpg)
複数行の横並びレイアウトにするときは、必ず複数のカラムブロックで構成しましょう。
以上、複数のブロックを横並びにできる「カラム」ブロックを紹介いたしました。
この「カラム」ブロックを使えば、作れるレイアウトの幅が増えます。いろいろ試してみましょう。ですが、最優先は売上や成果につながるコンテンツの作成です。レイアウトやデザインの調整は、後でじっくり行いましょう。
画像を複数並べたり、画像の上にテキストを被せたり、画像の横にテキストなどを並べたりする方法は、こちらの記事をご覧ください。
その他のブロックについての解説は、WordPressレクチャーからご覧ください。