WordPressでウェブサイトを制作する際、情報を整理して見やすくするために「ブロックを横に並べたい」と考える場面は非常に多いでしょう。
標準機能である「カラムブロック」を活用すれば、専門的なプログラミング知識がなくても、直感的な操作だけで洗練されたレイアウトを作成できます。
画像と文章を並べたり、複数のサービス紹介を横一列に配置したりすることで、ユーザーにとって読みやすいページ構成を実現できます。
本記事では、WordPressのカラム機能の基本的な使い方から、スマートフォン表示での最適化、そしてきれいに配置するためのコツを詳しくお伝えします。
カラムブロックの基本的な使い方
WordPressのエディター（Gutenberg）でブロックを横並びにするには、まず「カラムブロック」を挿入する必要があります。
カラムブロックの挿入とレイアウト選択
エディター内の「+」ボタンをクリックし、検索窓に「カラム」と入力して、表示されたカラムブロックを選択してください。
ブロックを追加すると、最初に「パターンの選択」として、2分割や3分割などの基本レイアウト（プリセット）が表示されます。
後から変更することも可能ですが、まずは自分が作成したい構成に近い比率を選択しましょう。
例えば、画像とテキストを半分ずつ並べたい場合は「50 / 50」を選択するのが最適です。
各カラムへのコンテンツ追加
カラムを選択すると、それぞれの枠の中にさらに「+」ボタンが表示されます。
この中に、画像ブロックや見出しブロック、段落ブロックなど、任意のブロックを自由に追加できます。
左側のカラムには画像、右側のカラムには説明文といった具合に、要素を組み合わせて配置していきます。
カラムの配置と幅を細かく調整するコツ
単にブロックを並べるだけでなく、全体のバランスを整えることで、よりプロフェッショナルなデザインに仕上がります。
カラム全体の幅と各要素の比率
カラムブロック全体を選択した状態で、右側の設定サイドバーを確認してください。
「設定」タブの中にある「幅」の項目では、ピクセル単位やパーセント単位で詳細なサイズ指定が行えます。
また、個別のカラムを選択した状態で「幅」を変更すれば、左側を30%、右側を70%といった変則的なレイアウトも簡単に作成できます。
垂直方向の配置（配置の上下中央揃え）
横並びにした要素の高さが異なる場合、中身のブロックが上に寄ってしまうことがあります。
そんな時は、カラムブロックのツールバーにある「垂直方向の配置」アイコンをクリックしてください。
「上揃え」「中央揃え」「下揃え」の中から「中央揃え」を選択すると、高さの異なるブロック同士でも綺麗に中央で並びます。
カラム間の余白（ギャップ）の調整
ブロック同士の間隔が詰まりすぎていると、ユーザーにとって窮屈な印象を与えてしまいます。
設定サイドバーの「スタイル」タブにある「間隔」セクションでは、カラム間の隙間（ブロックの間隔）をスライダーで調整できます。
適度な余白を設けることで、情報の区切りが明確になり、可読性が向上します。
レスポンシブ対応：スマホ表示での見せ方
現代のウェブサイト制作において、スマートフォンで見心地が良いことは非常に重要です。
モバイルで縦に並べる設定
PCで3列に並べたブロックも、画面の小さいスマートフォンでは1列に並べ直す（スタックする）のが一般的です。
WordPressのカラムブロックは、標準で「モバイルではスタックする」という設定が有効になっています。
これにより、閲覧するデバイスの画面幅に合わせて、自動的に最適なレイアウトへと切り替わります。
モバイルでも横並びを維持する場合
アイコンを小さく並べたい場合など、スマートフォンでも横並びを維持したいケースもあるでしょう。
その場合は、設定サイドバーの「モバイルではスタックする」のスイッチをオフにします。
ただし、中身の文字数が多いと表示が崩れる原因になるため、慎重に確認しながら設定してください。
カラムと「グループ」「行」ブロックの使い分け
WordPressには「カラム」以外にも、要素を横に並べる方法が存在します。
目的や用途に合わせて、以下の表を参考に使い分けてみてください。
| ブロック名 | 主な特徴 | 最適な用途 |
|---|---|---|
| カラム | 幅をパーセントで細かく指定できる | 画像とテキストの対比、サービス紹介など |
| 「行」ブロック | 要素を左詰めや右詰めで並べる | ボタンを横に2つ並べる、SNSアイコンの配置 |
| ギャラリー | 画像のみを自動でタイル状に並べる | 写真の一覧表示、ポートフォリオ |
特に、単純なボタンの横並びであれば、カラムブロックよりも行ブロック（グループブロックの一種）を使うほうが、構造がシンプルになり管理しやすくなります。
高度なカスタマイズ：CSSを利用した調整
テーマの標準機能だけでは満足できない場合、カスタムCSSを追加することでさらに自由なデザインが可能です。
例えば、特定のカラムにだけ枠線をつけたり、背景色にグラデーションをかけたりすることができます。
以下のコードは、特定のカラムに影をつけて浮き上がらせる簡単なCSSの例です。
/* カラムにシャドウを適用する例 */
.custom-column-shadow {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 軽い影をつける */
padding: 20px; /* 内側に余白を作る */
border-radius: 8px; /* 角を丸くする */
transition: transform 0.3s ease; /* アニメーションの設定 */
}
/* ホバー時に少し浮き上がる演出 */
.custom-column-shadow:hover {
transform: translateY(-5px);
}このCSSを利用する場合は、カラムブロックの「高度な設定」にある「追加 CSS クラス」に custom-column-shadow と入力してください。
これにより、個別のデザインカスタマイズが容易に行えます。
まとめ
WordPressのカラム機能を使いこなすことで、複雑なレイアウトも自由自在に作成できるようになります。
まずは基本のレイアウトを選び、中身のブロックを配置することから始めてみてください。
その際、「垂直方向の配置」や「モバイルでのスタック設定」を意識するだけで、一段上の仕上がりになります。
画面サイズにかかわらず、ユーザーが快適に情報を閲覧できるレイアウトを目指しましょう。
この記事を参考に、ぜひご自身のサイトでカラムブロックを活用した魅力的なページ作りを行ってみてください。