[ 解決済 ] Outerの画像背景でPCで16インチ以上の画面サイズになると画像が切れてしまうのを防ぎたい。

[順子新井]

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

■ 質問内容：
Outerの画像背景でPCで16インチ以上の画面サイズになると画像が切れてしまうのを防ぎたいです。
PC、タブレット、スマホ用の画像を作成して設定しています。
背景画像の位置はカバーにしています。
PCの画面サイズが16インチ以上になると、画像が幅に合わせて伸びるので、画像の上の部分が切れてしまします。
良い解決方法はありますでしょうか？

Attachments:

You must be logged in to view attached files.

[うなこ]

添付していただいた画像をみると（男性が中心にいて吹き出しが４つの画像）、
Outerブロックの背景に設置するのではなく、
画像ブロックで画像として挿入するのが良いのかなと思ったのですが、いかがでしょうか？

• この返信は3年、 4ヶ月前にうなこが編集しました。

[順子新井]

回答ありがとうございます！
確かに画像ブロックで画像として挿入すると切れる問題は解消されそうです。
しかし、PC用の画像をスマホサイズまで縮小しているので文字が見えにくいという問題が発生してしまいそうです。
Outerブロックの背景画像のように、スマホ用に画像を差し替えるみたいなことはできるんでしょうか？

[うなこ]

HTMLのソースは残りますが、見た目上の要素を非表示にする「非表示設定」を利用する方法があります。

まず、パソコン用の画像とスマホ用の画像を配置して、
画像ブロックを選択した状態で、ブロックの設定の下の方にある「非表示設定」で、非表示にする画面サイズを設定できます。

例えばパソコンサイズでは
非表示 ( 画面サイズ : xs )非表示 ( 画面サイズ : sm )をオンにして
スマホサイズでは
非表示 ( 画面サイズ : md )非表示 ( 画面サイズ : lg )非表示 ( 画面サイズ : xl )非表示 ( 画面サイズ : xxl )をオンにするなど、お好みで設定してみてください

• この返信は3年、 4ヶ月前にうなこが編集しました。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

横からすみません。

当初の通り Outer ブロックに背景画像を設定する前提で、この問題の対策の一例として、画面幅が一定以上になったら Outer ブロックをコンテナの幅に合わせる(全幅→標準にする)やり方が有効かもしれません。

具体的手順としては該当ページの カスタム CSS に以下の行を追加します。

@media (min-width: 1800px) {

.vk_outer-width-full {
margin-left: 0;
margin-right: 0;
}

.vk_outer-width-full.vk_outer-paddingLR-none {
padding-left: 0;
padding-right: 0;
}

}

※ 1800px の部分は現物合わせで調整

上記の例では画面幅が 1800px 以上になったら全幅の Outer ブロックを標準幅に切り替えています。

[順子新井]

うなこさん、対馬 俊彦さん、回答ありがとうございます！
今回は「非表示設定」を利用する方向で実装しようと思います。

[投稿者]

投稿