WordPress│CSSを使ってカラムブロックの表示を並び替えをする方法

モバイルで「画像→説明」の順番をそろえるには、編集時点で各カラムをその順に配置します。

PCで左右を入れ替えたい行だけにクラスを付け、見た目を反転させます。

ページ内の何番目かを数えるnth-childには依存しません。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

画像を先に置き、反転する行だけ指定する

標準のカラムブロックを2列で作り、最初のカラムに画像、次のカラムに説明を入れます。

「モバイルでは縦に並べる」を有効にしてください。

PCで画像を右に出す行では、2つの子カラムをまとめる親の「カラム」ブロックだけに、追加CSSクラス waza-image-first-desktop-reverse を設定します。

.wp-block-columns.waza-image-first-desktop-reverse {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
.wp-block-columns.waza-image-first-desktop-reverse > .wp-block-column {
  min-width: 0;
  flex: 1;
}
@media (min-width: 782px) {
  .wp-block-columns.waza-image-first-desktop-reverse {
    flex-direction: row-reverse;
  }
}

変更前のCSSとブロック構成を保存してから、追加CSSまたは子テーマのstyle.cssへ記述します。

親テーマのファイルは直接編集しません。

旧記事の .wp-block-columns:nth-child(odd) による全体反転は併用しません。

標準の782px境界を想定しているので、独自にブレイクポイントを変更している場合は値をそろえてください。

表示例：画像側をPCで右、スマホで先に表示する

同じ表示例をPC相当とスマートフォン相当の幅で撮影したものです（2026年10月1日）。

見本は画像を置く側と説明を置く側を文字で示した構成です。

実画像の比率や長い本文を入れた場合は、導入先でも配置を確認してください。

見た目の順序と読み上げ順は別

row-reverseは見た目の配置を変えるだけで、DOM・読み上げ・キーボードの移動順を入れ替えません。

手順や順位など順序自体に意味がある内容には使わず、説明に必要な画像には代替テキストを設定してください。

左右両方にリンクや入力欄がある場合は、Tab移動が見た目と矛盾しないか確認します。

スクリーンリーダーによる実操作と、編集画面で保存して再表示する手順は未検証です。

390px・781pxで画像側が上、782px以上で右になることを確認します。

戻す場合は反転クラスと今回のCSSを外してください。

境界を変更する場合はカラムのブレイクポイント変更も参照してください。

まとめと参考資料

DOMは画像・説明の順にそろえ、必要な行だけPC幅でrow-reverseを指定します。見た目を反転しても読み上げ順やTab移動順は変わらないため、順序に意味のある内容には使わず、操作順も確認してください。

• MDN Web Docs：flex-direction（アクセシビリティへの配慮）
• W3C CSS Flexible Box Layout Module Level 1 仕様
• 関連記事：カラムのブレイクポイント変更

よくある質問：CSSでカラムブロックの表示を並び替えるとき

この方法は、何のためのものですか？

記事では、モバイルで「画像→説明」の順番をそろえるには、編集時点で各カラムをその順に配置し、PCで左右を入れ替えたい行だけにクラスを付けて、見た目を反転させる方法です。ページ内の何番目かを数えるnth-childには依存しません。

カラムは、どう作りますか？

記事では、標準のカラムブロックを2列で作り、最初のカラムに画像、次のカラムに説明を入れます。「モバイルでは縦に並べる」を有効にします。

反転するには、どこにクラスを付けますか？

記事では、PCで画像を右に出す行では、2つの子カラムをまとめる親の「カラム」ブロックだけに、追加CSSクラスを設定します。変更前のCSSとブロック構成を保存してから、追加CSSまたは子テーマのstyle.cssへ記述します。親テーマのファイルは直接編集しません。

旧記事の全体反転と、併用できますか？

併用しません。記事では、旧記事の全体反転は併用しません。

カラムの切り替え幅を変えている場合は、どうしますか？

記事では、標準の782px境界を想定しているので、独自にブレイクポイントを変更している場合は値をそろえます。

見た目を反転すると、読み上げ順やTab移動の順番も変わりますか？

変わりません。記事では、row-reverseは見た目の配置を変えるだけで、DOM・読み上げ・キーボードの移動順を入れ替えません。左右両方にリンクや入力欄がある場合は、Tab移動が見た目と矛盾しないか確認します。

どんな内容には使わないほうがよいですか？

記事では、手順や順位など順序自体に意味がある内容には使わず、説明に必要な画像には代替テキストを設定します。

公開前に、何を確認しますか？

記事では、導入先でも、スマホ幅で画像側が上、782px以上で右になることを確認します。実画像の比率や長い本文を入れた場合も、配置を確認します。戻す場合は、反転クラスと今回のCSSを外します。