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

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

逆立ち

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

カラムブロックで、写真を右、テキストを左に配置した場合、スマホで見ると、テキストの下に写真が配置されてしまいます。

ここで紹介するのは、スマホでも写真が上に配置されるようにするカスタマイズ方法です。

また、ブロックエディターでは「メディアとテキスト」を使うと、カスタマイズの必要なく、スマホでも写真がテキストの上に配置されます。この方法についても紹介します。

この記事は、WordPress標準の「カラムブロック」「メディアとテキスト」を使う場合です。
SWELLテーマの「リッチカラム」の場合は以下をご覧ください。

目次

写真、テキストの順でスマホでも表示する方法

テキストと画像の配置

ブロックエディターでは、このような配置は、①「メディアとテキスト」または、②カラムブロックを使うと思います。

「メディアとテキスト」はスマホでも画像とテキストが交互に表示される

①「メディアとテキスト」の場合は、スマホで見た場合、画像とテキストが交互に表示されます。

デフォルトで画像がテキストの上にくるように配置される仕様となっているので、特にカスタマイズの必要はありません。

テキストと画像の配置

ただ、「メディアとテキスト」ブロックは、画像部分が画像のみで、背景に色を付けたり、コンテンツを加えるなどできず、自由度が低く、自由度の高い「カラムブロック」を使うケースも多いと思います。

「メディアとテキスト」ブロック

メディアとテキスト

「カラムブロック」はカスタマイズが必要

①「カラムブロック」の場合は、スマホで見ると、写真→テキスト→テキスト→写真となってしまいます。

そこで、赤枠で囲んだ部分で、画像がテキストが上にくるようなカスタマイズが必要です。

テキストと画像の配置

カラムブロックのカスタマイズ

カラムブロックのレイアウト例

レイアウトの例です。

以下のように、写真とテキストを横に並べ、最初と2番目で、写真とテキストの位置を逆にしています。

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

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

カスタマイズ前

リッチカラムブロック



変更

カスタマイズ後

SWELLカラム(スマホ)

カスタマイズ方法

クラス名を記載

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

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

カラムにCSS

CSSコードを追加

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

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

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

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

カラムブロックの数が多い場合のカスタマイズ方法

以下のようにカラムブロックの数が多い場合のカスタマイズ方法です。

以下の例では、2番目と4番目のカラムで、スマホで見た場合の表示順を逆にします。

カラム

全てのカラムブロックにカスタマイズを適用する場合

以下のCSSコードを追加します。

@media (max-width: 768px)  {
.wp-block-columns:nth-child(even){
flex-direction: column-reverse; 
}
}	

 疑似クラス:nth-child(even) で、順番が偶数のカラムの表示順が逆になります。

カラムの数がもっと多い場合も6番目、8番目、・・・・と順番が偶数のカラムに適用されます。

この場合、全てのカラムブロックに適用されます。

一部のカラムブロックだけにカスタマイズを適用する場合

必要なカラムブロックにだけ適用したい場合のカスタマイズ方法です。

複数のカラムブロックをグループ化

まず、一連のカラムブロックを全て選択し、グループ化します。

カラム

グループにクラスを追加

グループを選択した状態で、右サイドバーの「高度な設定」→「追加CSSクラス」に、任意のクラスを記載します。

この例では「col-reverse-all」

CSSコードを追加

@media (max-width: 768px)  {
.col-reverse-all .wp-block-columns:nth-child(even){
flex-direction: column-reverse; 
}
}

カスタマイズは以上です。

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

SWELL ロゴ

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

おすすめ度

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

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

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

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