横並びと縦並びの両方で内容が自然につながります。
作業を始める前に
- 変更前の画面と設定値を記録し、戻せる状態で作業します。
- 管理画面の名称や使える機能は、WordPressのバージョン・権限・テーマで異なります。
- 01読む順番から列を決める
- 02親のカラムと内側の列を選び分ける
- 03幅と縦の位置を調整する
- 04モバイルの積み重ねを確認する
下の各項目で、判断のポイントと確認方法を説明します。
進め方・判断のポイント 04 STEPS
読む順番から列を決める
左に写真、右に説明を置く場合も、スマホでは縦に並ぶことを前提にします。見出しが説明から離れる、ボタンだけが先に現れるといった分かりにくさを避け、1つの内容がまとまる順番を考えます。最初は2列で試し、3列にする場合は各列の文章を短く揃えます。
小さい画面でも意味がつながる順番を決めました。
親のカラムと内側の列を選び分ける
「カラム」を追加して比率を選び、各列へ見出し・画像・段落を入れます。全体の設定は親のカラム、片方だけの設定は内側のカラムを選びます。クリックで選びにくいときはリスト表示で階層を開きます。文章の途中をドラッグして、別の列へ意図せず入れないようにしましょう。
全体と各列の選択を切り替えられます。
幅と縦の位置を調整する
画像と文章の上端を揃えるか、中央に揃えるかを選びます。列幅を変えると見出しの折り返しも変わるため、長い日本語の名称を入れた状態で確認します。余白は空の段落で増やさず、利用できる間隔の設定で調整します。全幅・幅広の選択肢はテーマの対応により異なります。
余分な空行を使わず、列の幅と間隔が整いました。
モバイルの積み重ねを確認する
親カラムの設定でモバイル時に縦へ積む項目があれば、意図する動作を確認します。横並びを維持すると文字の幅が足りなくなる場合があります。公開プレビューで小さな画面を試し、写真の後にその説明が来るか、ボタンが押せるかを確認します。順番を変える際はPC表示も再確認します。
PCとスマホの両方で読み順を確認しました。
終わったら確認すること
- 横並びと縦並びの両方で内容が自然につながります。
- 変更したページと、そこへつながる一覧・メニューをログアウトした状態で確認します。
途中で困ったときは
列の幅が変えられません。
親カラムではなく内側のカラムを選んでいるかを確認します。テーマやバージョンによって利用可能な幅設定が違う場合もあります。
スマホで3列のままにできますか？
設定で選べる場合もありますが、必要な文字幅を確保できるかが判断基準です。狭い画面では1列の方が読みやすい内容もあります。
参照した公式資料
画面や条件が異なる場合は、ご利用環境と公式の最新案内を確認してください。
手順確認日 2026.10.30 ／ 読む時間は目安です。操作に必要な時間は環境によって異なります。
管理画面の項目を調べる
入力欄の意味・操作・確認方法を、項目ごとに確認できます。
投稿／固定ページ → 編集 → ブロック →