ワードプレスのライトニングテーマって初心者の人にもわかりやすく、かつ使える機能がたくさんあってすごいですよね。今回はLightningテーマのカラムブロックのお話しです。
やりたいこと 6カラム1行をスマホ表示では3カラム2行に
ライトニングの固定ページで、Gutenbergのカラムブロックで、6カラム表示をするとスマホでみたときに1カラムになってしまいますよね。
6カラムに画像を入れて、スマホで1カラムだとスクロールが大変なので、スマホでは3カラム2行表示にしたいなと思っていました。
できれば、このためだけにプラグインを入れることはしたくなかったので、今ある機能でどうにかするか、CSSのカスタマイズを試みました。
解決方法
そして、ライトニングの機能と、CSSコードの追加で解決しました!
①カラムブロックに以下のCSSコードを追加します。
②Lightningの画面表示毎の非表示設定を使いこなすのです。
詳しい内容はあとで画像とともに載せますね。よろしくお願いいたします。