[ 解決済 ] Outerブロックの背景設定について

[fuku]

■ WordPress のバージョン
6.6.2

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

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

■ テーマのバージョン
15.26.4（Lightning Childバージョン: 0.5.1）

■ Pro Unit のバージョン
0.27.1

■ スキンの種類
Origin III

■ 期待する動作
Outerブロックの背景設定を、モバイル（iphone）でもcssなどで固定表示にさせたい。

難しければ、画像の横幅をモバイルの表示幅に合わせて、縦の足りないぶんは繰り返し表示させる方法で対応したい。

■ 自分で試した事
モバイル用に縦長の画像を用意した。
過去の似た質問の回答をまねてみた。

■ 症状が発生するブラウザ
safari（iPhone）

■ 実際の症状
Outerブロックの背景画像をカバー固定にした場合、「iphoneでは固定されません」と記載があります。
それで、モバイル用に縦長の画像を用意（350×522）したのですが、実際にiphoneで表示させると、コンテンツの長さと画像の縦の長さが一致するように拡大表示されるため、長めのコンテンツだと、画像がかなり拡大し、横幅が極端に切れてしまいます。

CSSで、モバイル（iphone）も固定表示にさせることは可能でしょうか。

難しければ、画像の横幅をモバイルの表示幅に合わせて、縦の足りないぶんは繰り返し表示させる方法で対応したいです。

※もっと縦長の画像を用意することも考えたのですが、コンテンツの長さが今後増える可能性もあり、そのたびに画像を変えるのは現実的じゃないので…。

2022年3月9日の「[ 解決済 ] ヘッダー画像のモバイル画像が左右切れてしまう。」を参照し、
background-size: contain;
を指定してみたのですが、変化なしでした。

それと、PCで編集しているのですが、PCの開発者ツールでスマホ表示を確認すると、モバイルサイズでも狙った通りの画面幅で背景固定で表示されているのですが、これは「iphone以外のモバイルでは固定表示される」ためでしょうか。
だとすると、iphoneとiphone以外のモバイル用をどちらもちょうどよく表示させるには、どのように設置するのが最適なのか教えていただけると有難いです。

※できればPC画面では背景固定にしたいです。

[うなこ]

CSSで、モバイル（iphone）も固定表示にさせることは可能でしょうか。

「iOS 固定背景」などで検索していただくと、さまざまな方法が見つかるかと思います。
例えば、代表的なもので :before 擬似要素に背景を設定する方法などがありますので、一度お試しいただくと良いかもしれません。
こちらも参考になるかと思います。
https://qiita.com/baby-0105/items/733394271869a727689f

難しければ、画像の横幅をモバイルの表示幅に合わせて、縦の足りないぶんは繰り返し表示させる方法で対応したいです。

以下は、Outerブロックに「カスタムCSS」で、幅が991.98px以下のときにリピートするサンプルのCSSになります。
適宜調整してお使いください。

/*背景画像*/
@media(max-width:991.98px) {
selector.vk_outer-bgPosition-fixed{
background-size: contain !important;
background-repeat: repeat-y;
}
}

それと、PCで編集しているのですが、PCの開発者ツールでスマホ表示を確認すると、モバイルサイズでも狙った通りの画面幅で背景固定で表示されているのですが、これは「iphone以外のモバイルでは固定表示される」ためでしょうか。

iOSのバグによるものですので、おそらくAndroidなどのスマホですと固定されていると思います。
（WordPressコアのカバーブロックの固定背景でも、iPhoneだと固定されていないと思います）

先ほどご案内したCSSを使用して、必要に応じて調整してみてください。

CSSに関しましては、こちらがわかりやすいと思いますので、参考にしてください。

できる！CSSカスタマイズ

[fuku]

うなこ様

ご返答ありがとうございます！

ご教示いただいたカスタムCSSのコードで、アイフォンだけ繰り返し画像にすることができました。

ただ、一番上が、画像の途中から始まってしまいます。
画像の天辺から表示されるように調整することは可能でしょうか。

（自分で書き換えができなく、すみません…）

[うなこ]

背景画像の位置は CSS の background-position で指定できます

https://developer.mozilla.org/ja/docs/Web/CSS/background-position

例えば　background-position: top;　の指定を追加してみてください

[fuku]

うなこ様

ご返答ありがとうございます。
追加CSSで、一番上から表示することができました！

「iOS 固定背景」でも調べてみたのですが、
サンプルCSSを試しても反応せず…。

こちらは時間のあるときに改めて勉強することにして、
今回はiphonのみ繰り返し表示させる方法にします。

いつもありがとうございます。
とても助かります！

[投稿者]

投稿