[ 解決済 ] vk blocks カードのグリッドシステムでの画像サイズについて

VWSとは フォーラム VK Blocks・Pro [ 解決済 ] vk blocks カードのグリッドシステムでの画像サイズについて

[ 解決済 ] vk blocks カードのグリッドシステムでの画像サイズについて

  • このトピックには6件の返信、2人の参加者があり、最後にgundamにより1ヶ月、 4週前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #54470

    gundam
    参加者

    ■ 利用テーマとバージョン :G3 Origin3

    ■ 質問内容:
    今まで、lightning pro などで グリッドシステムを使ってた場合、画像が見切れる事なくカラム内で100%収まっていました。もちろん画像は同じサイズです。
    カードというブロックがすごい簡単で便利そうと思って使おうとしたら、
    画像サイズの高さの設定がありました。
    それぞれ異なる画像サイズの場合は、綺麗に表示されるのでしょうが、
    スマホサイズ、PCなど、高さを調整するのではなく、
    普通に100%表示にする事は可能でしょうか?同じサイズで画像を作った場合、逆に厄介な機能になります。
    個人的主観ですが。
    以上、よろしくお願いいたします。

    #54471

    このトピックが参考になると思います。

    カードブロックでの画像表示乱れの対処法

    #54491

    gundam
    参加者

    おはようございます。
    対馬様ありがとうございます。
    そういう使い方もあったのですね。
    実際試してみたのですが、画像上左右角丸、グループの線の太さ、
    余白、等の設定が大変そうな感じがしました。
    素直にカードを使って高さを調整するか、カスタムHTMLでグリッドシステムを使って書くかにします。

    ありがとうございました。

    #54493

    実際試してみたのですが、画像上左右角丸、グループの線の太さ、
    余白、等の設定が大変そうな感じがしました。

    今年2月に自分の勉強と備忘録のために書いた投稿があったのを思い出しました。

    グリッドカラムブロックでカードブロックのようなレイアウトを作るやり方

    グリッドカラムでひとつブロックを作ってしまえば、カスタム HTML で作るよりずっと楽できますので、ご参考にどうぞ。

    #54496

    gundam
    参加者

    対馬様重ね重ねありがとうございます。
    午前中に試行錯誤してまして
    対馬様のご提案を行おうとしていたのですが
    段落の文字数により、枠の高さが変更してしまう。
    これでは見栄えが良くないので
    カードブロックにしようとしたら
    今度はレイアウトを2カラムにすると
    中々画像が切れてしまう妥協点を見つけられず
    結局、カスタムHTMLで行ってたところです。
    クラスに「h-100」を追加し同じ高さで統一する事は出来たのですが
    ボタンの位置が下揃えが出来なくググっていたところでした。

    #54499

    文字数の多い・少ないがあると、たしかに気になりますね。

    【困った点】段落の文字数により、枠の高さが変更してしまう。
    【修正作業】グリッドカラムアイテムに display: flex; の指定を追加する。

    【困った点】ボタンの位置が下揃えが出来なく
    【修正作業】ボタンに position: absolute; の指定を追加する。

    先ほどお知らせした投稿で上記の修正作業を行いました。

    【追記】
    以前、私は HTML・CSS を書いてこのようなレイアウトを時間をかけて作っていましたが、スキルと時間の制約のためになかなか納得いくものができませんでした。
    ブロックエディターに移行してからは VK Blocks Pro などのブロックをなんとか工夫・活用して楽してやろうということを考えるようになり、以前よりもはるかに短時間で納得できるものを作れるようになりました。

    【追記 2.】
    昨晩のベクトルさんの勉強会で こうの ちあき さんがプレゼンしてくれた「飲茶の作法」というサンプルページはブロックの活用のすごいヒントになりました。

    飲茶のお作法(サンプル)

    Slack に登録すればこのサイトのデータをダウンロードできます。

    gundam さん、すでに参加・登録されてたらご容赦ください。

    • この返信は1ヶ月、 4週前に対馬 俊彦が編集しました。理由: 【追記】
    #54511

    gundam
    参加者

    対馬様、重ね重ねありがとうございます。
    思ったようにレイアウトできました。
    しかも、早く作業できました。
    ありがとうございます。

    Slack に登録してないです。
    ちょこちょこ勉強しなければならいので、
    貴重な情報
    誠にありがとうございます。

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