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

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

【解決したい課題】

パソコンの画面では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のクラスとなり後ほど使用します。