[ 解決済 ] ギャラリーのカラムについて
[ 解決済 ] ギャラリーのカラムについて
- このトピックには8件の返信、3人の参加者があり、最後に
により4年、 9ヶ月前に更新されました。
-
投稿
-
■ 利用テーマとバージョン :WordPress 5.6 (Lightning Pro
■ 質問内容：
ギャラリーにて画像をカラム５つ横並びにして使用してるのですが、スマホになると２列になってしまいます。
スマホでも、画像５つを横並びのまま表示させたいのですが、いい方法はありますでしょうか？該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
CSS でカスタマイズするのが早そうです。
例えば下記コードとか・・・.blocks-gallery-grid.columns-5 .blocks-gallery-image, .blocks-gallery-grid.columns-5 .blocks-gallery-item, .wp-block-gallery.columns-5 .blocks-gallery-image, .wp-block-gallery.columns-5 .blocks-gallery-item { width: calc(20% - .8em); margin-right: 1em; }どのように扱うかは下記が参考になります。
ありがとうございます！
width: calcが20％だとスマホ(アイフォン８)では４つ+大きい1個になってしまったので
width: calcを18％にしてみました。
スマホでは1列で表示できました！アイフォン８より画面が小さいスマホだとまた見切れてしまうのかな…と心配ですが、
どの画面サイズでも１列になるCSSはやはり難しいでしょうか。上記参照サイトもありがとうございます！
先程のコードは全画面サイズで縦１行横５列のコードです。
改良を加えるとすればこんな感じですかね。.blocks-gallery-grid.columns-5 .blocks-gallery-image, .blocks-gallery-grid.columns-5 .blocks-gallery-item, .wp-block-gallery.columns-5 .blocks-gallery-image, .wp-block-gallery.columns-5 .blocks-gallery-item { width: calc(20% - 1em); margin-right: 1em; } .blocks-gallery-grid.columns-5 .blocks-gallery-image:last-child, .blocks-gallery-grid.columns-5 .blocks-gallery-item:last-child, .wp-block-gallery.columns-5 .blocks-gallery-image:last-child, .wp-block-gallery.columns-5 .blocks-gallery-item:last-child { margin-right: 0; }横からすみません。
ココチーノデータの数値を強調するために、以下のスタイルを追加して、
2列のままで大きく見せるやり方も選択肢になるかと思います。.wp-block-gallery.columns-5 .blocks-gallery-item { flex-grow: 0; }添付画像のようになります。
ご参考まで。
もう一つデータを増やして６個にした場合、
３つ×２段のCSSも教えていただくことは可能でしょうか？メディアクエリを使って、WordPress ギャラリーの CSS を置き換える記述を追加する必要があり、手間がかかります。
6個であれば、VK Blocks Pro のグリッドカラムを使うとよいです。
CSS を書かなくても、画面サイズごとに 1,2,3,4,6 の中から列数を選ぶことができます。
添付画像をご覧ください。
- このトピックに返信するにはログインが必要です。
