【SWELL】スマホでのカラム表示の順番を逆にするカスタマイズ

2023年12月28日2024年4月14日

WordPressテーマ「SWELL」で、スマホでのカラム表示の順番を逆にするカスタマイズ方法をご紹介します。

紹介するのは、SWELLのオリジナルブロック「リッチカラム」でのカスタマイズです。

WordPress標準の「カラムブロック」「メディアとテキスト」を使う場合は、こちらをご覧ください。

「リッチカラム」スマホでの表示順を逆にする方法

レイアウト例です。

以下のように写真とテキストが横並びのリッチカラムが２つあるケースです。

スマホで見ると、以下の左側のように、写真→テキスト→テキスト→写真となってしまいます。

これをカスタマイズし、以下の右のような（写真→テキスト→写真→テキスト）配置にします。

カスタマイズ前

変更
➡

カスタマイズ後

クラス名を記載

画像が右側にあるカラムの全体を選択した状態で右サイドバー下の方の「高度な設定」→「追加CSSクラス」に任意のクラス名を記載します。（既にクラス名が記載されている場合は、半角を空けて追加します）

この例では、「swell-col-reverse」と記載しています。

CSSコードを追加

CSS （スタイルシート）記載先

@media (max-width: 768px)  {
.swell-col-reverse .swell-block-columns__inner{
flex-direction: column-reverse; 
}
}

カスタマイズはこれだけで完了です。

スマホで、写真→テキスト→写真→テキストと表示されるか確認しましょう。

SWELL関連のおすすめ記事

よかったらシェアしてね！