【WordPress】パソコンで4カラム、スマホで2カラムにする方法

ブログ収益化
スポンサーリンク

この記事ではパソコンで横並びに4つの画像を表示しているものを、スマホでは横並びに2つに表示にするレスポンシブルなカラム配置の方法を解説します。

【解決したい課題】

  • パソコンの画面では4つの画像が横並びになるがスマホでは1枚ずつ縦に表示される。
    ※画像が1画面を埋めてしまいとても見えづらい。
  • パソコン、スマホでも4つ横並びにすると窮屈で見え辛くなる。
    ※スマホでは最低でも2つ横並びにしたい。

パソコンのカラム表示をスマホでも維持したい時はこちらを参照してください。

やりたいことを画像で示すと以下のようになります。

<パソコン表示>

<スマホ表示>

私はこの方法をブログのフロントページのカテゴリーボタンに使ってみました。

スポンサーリンク

準備するもの

  • WordPress
  • 画像データ4枚(4の倍数であればOK)
  • CSS

やり方解説

それでは早速やり方を解説していきます。

まずはCSSをコピーしてテーマエディターに貼り付けるところから始まります。

4つの画像をPCでは横4つ、スマホでは横2にするCSS

※CSSを貼り付ける前に現在のCSSのバックアップを取っておきましょう。
※CSSの編集はサブテーマ(CocoonであればCocoon child)を推奨します。

▼編集する場所

▼CSSのコード(コピペ可)

/*4つの画像をPCで横4枚、スマホで横2枚にするCSS*/
.custom-flex-container .wp-block-group__inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;    
}
.custom-flex-container .wp-block-group__inner-container figure.wp-block-image {
    width: 24%;
    text-align: center;
}
@media screen and (max-width:834px) { 
    .custom-flex-container .wp-block-group__inner-container figure.wp-block-image {
        width: 33%;
    }
}
@media screen and (max-width:520px) { 
    .custom-flex-container .wp-block-group__inner-container figure.wp-block-image {
        width: 49%;
    }
}

☆”custom-flex-container”がCSSのクラスとなり後ほど使用します。

投稿・固定ページに画像を4つ貼り付ける

※この例では画像を4枚使っていますが、5枚以上でもOKです。
※最大4枚が横並びに配置され5枚目以降は次の行に段落変更されます。

  1. 新しいブロックを作り画像を挿入します。
    画像アップロードorメディアライブラリ>画像を挿入する
  1. 合計4つになるようにして画像を挿入します。
    画面上は縦に4つの画像が並びます。

ブロックをグループ化する

  1. Shift左クリックでそれぞれの画像を複数選択します。
  1. 左上の画像アイコンをクリックしてグループ化します。

追加CSSクラスを入力する

グループ化したブロックに追加CSSクラスを記入します。

  1. グループ化したブロックを選択して
    ブロック高度な設定追加CSSクラスに”custom-flex-container”と入力します。
  1. 画像が4枚横並びになれば成功です。
  1. プレビュー>デスクトップ>新しいタブでプレビューで表示を確認しましょう。
    PC表示はこのようになっていたらOKです。
  1. スマホ表示はこのようになっていたらOKです。
    ※ウィンドウの幅を狭くしていき2枚の画像が横に慣れべば成功です。

まとめ

今回はPCで4枚の画像を横並びにし、スマホ表示では2枚の画像を横並びにする方法を解説しました。

オシャレなサイトが多い中でパソコン・スマホのレイアウトはとても気になると思います。

あなたの推しのデザインをふんだんに使って見やすいサイト作成を行ってみてください。

コメント

タイトルとURLをコピーしました