WordPressのカラムブロックを使うと、文章・画像・ボタンなどを横に並べられます。ただし、パソコンで整っていてもスマートフォンでは幅が足りず、文字が読みにくくなることがあります。この記事では、2列の作成から比率変更、スマホ確認、崩れたときの戻し方までを画面どおり進められる順番で説明します。
カラムブロックでできること
カラムブロックは、ページの一部分を複数の縦列に分けるブロックです。左に画像、右に説明文を置いたり、3つの特徴を横並びにしたりできます。表とは違い、それぞれの列の中に見出し、段落、画像、ボタンなど別のブロックを自由に追加できます。
外側には全体を管理する「カラム」ブロックがあり、その中に1列ずつの「カラム」ブロックがあります。列数や全体の重なり方を変えるときは外側、1列の幅や背景だけを変えるときは内側を選びます。リスト表示を開くと階層を確認できます。
2列のカラムを追加する手順
- 投稿または固定ページの編集画面を開きます。
- 横並びを入れたい場所の「＋」を押します。
- 検索欄に「カラム」と入力し、「カラム」ブロックを選びます。
- 最初に表示される候補から「50 / 50」を選びます。
- 左の列の「＋」から画像や見出しを追加します。
- 右の列にも段落やボタンなど必要なブロックを追加します。
- 右上の「下書き保存」または「更新」を押します。
最初から複雑な3列にせず、2列で内容を完成させると選択ミスを減らせます。空の列をクリックしにくい場合は、左上のリスト表示を開き、「カラム」の下にある1つ目または2つ目の「カラム」を選択してください。
画像と文章を横に並べる具体例
左列へ画像ブロックを追加し、メディアライブラリから画像を選びます。右列へ見出しブロックと段落ブロックを順番に追加します。画像だけが大きく見えるときは、画像そのものを無理に引き伸ばすのではなく、外側のカラムを選んで列の比率を「33 / 66」に変えると説明文の幅を確保できます。
画像には内容を説明する代替テキストを設定します。装飾だけの画像なら空欄にします。説明文が長い場合は、段落を分け、1列の中へ見出しを複数詰め込みすぎないようにします。
カラムを押したつもりなのに、右側の文章だけ選ばれてしまいました。
設定欄に列数が出なくて、少し迷っています。
今は内側の段落を選んでいる状態ですね。
リスト表示で一番外側の「カラム」を選ぶと、全体の設定に戻れます。
同じ名前のカラムが重なっているから、外側と内側を見分けるんですね。
青い枠の広さも一緒に確認してみます！
その方法なら確実です。
全体を選んだ青い枠は、横並びのすべてを囲みます。
列の幅と間隔を調整する方法
外側のカラムを選ぶと、ツールバーや右側の設定欄から配置、縦位置、列の重なり方などを調整できます。内側のカラムを選ぶと、利用中のテーマやWordPressのバージョンに応じて幅を指定できます。数値を変える場合は、左右の合計を意識し、片方だけ極端に細くしないことが大切です。
列と列の間隔は「ブロックの間隔」や「ギャップ」として表示されることがあります。数値を大きくすると余白が広がりますが、スマホでは本文の幅を圧迫します。まずテーマの初期値で公開画面を見て、必要な場合だけ少しずつ変えてください。
スマホでは縦並びにする
横幅の狭い画面では、2列をそのまま縮めるより、上から下へ1列ずつ表示する方が読みやすくなります。外側のカラムを選び、設定欄に「モバイルでは縦に並べる」などの項目があれば有効にします。名称や初期状態はテーマによって異なります。
画像を左、説明を右に置いた場合、縦並びでは通常、画像の次に説明が表示されます。商品ごとに画像と説明を繰り返すなら、この順番が読者にとって自然かも確認します。列の表示順を入れ替える独自設定がないテーマでは、編集画面の列順がそのままスマホの順番になります。
スマホ表示を確認する手順
- 編集画面右上のプレビューを押します。
- タブレットまたはモバイルの表示を選びます。
- 見出しや文章が1文字ずつ縦になっていないか見ます。
- 画像が画面からはみ出していないか確認します。
- ボタンの文字が折り返しすぎていないか確認します。
- 可能なら実際のスマートフォンでも公開前プレビューを開きます。
編集画面の端末プレビューは目安です。テーマのヘッダーや広告を含む最終状態は、公開ページを実機またはブラウザの狭い幅で確認する必要があります。左右へ画面が動く場合は、固定幅の画像、長いURL、広すぎる余白を順に確認します。
3列を使うときの判断基準
3列は、短い特徴や同じ形式のカードを並べる場面に向いています。各列に長文を入れると1行が短くなり、視線移動も増えます。見出し1つ、画像1つ、短い説明程度にとどめ、詳しい説明はカラムの下へ通常の段落で続けると読みやすくなります。
スマホで縦並びにしたとき、3項目すべてを読む負担も考えます。重要度に差があるなら、無理に同じ大きさへそろえず、最重要項目を先に通常ブロックで説明する方法もあります。
カラムが崩れたときの直し方
内容が別の列へ移動した
リスト表示でブロックの階層を確認し、移動した見出しや段落を目的の内側カラムへドラッグします。操作直後なら、編集画面上部の「元に戻す」を使う方が安全です。
片方の列が空になった
空の列も構造として残るため、本文が不自然に細くなります。不要な内側カラムを選び、三点メニューから削除します。外側のカラム全体を削除しないよう、青い枠を確認してください。
スマホで横にはみ出す
画像の幅に固定のピクセル値を指定していないか、長い英数字やURLを本文へ直接書いていないか確認します。独自CSSを追加する前に、ブロック設定を初期値へ戻し、原因となる要素を1つずつ外して確認します。
パソコンで2列にできたら完成だと思っていました。
スマホでは読む順番やボタンの幅まで見た方がいいんですね！
はい。
カラムは画面幅で見え方が変わるので、パソコンとスマホの両方を確認して初めて完成です。
まず50対50で作って、必要なところだけ比率を直してみます。
崩れたら元に戻すか、リスト表示で階層を確認すれば安心ですね！
その順番で進めれば大丈夫です。
見た目よりも、読みやすさと操作しやすさを基準にしてください。
WordPressをこれから始める方へ
カラムなどのブロック編集を試すには、安定してWordPressを動かせる環境が必要です。これからサイトを用意する方は、WordPressの導入手順と管理画面が分かりやすいサーバーを選ぶと、記事作成へ進みやすくなります。
すでに現在のサーバーでWordPressが安定して動き、カラム編集にも困っていない方は、この記事を理由に乗り換える必要はありません。これから新規に始める方や、管理環境を見直したい方だけが候補を確認してください。
エックスサーバー
WordPressクイックスタートに対応し、契約時にWordPressをまとめて設定できます。料金、契約期間、キャンペーンの適用条件は公式ページで最新情報を確認してください。
エックスサーバーの公式ページを確認する公開前に行う最終確認
更新する前に、外側のカラムを選び、意図した列数になっているかを確認します。次に各列を上から読み、空のブロックや仮の文章が残っていないか、画像と説明の組み合わせが正しいかを見ます。プレビューではパソコンとスマホの両方を開き、リンクやボタンも実際に押してください。既存ページを直した場合は、変更前と大きく順番が変わっていないかも確認します。
まとめ
カラムブロックは、外側のカラムで列全体を管理し、内側のカラムへ画像や文章を入れます。最初は50対50の2列で作り、内容を入れてから比率や間隔を調整してください。保存後はスマホで縦並び、表示順、画像、ボタン、横スクロールを確認します。崩れたときはリスト表示で親子関係を確かめ、直前の操作なら元に戻します。
よくある質問
カラムと表は同じですか？
違います。カラムはページ要素を横並びにするレイアウトで、表は行と列の関係を持つデータを示すために使います。
スマホでも2列のまま表示できますか？
テーマや設定によって可能ですが、文字やボタンが狭くなる場合があります。実際の幅で読みやすさを確認し、迷う場合は縦並びを選びます。
カラムの中へさらにカラムを入れてもいいですか？
入れられる環境もありますが、階層が複雑になりスマホで崩れやすくなります。初心者は入れ子を避け、別のカラムとして分ける方が管理しやすいです。