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

VWSとは フォーラム VK Blocks・Pro [ 解決済 ] カードブロックでの画像表示乱れの対処法

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

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

    comtama
    参加者

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

    ■ 質問内容:

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

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

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

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

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

    #48393

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

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

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

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

    #48429

    comtama
    参加者

    対馬様

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

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

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

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

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

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

    #48434

    DRILL LANCER
    モデレーター

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

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

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

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

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

    グリッドカラムでカードブロックと同じような外観になるように、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.
    #48611

    comtama
    参加者

    DRILL LANCER様

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

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

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

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

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

    #48612

    comtama
    参加者

    対馬様

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

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

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

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

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