[ 解決済 ] ギャラリーのカラムについて

[pepepe]

■ 利用テーマとバージョン :WordPress 5.6 (Lightning Pro

■ 質問内容：
ギャラリーにて画像をカラム５つ横並びにして使用してるのですが、スマホになると２列になってしまいます。
スマホでも、画像５つを横並びのまま表示させたいのですが、いい方法はありますでしょうか？

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[DRILL LANCER]

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;
}

どのように扱うかは下記が参考になります。

できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説

[pepepe]

ありがとうございます！

width: calcが20％だとスマホ(アイフォン８)では４つ+大きい1個になってしまったので
width: calcを18％にしてみました。
スマホでは1列で表示できました！

アイフォン８より画面が小さいスマホだとまた見切れてしまうのかな…と心配ですが、
どの画面サイズでも１列になるCSSはやはり難しいでしょうか。

上記参照サイトもありがとうございます！

[DRILL LANCER]

先程のコードは全画面サイズで縦１行横５列のコードです。
改良を加えるとすればこんな感じですかね。

.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;
}

添付画像のようになります。

ご参考まで。

Attachments:

You must be logged in to view attached files.

[pepepe]

CSSを入力させていただき、スマホでも５列で表示がされました！
本当にありがとうございます！！

[pepepe]

そのような方法もあるのですね！数値が見やすくていいですね！
ちなみに、もう一つデータを増やして６個にした場合、
３つ×２段のCSSも教えていただくことは可能でしょうか？

[対馬 俊彦]

もう一つデータを増やして６個にした場合、
３つ×２段のCSSも教えていただくことは可能でしょうか？

メディアクエリを使って、WordPress ギャラリーの CSS を置き換える記述を追加する必要があり、手間がかかります。

6個であれば、VK Blocks Pro のグリッドカラムを使うとよいです。
CSS を書かなくても、画面サイズごとに 1,2,3,4,6 の中から列数を選ぶことができます。
添付画像をご覧ください。

Attachments:

You must be logged in to view attached files.

[pepepe]

そうですんね６個ならカラムで対応します！
ご丁寧に画像を添付していただきありがとうございます！

[投稿者]

投稿