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

VWSとは フォーラム Lightning [ 解決済 ] ギャラリーのカラムについて

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

  • このトピックには8件の返信、3人の参加者があり、最後にpepepeにより3年前に更新されました。
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #47680

    pepepe
    参加者

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

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


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

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

    #47687

    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)カスタマイズ方法徹底解説

    #47694

    pepepe
    参加者

    ありがとうございます!

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

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

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

    #47696

    DRILL LANCER
    モデレーター

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

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

    横からすみません。

    ココチーノデータの数値を強調するために、以下のスタイルを追加して、
    2列のままで大きく見せるやり方も選択肢になるかと思います。

    .wp-block-gallery.columns-5 .blocks-gallery-item {
        flex-grow: 0;
    }

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

    ご参考まで。

    Attachments:
    You must be logged in to view attached files.
    #47719

    pepepe
    参加者

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

    #47720

    pepepe
    参加者

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

    #47748

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

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

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

    Attachments:
    You must be logged in to view attached files.
    #47773

    pepepe
    参加者

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

9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • このトピックに返信するにはログインが必要です。