ハシビィくんカラムブロックを標準版を変えたいっす！画像→テキスト、画像→テキストの順番にしたいっす！
カピーさんこれはWordPressあるあるだな。解決策も2つ用意させてもらったぞ！
WordPressのブロックエディターで「カラムブロック」を使っていると、スマホ表示のときに
画像 → テキスト → テキスト → 画像
のような並びになってしまうことがあります。
PCではきれいに見えているのに、スマホで確認すると「思っていた順番と違う…」というケースです。
この記事では、WordPress初心者の方でもできるように、カラムブロックの表示順をスマホだけ変更する方法を解説します。
カラムブロックで起きやすい表示順の問題
たとえば、以下のような構成を作ったとします。
PCでは左右に並ぶので、見た目としては問題ありません。
しかし、スマホではカラムが縦並びになります。
そのため、2つ目のカラムが
テキスト
画像
の順番で表示されてしまい、全体として見ると
画像
テキスト
テキスト
画像
という並びになります。
デザイン的には、
画像
テキスト
画像
テキスト
のように交互に見せたい場合も多いですよね。
このようなときは、スマホ表示のときだけカラムの順番を逆にすることで解決できます。
WordPressのカラムブロックで表示順を変える方法は、主に次の2つです。
- プラグインを使う方法
- CSSを追加する方法
初心者の方にはプラグインの方がわかりやすいですが、OWNBLOGではCSSで対応する方法をおすすめします。
理由は、ちょっとした調整のためにプラグインを増やすよりも、CSSで対応した方がサイトを軽く保ちやすいからです。
CSSでスマホだけ順番を変える方法
今回は、WordPressの「追加CSS」にコードを入れて対応します。
大まかな流れは以下です。
- 順番を変えたいカラムブロックにCSSクラスを付ける
- 追加CSSにコードを書く
- スマホ表示で確認する
順番に見ていきます。
まず、WordPressの編集画面で、スマホ表示の順番を変えたいカラムブロック全体を選択します。
ここで注意したいのは、カラムの中にある画像やテキストではなく、外側のカラムブロックを選択することです。
ブロックが選択しにくい場合は、画面左上の「リストビュー」を使うと便利です。
リストビューから「カラム」を選択すると、対象のカラムブロックを正確に選べます。
カラムブロックを選択したら、右側の設定パネルを開きます。
その中にある「高度な設定」から、追加CSSクラスに以下のクラス名を入力します。
reverse-columnこのとき、先頭にドットは付けません。
次に、WordPress管理画面から以下の場所を開きます。
外観 → カスタマイズ → 追加CSS
そこに、以下のCSSを追加します。
@media screen and (max-width: 781px) {
.reverse-column {
flex-direction: column-reverse;
}
}これで、画面幅が781px以下のときだけ、カラムブロックの表示順が逆になります。
コードの意味を簡単に解説
初心者の方にもわかりやすく、コードの意味を簡単に説明します。
@media screen and (max-width: 781px)これは、スマホやタブレットなど、画面幅が781px以下のときだけCSSを適用するという意味です。
WordPressのカラムブロックは、画面幅が狭くなると横並びから縦並びに変わります。そのタイミングに合わせて、スマホ表示だけ順番を変えています。
.reverse-columnこれは、先ほどカラムブロックに付けたCSSクラスです。このクラスが付いているカラムブロックだけにCSSを適用します。
flex-direction: column-reverse;これは、縦並びの順番を逆にする指定です。
通常は上から順番に並びますが、column-reverse を指定すると、上下の順番が逆になります。
特定のカラムだけ順番を変えられる
この方法の便利なところは、クラスを付けたカラムだけ順番を変えられる点です。
たとえば、すべてのカラムブロックにCSSを効かせてしまうと、意図しない場所の表示まで変わってしまいます。
そのため、以下のようにクラスを付けたブロックだけを対象にするのがおすすめです。
.reverse-column {
flex-direction: column-reverse;
}このようにしておけば、他のカラムブロックには影響しません。サイト全体のデザインを崩しにくいので、初心者の方でも扱いやすい方法です。
うまく反映されないときの確認ポイント
CSSを追加しても表示順が変わらない場合は、以下を確認してみてください。
主な原因は以下が考えられます。
- クラス名が一致しているか
- カラムブロック全体にクラスを付けているか
- キャッシュを削除しているか
- テーマ側のCSSが影響していないか
クラス名が一致しているか
ブロック側に入力したクラス名と、CSS側のクラス名が一致しているか確認しましょう。
ブロック側：
reverse-column（追加）CSS側：
.reverse-columnブロック側には。（ドット）なし、CSS側には.（ドット）ありです。
カラムブロック全体にクラスを付けているか
画像ブロックや段落ブロックではなく、外側の「カラム」ブロックにクラスを付ける必要があります。
うまく選択できない場合は、リストビューから「カラム」を選択してください。
キャッシュを削除しているか
キャッシュ系プラグインを使っている場合、CSSを追加してもすぐに反映されないことがあります。
その場合は、キャッシュを削除してから再確認しましょう。
ブラウザ側のキャッシュが影響している場合もあるので、シークレットウィンドウで確認するのもおすすめです。
テーマ側のCSSが影響していないか
テーマによっては、カラムブロックに独自のCSSが追加されている場合があります。
その場合は、以下のように display: flex; を追加したコードも試してみてください。
@media screen and (max-width: 781px) {
.reverse-column {
display: flex;
flex-direction: column-reverse;
}
}また今回使ったreverse-columnというクラス名ですが、既に既存で使われているのであればバッティングしてしまいます。その際は、任意のクラス名に変更してください。
プラグインで対応する方法
CSSを書かずに対応したい場合は、カラムブロックの機能を拡張できるプラグインを使う方法もあります。
VK Blocksプラグイン
『VK Blocks』というプラグインを使うことで、先ほど紹介したCSSを書かずにカラムブロックを順番を逆に表示することができます。
該当のカラムブロックを選択した状態で、右側の設定「ブロック」から「カラムの方向」→「逆」にチェックを付けることで設定完了となります。
※『VK Blocks』にこのカラムブロックの「逆」機能が追加されているのは、1.73.0からになります。古いバージョンをお使いの方はアップデートを行なってください。
まとめ：カラムブロックのスマホ表示はCSSで調整できる
WordPressのカラムブロックは、PCではきれいに見えていても、スマホでは意図しない順番で表示されることがあります。
特に、画像とテキストを交互に見せたいレイアウトでは、スマホ表示にしたときに「テキストが続いてしまう」「画像の位置が不自然になる」といった違和感が出やすいです。
このような場合は、カラムブロックに専用のCSSクラスを付けて、スマホ表示のときだけ順番を入れ替えることで調整できます。
クラスを付けたブロックだけに反映できるため、他のカラムブロックに影響しにくく、初心者の方でも比較的扱いやすい方法です。
WordPressのカラムブロックでスマホ表示の並び順に困ったときは、プラグインを追加する前に、まずはCSSで調整できるか試してみるのがおすすめです。
- カラムブロックはスマホ表示になると、PCとは違う順番で見えることがある
- 表示順を変えたいカラムブロックだけにCSSクラスを付けると、必要な場所だけ調整できる
- 画像とテキストを交互に見せたい場合は、スマホ表示の順番まで確認しておくことが大切
コメント（承認制）