株式会社火燵(こたつ)は、成果や売上にこだわる方のための動画マーケティング会社です。動画コンサルティング・動画制作・WEBマーケティング・動画制作内製化支援ならお任せください。

WordPressで複数ブロックを横に並べる方法【初心者向け/WordPressの使い方】

その他

みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。

今回は、複数のブロックをまとめて、横に並べて配置する方法をお伝えいたします。

画像を複数並べたり、画像の上にテキストを被せたり、画像の横にテキストなどを並べたりする方法は、こちらの記事をご覧ください。

カラムブロックアイコン

複数のブロックを並べる時は「カラム」ブロックを使います。

画像や複数のブロックを並べたレイアウト

このように、複数の画像を別々のリンクをつけて並べたり、テキストとテキストを横に並べたりしたいときがあるでしょう。

ここで「カラム」ブロックの出番です。
カラムブロックは、横に複数並べるためのブロックです。

「カラム」ブロックを追加

プラスボタンから「カラム」ブロック選択
エディタ画面の「ブロックを追加」から「カラム」ブロック選択
左上のプラスボタンからメニューを開いて「カラム」ブロックを選択
画面左上プラスボタンからメニューを開き「カラム」ブロック選択
カラムブロックのレイアウト選択

最初に「いくつ並べるか」「幅の比率はどうするか」をこの中から選びます。
この時点で何も決めていないなら、一番下にある「スキップ」で構いません。後で調整できます。

カラムブロック追加完了

列が2つ追加されました。

カラムの挿入(アニメーション)
カラムの挿入

「カラム」ブロックに変換する

複数のブロックを「カラム」ブロックに変換する方法があります。

複数のブロック
  1. カラムブロックにしたい複数のブロックを選択します。
  2. ブロックツールから、「ブロックタイプを変換する」をクリックします。
  3. カラム」を選択します。
    ブロック選択後変換ツールからカラムを選択する
  4. ブロック数にあわせて、列数に別れたブロックに変換されます。
    カラムブロックに変換
カラムブロックに変換(アニメーション)
カラムブロックに変換

「カラム」ブロック全体を選択する

まず、「カラム」ブロック全体を選択する方法をお伝えいたします。

  1. 画面下の「文章 → カラム → カラム」から、左から2番目の「カラム」を選択します。
    カラムブロックのパンくずナビ
  2. 文章 → カラム」になりました。これが、カラムブロック全体を選択している状態です。
    カラムブロック全体を選択完了
カラムブロック全体を選択(アニメーション)
カラムブロック全体を選択

カラムのブロックツールにある「カラムを選択」でも、カラム全体を選択できます。

ブロックツールでのカラム選択

カラム全体の垂直配置

カラムブロック全体の垂直配置設定

ブロックツールバーでは、カラム内の垂直配置を右寄せ・中央揃え・左寄せに調節できます。

カラムブロック全体の垂直配置設定(アニメーション)

「メディアとテキスト」と同じく、高さの違うブロックを揃える基準を選択します。

新しいカラムを追加

カラムを追加

カラムとカラムの間にマウスカーソルを合わせると、プラスマーク(カラムを追加)が現れます。これをクリックすれば、新しいカラムを追加できます。

カラムの追加方法(アニメーション)
カラムの追加方法

では右メニューバーにご注目ください。

カラム全体の色設定

右メニューバーの色設定

カラム全体の文字と背景の色を設定できます。

カラム全体の色設定(アニメーション)

カラムの数を変更

カラム数の設定

カラム」では列の数を変更できます。

カラム数の設定(アニメーション)

増やすと新しいカラムが右に追加され、減らすと右のカラムから消えていきます。
一度数を減らすと、減らしたカラムの中身は消えてしまいます。ご注意ください。

中の「カラム」ブロックを選択

その中の個別カラムブロックを選択します。

カラムの中が空の場合

  1. カラムブロックの中にある、大きなプラスボタンをクリックします。
    カラムブロック全体の中のカラムを選択する
  2. 追加するブロックを選べますが、何も選ばずにもう一度プラスボタンをクリックします。
    個別のカラムブロックを選択する
  3. 画面下のバーが「文章 → カラム → カラム」になりました。
    個別カラムブロック選択完了
空の個別カラムブロックを選択する(アニメーション)

カラムの中身がある場合

  1. カラムの中のブロックを選択します。
    個別カラムブロックの中のブロックを選択
  2. 画面下の「文章 → カラム → カラム → (ブロック名)」から、左から3番目にある方の「カラム」を選択します。
    ブロックパンくずナビの左から3番めの「カラム」を選択
  3. 画面下のバーが「文章 → カラム → カラム」になりました。
    個別カラムブロック選択完了
個別カラムブロックを選択する(アニメーション)

カラムブロックやグループブロックを編集するときは、必ず下のバー(ブロックのパンくずリスト)を確認しましょう。

ブロックツール「カラムを選択」

カラム内のブロック選択後に、ブロックツール「カラムを選択」をクリックしても、同様に個別カラムを選択できます。

カラムやグループのブロックを選択するコツ

カラムやグループのブロックは、クリックで選択できているかわからない場合があります。複数のカラムやグループブロックを使ったときは、特に面倒です。

枠組みであるカラムグループなどのブロック全体の選択は、この順番で行うのをオススメします。

カラムブロックの選択順番
  1. 中身のブロックをクリック
  2. 下のバーで該当のブロック要素をクリック

もしくは、ブロックツールの左端に現れる「カラムを選択」「グループを選択」で選択できます。

グループブロックについては、この記事をご参照ください。

カラムの削除

個別カラムブロックの削除

特定のカラムを削除したい時は、中のカラムブロックを選択した状態で「ブロックを削除」を選択しましょう。

個別カラムの垂直配置

個別カラムのブロックツールにある垂直配置変更

特定のカラムを削除したい時は、中のカラムブロックを選択した状態で「ブロックを削除」を選択しましょう。

個別カラムの垂直配置(アニメーション)

これはカラム全体でなく、中のカラムブロックで垂直の配置を変えるときに利用します。

個別カラムでの垂直配置例

全体のカラムで垂直配置を設定してしまうと、中のカラムの垂直配置設定が解除されます。ご注意ください。

全体カラムの垂直配置設定により個別カラムの設定が解除(アニメーション)

カラムの位置順番

個別カラムの移動

位置の順番は、左右の矢印で自由に変更できます。

個別カラムの移動(アニメーション)

右メニューバーを見てみましょう。

個別カラムの色設定

右メニューバーの色設定

選択したカラムのみ、テキストと背景の色を設定できます。

中のカラムの色設定
中のカラムの色設定(アニメーション)
中のカラムの色設定
中と全体のカラムで別々の色設定

カラム全体と中のカラムで色を分けられます。
全体と個別のカラムで色を変えると、全体カラムを枠線のようにできます。

個別カラムの幅を設定

カラム設定

選択しているカラムの幅を変更します。

カラム設定の単位を選択(アニメーション)

右端の「px」をクリックすると、単位を変更できます。
固定の幅で指定したいときはこのままで、カラムの割合で幅を設定したいなら「%」に変えましょう。

カラム設定の単位選択一覧

デバイス別の表示

ウィンドウ幅によって表示が異なります。

デスクトップ

デスクトッププレビューの3カラム
デスクトップ プレビュー

色分けした幅30%・50%・20%の3カラムで確認していきます。
デスクトップのプレビューでは設定通り表示されています。

タブレット

タブレット幅になると、このような表示になります。

タブレットプレビューの3カラム
タブレット プレビュー
  • 各カラムサイズ設定が無効
  • 3カラム以上の設定でも2カラムの表示
  • 奇数と偶数のカラムの背景色がそれぞれ同じだと、くっついているように見える
    (例:1つ目と3つ目のカラムが同じ色)

モバイル

モバイル幅まで縮まると、また表示が変わります。

モバイルプレビューの3カラム
モバイル プレビュー
  • 各カラムサイズ設定が無効
  • 強制的に1カラムになる
  • カラムの背景色が同じだと、全てくっついているように見える。余白がない。

2カラムでも同様の表示形式になります。

デスクトッププレビューの2カラム
デスクトップ プレビュー
モバイルプレビューの2カラム
モバイル プレビュー

様々なデバイスや環境で閲覧されることを考慮し、レイアウトしていきましょう。

実際に作ってみた

実際にカラムブロックを使って、横並びのコンテンツを作ってみました。

カラムブロックを使ったレイアウト例

「画像」ブロックを複数のカラムに入れれば、「ギャラリー」ブロックではできなかった、複数画像を並べての個別リンク設定ができます。

複数の画像にそれぞれ別のリンクを挿入(アニメーション)

複数行のカラムブロック配置

複数行にブロックを並べたいときは、一つの内部カラムブロックに入れるのではなく、複数の「カラム」ブロックを作成して並べましょう

2つのカラムブロックを作成して2行にしたレイアウト

実際に比較しましょう。

1つのカラムブロックで2行にしたレイアウト

1つのカラムに、2行分のブロックを入れたものを作成しました。
プレビューで見比べてみましょう。

1つのカラムブロックのみで作成した方は、高さが違うブロックがあると、並びがずれてしまいます。
2つのカラムブロックの方は、ブロックの高さが違っても、きれいに整列されています。

その上、パソコンとスマートフォンで表示順番が変わってしまいます。

複数行の横並びレイアウトにするときは、必ず複数のカラムブロックで構成しましょう。


以上、複数のブロックを横並びにできる「カラム」ブロックを紹介いたしました。

この「カラム」ブロックを使えば、作れるレイアウトの幅が増えます。いろいろ試してみましょう。ですが、最優先は売上や成果につながるコンテンツの作成です。レイアウトやデザインの調整は、後でじっくり行いましょう。

画像を複数並べたり、画像の上にテキストを被せたり、画像の横にテキストなどを並べたりする方法は、こちらの記事をご覧ください。

その他のブロックについての解説は、WordPressレクチャーからご覧ください。

WordPressレクチャーシリーズ一覧

「その他」の関連記事


新着記事