当サイトではアフィリエイト広告を利用しています

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

SWELL

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

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

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

目次

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

レイアウト例です。

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

リッチカラム

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

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

カスタマイズ前

リッチカラムブロック



変更

カスタマイズ後

リッチカラムブロック

カスタマイズ方法

クラス名を記載

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

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

CSSコードを追加

CSS スタイルシート)記載先

  • 管理画面>外観> テーマエディター(子テーマのstyle.css)
    または、
  • 管理画面>外観>カスタマイズ> 追加CSS
@media (max-width: 768px)  {
.swell-col-reverse .swell-block-columns__inner{
flex-direction: column-reverse; 
}
}

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

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

当サイトで使用中のWordPessテーマ

SWELL ロゴ

WordPressテーマの国内人気シェアNo.1テーマ(2023年1月・マニュオン調べ)

おすすめ度

SWELL のメリット
  • 効率的、時短
    ブロックエディタ完全対応。使いやすく、効率的に記事作成ができる。
  • おしゃれ、美しいサイト
    コードを書かずに本格的なデザイン、おしゃれなサイトができる
  • 高速表示
    サイトの表示速度が高速
  • アフィリエイトに最適!
    アフィリエイトに便利な機能が豊富。購入者限定アフィリエイトもあり!
SWELLのデメリット
  • 利用者が多く、デザインが被る可能性がある

ブログが楽しくなるテーマ

複数サイトで利用でき、コスパも最高

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次