[ 解決済 ] カードブロックでの画像表示乱れの対処法

[comtama]

■ 利用テーマとバージョン :Lightning Pro バージョン: 8.7.3

■ 質問内容：

お世話になっております。

VK Blocks Pro カードブロックを利用させていただき下記設定でブロックを作っております。
まず、PCで表示がちょうど良くなるように高さを175ｐｘで設定したのですが、スマホで見ると高さが途切れてしまいます。
そこで高さの値を大きくしててみると、と画像自体も上下に伸びてしまいます。

全てのデバイスで同じ見え方（サイズは異なっても）にするには、どのように設定すべきでしょうか？

お手数をおかけして恐縮ですが、ご回答いただければ幸いです。
よろしくお願いいたします。

設定は下記の通りです。
画像の元サイズは400 × 300です。
●表示タイプ：カード
●カラム
カラム ( 画面サイズ : Extra small )　カラム数1
カラム ( 画面サイズ : Small )カラム数2
カラム ( 画面サイズ : Medium )カラム数2
カラム ( 画面サイズ : Large )カラム数4
カラム ( 画面サイズ : Extra large )カラム数4
カラム ( 画面サイズ : XX Large )カラム数4
●表示要素　全てチェック有り
画像高さｐｘ
デバイス毎の高さ
PC 175
タブレット 175
モバイル 175

[対馬 俊彦]

全てのデバイスで同じ見え方（サイズは異なっても）にするには…

それはとてもむずかしく、カスタマイズすればできるかもしれませんが、
現実的にはできない(やらない)です。(下記に示す通り、代替案があるので)

私はカラム数と画像の高さをいろいろと変えて試して妥協点を見つけていますが、
カードブロックの画像はデザインの一部ととらえて、
上下または左右が欠けるのはしかたないと割り切っています。

【代替案】
画像を欠けずに(すべてのデバイスで同じように)表示したい場合は、
グリッドカラムを使えばいいです。

[comtama]

対馬様

ご回答ありがとうございます！
カードブロックのお話をうかがい、なるほどと思いました。グリッドカラムで対応しようと思います。

頂いたご回答で質問させていただいてすみませんが、ご相談させて下さい。

グリッドカラムでカードブロックと同じような外観になるように、borderを設定する等しているのですが、１点何度調整しても上手くいかない点があります。

４カラムの各カラム間にマージンをとりたいのですが、グリッドカラムアイテムに追加CSSクラスを指定してマージンを1pxでも指定すると、画面にはだいぶ余裕があるにもかかわらず、３カラム＋改行して１カラムというような表示になってしまいます。

何か方法が誤っているのでしょうか？

お手数をおかけして恐縮ですが、よろしければご意見いただければ幸いです。

[DRILL LANCER]

.wp-block-vk-blocks-grid-column-itemに対し margin ではなく padding を当てれば良いと思います。
デフォルトでは下記コードがカラム間の間隔幅として当たってます。

padding-right: 15px;
padding-left: 15px;

見つけ方は下記が参考になると思います。

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

• この返信は3年、 9ヶ月前にDRILL LANCERが編集しました。

[対馬 俊彦]

グリッドカラムでカードブロックと同じような外観になるように、borderを設定する…

グリッドカラムアイテムに border を設定するとマージンの設定が必要ですが、
グリッドカラムアイテムはマージンゼロで指定カラム数になる幅が設定されています。

例えば4列の場合、以下のように設定されています。

.col-**-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

この 25% の設定があるため、マージンを1pxでも指定すると4列を維持できなくなります。

この 25% の部分をなんとかしようとすると、
ここだけで済む話ではないので、私ならまちがいなく迷路に迷い込んでしまいます。

そこで、おすすめの方法ですが、

グリッドカラムアイテムにグループを入れて、そのグループの中に
・画像
・見出し
・段落
・VKボタン
を配置します。(添付画像をご参照ください)

この状態でグループに border を設定すると、
あまり苦労せずにカードブロックのようなものを作ることができます。

Attachments:

You must be logged in to view attached files.

[comtama]

DRILL LANCER様

ご返信ありがとうございます。
検証・御礼が遅くなり大変申し訳ございません。

私の質問自体が記載不十分で申し訳ございません。ブロックとブロックの間に空間を設けるのが希望でした。

ご教示頂いた方法を試させて頂きましたが、ブロック内（ボーダーの中）の空間は広がるのですが、ブロックとブロックの間が密着したままでした。

しなしながら、ご提案いただいたCSSでのカスタマイズ方法は、今後も活用させていただきたいと思います。

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

[comtama]

対馬様

度々のご返信ありがとうございます。
検証・御礼が遅くなり大変申し訳ございません。

ご提案いただいた、グループを利用する方法を実行させていただきました。
おかげさまで、希望していたボーダー並びにボーダー間の空白も実現出来ました。

また、ブラウザサイズ変更後の画像の見え方も問題無く、希望通りでした。

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

[投稿者]

投稿