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

[有働綾]

■ WordPress のバージョン
5.9

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

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

■ テーマのバージョン
14.14.1

■ Pro Unit のバージョン
14.14.1

■ スキンの種類
その他

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

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

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

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

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

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

■ その他特記事項
なし

---

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

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

[対馬 俊彦]

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

以下の 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）カスタマイズ方法徹底解説

[石川＠Vektor,Inc.]

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

[有働綾]

対馬さんに教えていただいた方法を試しました。
ダッシュボード → 外観 → カスタマイズ → 追加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;
}

}

[石川＠Vektor,Inc.]

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

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

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

有働さん、

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

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

@media (max-width: 575.98px) {

.vk_flow .vk_flow_frame_image {
    margin: 0 auto;
}

}

[石川＠Vektor,Inc.]

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

[kkkg]

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

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

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

[有働綾]

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

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

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

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

.vk_flow .vk_flow_frame_image {
margin: 0 auto;
}

}

[投稿者]

投稿