[ 解決済 ] 画像3カラム複数行の実装について【再】

VWSとは フォーラム その他 [ 解決済 ] 画像3カラム複数行の実装について【再】

[ 解決済 ] 画像3カラム複数行の実装について【再】

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

    junon
    参加者

    トピックは削除できないようなので、何度も投稿し本当に申し訳ありません。

    再度になりますが、よろしくお願いします。

    今までは、HTMLで書いていたのと、
    カラムブロックを使っても、大体複数カラムで1行なので、気になってなかったのですが
    画像だけでなくても、3カラム複数行の場合は、どのように実装されているのでしょうか?
    希望は、VK Blocks Proの投稿リストのように、スマホ、タブレットでも左から順に並べたいです。

    添付画像をご覧ください。
    パターンAのように、1行3枚で普段作っているので、
    2行6枚だから、複製し作りました。
    順番はタブレット、スマホとも問題ないのですが、
    タブレットでは空欄ができてしまう。

    パターンBだと、1カラムだけで上下に2枚配置したが、
    空欄は最後に行き、途中に入ることはなくなった。でも大きな空欄になる。4カラムなら気にならないかも。
    ただし、順番はタブレット、スマホとも問題ありです。

    パターンCは、VK Blocks Proのグリッドカラムで作成し、意図したとおり、完璧でした。

    とりあえずは、解決なのですが、

    • グリッドカラムは、こういう使い方であっているのか?
    • コアに入っているブロックで、同じようなことができるものがあるのか?
    • 本来こういう場合は、VK Blocksの何かを使うべき、VK Blocks Proの何かを使うべきなど、他の実装方法があるのでしょうか?

    など、どのように実装されているのか教えてほしいです。
    ベクトル製品、WordPressコア以外のブロック、プラグイン等の情報はご遠慮します。

    私はこうしてる。みたいな個人の実装方法でも構いません。
    よろしくお願いします。

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

    対馬 俊彦
    参加者

    グリッドカラムは、こういう使い方であっているのか?

    あっていると思います。私もグリッドカラムをこのように使っています。

    画面幅ごとにカラム数を指定できるので便利ですよね。とてもありがたいブロックです。

    コアに入っているブロックで、同じようなことができるものがあるのか?

    画像を並べることに限定すれば、WordPress のギャラリーブロックを使うこともあります。

    添付画像をご覧ください。

    3カラムで5枚の画像を表示すると、3で割り切れない部分が大きく表示されますが、
    以下の CSS で大きさを揃えています。

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

    割り切れない部分が大きく表示されることを利用して、
    以下の CSS で大きい画像を最初に配置して見せたりもします。
    新着作品の画像一覧で、あとから(最後に)追加したものが先頭に大きく表示されるという使い方です。

    .blocks-gallery-grid { flex-flow: row wrap-reverse; }

    • この返信は3週、 6日前に対馬 俊彦が編集しました。
    Attachments:
    You must be logged in to view attached files.
    #47947

    石川@Vektor,Inc.
    キーマスター

    僕としてはそういう用途のためにグリッドカラムブロックを用意したので、グリッドカラムブロックで良いと思いますー。

    #47950

    浅川幸宣
    参加者

    こんにちは。
    VK Blocks Proのグリッドカラム以外の選択肢として、

    ・画像のみの場合には、ギャラリーブロック
    ・コンテンツ(画像、文字、ボタンの組み合わせ)のような場合には、コードを書く

    で対応しておりました。

    #47973

    Chiaki Sugishita
    参加者

    私も参加させてくださいー!
    と言いつつも、みなさんと同じ意見です笑
    コアのブロックではできないものと諦めてます。
    対馬さんのようにcssでどうにかしようとすら考えてませんでした。
    対馬さん、お知恵を授けてくださりありがとうございます!

    実際、グリッドカラムはかなり多用しています。
    以前、アドベントカレンダーでも書きましたが、グリッドカラムにめちゃくちゃ助けられました。
    まぁこのときはかなりイレギュラーな使い方をしていますが笑
    参考までにURL貼っときます。

    WooECFesJapan2020でサイト構築をしたときのお話

    それと、グリッドカラムでつい最近気づいたことなんですが、このブロックはBootstrap4で書かれているので、グリッドカラムアイテムのクラス名に”d-flex”を与えてあげると隣同士のカラムの高さを自動で揃えてくれるんですね!
    めちゃくちゃ便利になりました。
    そんなの知ってたよって方々ばかりかと思いますが、この事に気づいたときは涙が出るほど嬉しかったです笑

    #47990

    junon
    参加者

    皆さん、回答ありがとうございます。

    投稿したあともgoogleで記事を探しましたが、複数行のことはほとんど記事がありませんでした。

    1つあったのは、パターンBのようにカラムブロックを利用し、1つのカラムに上下にすべて入れ込む。それをCSSで回り込ます。と言う記事でした。
    順番等、意図したとおりになりますが、結構強引に感じました。

    皆さんの回答から、コアのカラムブロックでは難しい。ということが確認できました。

    また、VK Blocks Proのグリッドカラムを当たり前のように活用されていることを知りました。いろんなヒントもありがとうございます。

    グリッドカラムの価値に気づかず、使っていなかった私は、もったいないことをしてました。

    これからは、どんどん使って、楽をして実装していきたいと思います。

    皆様、貴重なご意見ありがとうございました。

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