[ 解決済 ] フローブロックで画像に文字を回り込ませたい

VWSとは フォーラム デザインスキン [ 解決済 ] フローブロックで画像に文字を回り込ませたい

[ 解決済 ] フローブロックで画像に文字を回り込ませたい

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

    有働綾
    参加者

    ■ WordPress のバージョン
    5.9

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    14.14.1

    ■ Pro Unit のバージョン
    14.14.1

    ■ スキンの種類
    その他

    ■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
    確認しました。

    ■ 期待する動作
    法律事務所パックを利用しています。
    「相談から解決までの流れ」のところで画像が右側に配置されています。
    デスクトップで見るとレイアウト的にかっこいいのですが、画像の下に文字が回り込まない設定になっているので、スマホで見ると、画像の下がずっと空白となり、その分テキスト(文章)が回り込まずに、すごく縦長でかっこ悪く表示されます。

    業務の流れを、フローで説明するようなページです。
    画像の下にも文字を回り込ませたい場合、どのような方法がありますでしょうか?

    ■ 自分で試した事
    追加CSSの所に、w-50 と入力する方法はレイアウトが崩れてしまい、うまくいきませんでした。

    ■ 症状が発生するブラウザ
    edgs

    ■ 実際の症状
    スマホでのレイアウト縦長すぎる

    ■ その他特記事項
    なし


    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #61340

    文字を回り込ませるやり方はわかりませんが、文字と画像を上下に配置するやり方でいかがですか?

    以下の CSS を追加してみてください。

    @media (max-width: 575.98px) {
    
    .vk_flow .vk_flow_frame {
        flex-direction: column;
    }
    
    .vk_flow .vk_flow_frame_image {
        margin: 10px auto 0;
    }
    
    }

    追加する場所については以下のページを参考にどうぞ。

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

    #61427

    確かにこれは見た目が良くないですね.
    改善検討いたします。

    #61484

    有働綾
    参加者

    対馬さんに教えていただいた方法を試しました。
    ダッシュボード → 外観 → カスタマイズ → 追加CSS
    上記の場所に、下記のCSSを貼付け公開ボタンを押したら、

    スマホで見たときに、間延びせず、
    テキストの下に画像が配置され、とてもよい感じになり感謝しております!

    Vektorの石川さんもご対応いただけると嬉しいです。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    @media (max-width: 575.98px) {

    .vk_flow .vk_flow_frame {
    flex-direction: column;
    }

    .vk_flow .vk_flow_frame_image {
    margin: 10px auto 0;
    }

    }

    #61487

    あ、おそらく別のCSSを書いてしまいました。

    次回アップデートで反映されます。

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

    有働さん、

    私が提示した CSS を追加したまま、VK Blocks をアップデートすると文面と画像の間が大きくなります。
    気になるようなら追加した CSS を削除してください。

    スマホで画像を中央揃えするのがお好みでしたら、以下の CSS に置き換えればオッケーです。

    @media (max-width: 575.98px) {
    
    .vk_flow .vk_flow_frame_image {
        margin: 0 auto;
    }
    
    }
    #61492

    アップデートいたしました。
    対馬さんと若干指定が違ったので、画像中央にする場合は追加CSSにてよろしくお願いいたします。

    #61538

    kkkg
    参加者

    以前こちらのフォーラムで全く同じ問題を指摘した者です。

    フローブロックのスマホ表示

    あの時点では機能追加しない方向でいくとのことでしたが、今回改善されて良かったです。

    • この返信は3ヶ月、 2週前にkkkgが編集しました。
    #61546

    有働綾
    参加者

    石川さん更新ありがとうございました。
    デフォルトでかっこよいレイアウトになりました!

    また、対馬さん、重ねてありがとうございます!
    画像を真ん中に配置したいので教えていただいた通り

    ダッシュボード → 外観 → カスタマイズ → 追加CSS

    下記のCSSに書き換えました。
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    @media (max-width: 575.98px) {

    .vk_flow .vk_flow_frame_image {
    margin: 0 auto;
    }

    }

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