ほぼ完成です！
背景に画像を使っている時、スマホ(AndroidとスマホChrome)で
チカチカして見にくいのを改善。
iPhoneでは問題なさそうでした。機種によるのかも？
背景に画像を使うとモバイル表示でチカチカする
チカチカする、を具体的に言いますと。
スマートフォンで画面下にスクロールすると、
背景画像とコンテンツの文章が交互に表示されたりする事です。
画面がチラついてとっても見にくいのです。
おそらくAndroidの標準ブラウザで起こります。
ただし、Android4.1未満の古いタイプでは起こりません。
実際に古いAndroidで見たら、
何も異常はなくキレイに表示されました。
なので仕様の変更により、Blogger表示の相性が悪くなったのかも？
今後Androidは標準ブラウザからChromeにシフトしていくそうです。
ですが、今はまだ標準ブラウザを使っている方が多いので、
メンテナンスします。
レイアウトで背景画像を指定している方
そんなに難しくないので大丈夫です。
まず、自分の背景画像のURLを調べます。
サイトを開き、ブラウザ上で
Chromeなら右クリック→
要素を検証(N)→
ソースがブラウザ下に表示される、右側にstylesが表示→
stylesに
body {
の欄があります。
これはコンテンツ全体のCSSを指定している箇所。
背景とか。
この中に
background: transparent url(http://ここはあなたの画像URL/background.png) repeat fixed top left;
という欄があります。
これをコピーして、メモ帳等に貼り付けてください。
チェックして欲しいのは、
fixed
があるか無いかです。
これは、スクロールした時に背景画像を動かさずに固定する指示。
その方が見やすいですからね。
コンテンツが。
スクロール固定していない方は、fixedの表示はありません。
デフォルト(空欄)では固定されない事となります。
原因はfixedで背景が固定される事、モバイルで解除する
原因はfixedです。
このfixedが背景画像をスクロールさせないように固定するのですが、
なぜかAndroidブラウザと相性が悪いのです。
背景画像がコンテンツ文章の上にチカチカ表示される
バグが起こります。
しかし、PCではスクロール固定しておきたいです。
なので、
Blogger管理画面→レイアウト→背景画像
で指定した背景画像はそのままでOK。
ここからモバイル・スマホ表示のみ、
背景画像をスクロール固定させない、解除させる指示をCSSに
追加します。
追加箇所を間違いやすいので注意して下さい。
BloggerのCSSでスクロール固定を解除
Blogger管理画面→
テンプレート→
HTMLの編集→
/* Mobile
または
body.mobile {
background-size: $(mobile.background.size);
}
を検索します。
必ずbodyの、モバイルのCSS部分に追加します。
そうしないとPCでスクロール固定が解除されてしまいます。
body～から始まるCSSはいくつもあるので、
追加箇所を間違えないようにしましょう。
ここに、先ほどメモ帳にコピーしたコードを貼り付けます。
追加する形です。
body.mobile {
background-size: $(mobile.background.size);
background: transparent url(http://ここはあなたの画像URL/background.png) repeat top left;
}
お気付きですね？
fixedを削除しています。
つまり、レイアウトで背景画像はスクロール固定に設定されていますが、
モバイルのみ固定解除するようにCSSを上書きするのです。
これでうまくいくかなぁと試したら上手くいきました。
CSSを追加しても上書きされないで、
スマホでスクロール固定されたままの方は下記をどうぞ。
レイアウトでスクロール固定を解除する
うまくいかない場合は、レイアウトでスクロール固定を解除するしか
ありません。
これでスマホ、モバイル表示ではスクロール固定は解除されているので
問題なくなります。
あとは、PC表示でどうするか、ですね。
難しい設定が嫌な場合は、
背景画像から背景色のみに変更する事です。
こうすれば何もすることはありません。
では、PCのみCSSでスクロール固定させる方法です。
/* Content
または
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
を検索します。
ここはPC表示のbody指定箇所ですが、
お使いのテンプレートによってはモバイルも絡んでいる可能性があります。
バックアップを取っておいて
色々試しましょう。
失敗してもバックアップがあれば、
元に戻せばいいだけです。
ではカスタマイズします。
background: $(body.background);
は
レイアウトに入力した内容を呼び出すコードです。
レイアウトで背景画像は指定されていると思います。
なので、
background: transparent url(http://ここはあなたの画像URL/background.png) repeat fixed top left;
に置換えましょう。(置換えないやり方も下記にあります)
置換えると、
後で元に戻す時にコードがわからなくなるので嫌だという方もいます。
元のコードはちなみにこちらです。
background: $(body.background);
なので、元のコードは残したまま、
スクロール固定させるコードも載せておきます。
個人的にはこちらの方がいいかもと思います。
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background) ;
background-attachment: fixed;
}
このコードがうまくいかない場合は、やはり
background: transparent url(http://ここはあなたの画像URL/background.png) repeat fixed top left;
に置換えましょう。
お使いのテンプレートによってうまくいかない場合もあると思います。
とにかくバックアップは事前に取っておいて、
何度も スマホとPCでで表示をチェックしたいですね。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク