[ 解決済 ] outerで背景指定した際のモバイル表示について

[うさくま堂]

固定ページにouterを使い、背景を指定しています。
当初モバイル用は未設定のままで間延びした画像になっていたため、モバイル用にリサイズした画像を入れました。

PC用：1900×800
タブレット用：1600×1600
モバイル用：1200×1200→780×1200

PC用のリサイズではなく、全く別画像を同じサイズで入れてもぼやけます。読み込みができていないのではなく画像サイズが悪いのかと思いますが、適切なサイズはどれくらいでしょうか？

見え方につきましては、画像を添付いたします。

どうぞよろしくお願いいたします。

ワードプレスについて
・WordPress 5.4.1
・Lightning Pro　バージョン: 4.8.1
・JPNSTYLE　バージョン 5.2.0

作業および確認環境
・MacBook Pro　15インチ
・外部モニター 23インチ
・iPhone11　6.5インチ（828 x 1,792）
・iPad7　10.2インチ（1,620 x 2,160）

Attachments:

You must be logged in to view attached files.

---

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

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

[Vektor,Inc]

本件検証中につき追ってご連絡します。

[うなこ]

おそらくですが…
iOSではbackground-attachment:fixed;が効かないようで、これが問題ではないかなと思っております。

こちらに詳細が書いてありました。
background:fixedでの背景固定はiOS（iPhone）でうまく動かないのでこれを使いましょう

解決策ではないのですが…汗
タブレットサイズ以下では「固定」にせず、標準のスクロールにする方法はいかがでしょうか？
こちらですと固定ではなくなってしまいますが…　背景画像は見えるようになります。

追加cssか子テーマでしたら子テーマのcssに以下のcssを追加してみて下さい。

@media screen and (max-width: 768px){
.wp-block-vk-blocks-outer.vk_outer-bgPosition-fixed {
    background-attachment: scroll !important;
}
}

※@media screen and (max-width: 768px)　の数字はお好みのサイズに変えていただいてかまいません。

[Vektor,Inc]

大変お待たせいたしました。

まず、iPhone での背景固定処理については iPhone 側のバグが原因で、
いろいろと検証しましたが汎用ブロックにおいて解消する事ができませんでした。
※前後に来る要素の仕様がわかっていれば解消して固定表示する手段はあるのですが、利用箇所・利用者の知識レベルがまちまちな状況下で安定して動作させる事ができませんでした。

それを踏まえて、iPhoneでは「標準」のようにスクロール時に背景画像も追従する形となりますが、
iPhone側の仕様により画像サイズが適切に表示されずもとの画像サイズで表示されるようになっておりましたので、
iPhoneの場合も画面サイズに応じて背景サイズを調整して表示するように変更いたしましたので、
unako さんのコードがなくても同様の表示になるように修正しました。

VK Blocks Pro 0.31.0 からそのようになっておりますのでご確認くださいませ。

以上よろしくお願いいたします。

[うさくま堂]

確認およびご連絡が遅くなり大変申し訳ありません。
css追加および最新バージョンにて、不具合は無事解消されました。
ありがとうございました。

今後ともよろしくお願い申し上げます。

[投稿者]

投稿