Outerブロックの背景画像について
Outerブロックの背景画像について
-
投稿者投稿
-
2019年10月15日 6:04 PM #22343
小林閲覧者ご教示ください。
WordPress 5.2.4 (Lightning Pro テーマ)Outerブロックの背景画像がPCから見るといい感じなのですが、スマホから見ると拡大されすぎてしまい、何かわかりません
スマホからのアクセス時に背景を変更することはできませんか?背景画像の位置
固定レイアウト設定
全幅コンテンツエリアの余白 (左右)
コンテンツエリア内の左右に標準の余白を使用しない(全幅で利用の場合など)。余白 (上下)
標準の余白を使用しない(スペーサーブロックなどで独自に指定する)。2019年10月16日 11:52 AM #22382
うなこモデレーター解決策ではないのですが…
調べてみたらcssの
background-attachment:fixed;とbackground-size: cover;を同時に使うと効かなくなるようです。
background:fixedでの背景固定はiOS(iPhone)でうまく動かないのでこれを使いましょうこちらの記事に紹介されているbefore要素で高さを固定のpx指定にすれば、なんとかできそうな気はしますが、
ちょっと高さが固定しなくてはいけなかったりと…スマートではないので…
スマホサイズのみ、背景固定の指定をunsetしてみる方法でいかがでしょうか…?
追加cssなどに以下のcssを貼ってみて下さい。@media (max-width: 767px){ .vk_outer-bgPosition-fixed{ background-attachment:unset !important; } }
確かにスマホサイズの画像が設置できればいいのかもしれませんね
解決策ではなくてすみません…💦- この返信は5年前にうなこが編集しました。
2019年10月16日 7:39 PM #22422
小林閲覧者una 様
回答ありがとうございます
カスタマイズの追加CSSに教えて頂いたCSSを貼ってみましたが特に変化はなく改善はされませんでした
背景固定されません少し話は変わりますが、
作成しているページですが、サイドバー無しにしてOuterブロックの背景画像を全幅表示しているため、横長の画像を使っています
そうするとスマホ等の縦長で見ると拡大されすぎています
横長の画像を使っているのでスマホ用の画像が設定できなければある程度綺麗にできないのは納得できます画像のデザインが右寄りなので画像の右側が残ればある程度見れるようになると思います
しかし背景画像が拡大されていくときに画像の右側が削られていきます
これを左から削られていくようにすることは不可能でしょうか?- この返信は5年前に小林が編集しました。
2019年10月17日 10:11 AM #22468
うなこモデレーター小林さん
もしかしたら私のコピペミスかもしれません…
以下のcssでいかがでしょうか?@media (max-width: 767px){ .vk_outer-bgPosition-fixed{ background-attachment: unset !important; } }
> 画像のデザインが右寄りなので画像の右側が残ればある程度見れるようになると思います
背景画像を右寄りにするにはbackground-positionで指定できます。
上記のcssが効かない場合は以下のcssでいかがでしょうか?
(right centerは右寄りの上下に中央ぞろえという意味です。background-positionで検索してみると、
使い方がでてくると思います)@media (max-width: 767px){ .vk_outer-bgPosition-fixed{ background-position: right center !important; } }
2019年10月17日 12:30 PM #22486
小林閲覧者una 様
早速の回答ありがとうございます
上のCSSを貼り付けたところ特に変化は無く、背景固定はされません。
下のCSSを張り付けたところ背景は右が残るようになりましたが、背景は固定されません。
カスタマイズのプレビュー画面?をスマホサイズにしたときは固定されているのですが、実際にスマホで見ると固定されません。
文字で説明するのも限界を感じてきたのでテストページのURLを貼っておくので見て頂けないでしょうか?
現在は上のCSSを貼ってあります
http://kobayashi.ibis-b.com/vision/2019年10月17日 5:47 PM #22559
うなこモデレーター小林さん
この背景画像を右揃えにしてスマホで見た時も固定にしたい、ということですね。
ちょっと今からですと時間がないので明日みてみますね。2019年10月17日 6:45 PM #22570
小林閲覧者una 様
ありがとうございます
そのページはいじってしまうかもしれないので、こちらのページで見て下さい
よろしくお願い致します2019年10月17日 8:45 PM #22586
うなこモデレーター小林さん こんばんは!
OS Safariで固定(background-attachment: fixed;)が効かないみたいですね…
実機でみたら固定されていませんね。。。以前ご案内したサイトのbefore要素を使って実装する方法を試してみました。
background:fixedでの背景固定はiOS(iPhone)でうまく動かないのでこれを使いましょう↓こんな感じでいかがでしょうか?
[注意]画像のURLのところだけ実際の画像のURLにかえてください。(http://○○○○.jpgの部分)★max-width: 1024px でタブレットサイズから適応されるようになっています。
★height: 100vh; で要素の高さ100%になっています。好みで数字を変えていただいても大丈夫です。@media (max-width: 1024px){ .vk_outer-bgPosition-fixed::before { content: ""; background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),url(http://○○○○.jpg) no-repeat right center; background-size: cover; display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; transform: translateZ(0); } .vk_outer-bgPosition-fixed { background:none !important; } }
2019年10月18日 4:29 PM #22742
小林閲覧者una 様
指示して頂いたCSSタグで解決致しました。
右寄せ左寄せ等は様子を見ながら調整してなんとかなりそうです
ありがとうございました! -
投稿者投稿
- このトピックに返信するにはログインが必要です。