[ 解決済 ] vk blocks カードのグリッドシステムでの画像サイズについて
[ 解決済 ] vk blocks カードのグリッドシステムでの画像サイズについて
- このトピックには6件の返信、2人の参加者があり、最後に
により3年、 3ヶ月前に更新されました。
-
投稿
-
■ 利用テーマとバージョン :G3 Origin3
■ 質問内容：
今まで、lightning pro などで グリッドシステムを使ってた場合、画像が見切れる事なくカラム内で100％収まっていました。もちろん画像は同じサイズです。
カードというブロックがすごい簡単で便利そうと思って使おうとしたら、
画像サイズの高さの設定がありました。
それぞれ異なる画像サイズの場合は、綺麗に表示されるのでしょうが、
スマホサイズ、PCなど、高さを調整するのではなく、
普通に100％表示にする事は可能でしょうか？同じサイズで画像を作った場合、逆に厄介な機能になります。
個人的主観ですが。
以上、よろしくお願いいたします。このトピックが参考になると思います。
おはようございます。
対馬様ありがとうございます。
そういう使い方もあったのですね。
実際試してみたのですが、画像上左右角丸、グループの線の太さ、
余白、等の設定が大変そうな感じがしました。
素直にカードを使って高さを調整するか、カスタムHTMLでグリッドシステムを使って書くかにします。ありがとうございました。
実際試してみたのですが、画像上左右角丸、グループの線の太さ、
余白、等の設定が大変そうな感じがしました。今年2月に自分の勉強と備忘録のために書いた投稿があったのを思い出しました。
グリッドカラムでひとつブロックを作ってしまえば、カスタム HTML で作るよりずっと楽できますので、ご参考にどうぞ。
対馬様重ね重ねありがとうございます。
午前中に試行錯誤してまして
対馬様のご提案を行おうとしていたのですが
段落の文字数により、枠の高さが変更してしまう。
これでは見栄えが良くないので
カードブロックにしようとしたら
今度はレイアウトを2カラムにすると
中々画像が切れてしまう妥協点を見つけられず
結局、カスタムHTMLで行ってたところです。
クラスに「h-100」を追加し同じ高さで統一する事は出来たのですが
ボタンの位置が下揃えが出来なくググっていたところでした。文字数の多い・少ないがあると、たしかに気になりますね。
【困った点】段落の文字数により、枠の高さが変更してしまう。
【修正作業】グリッドカラムアイテムに display: flex; の指定を追加する。【困った点】ボタンの位置が下揃えが出来なく
【修正作業】ボタンに position: absolute; の指定を追加する。先ほどお知らせした投稿で上記の修正作業を行いました。
【追記】
以前、私は HTML・CSS を書いてこのようなレイアウトを時間をかけて作っていましたが、スキルと時間の制約のためになかなか納得いくものができませんでした。
ブロックエディターに移行してからは VK Blocks Pro などのブロックをなんとか工夫・活用して楽してやろうということを考えるようになり、以前よりもはるかに短時間で納得できるものを作れるようになりました。【追記 2.】
昨晩のベクトルさんの勉強会で こうの ちあき さんがプレゼンしてくれた「飲茶の作法」というサンプルページはブロックの活用のすごいヒントになりました。Slack に登録すればこのサイトのデータをダウンロードできます。
gundam さん、すでに参加・登録されてたらご容赦ください。
- このトピックに返信するにはログインが必要です。
