サイトマップ
デバイスでの背景切り替え
当関連コンテンツで、サイトの背景を画像化した際のことは説明しております
ですが、ＰＣ閲覧での指定でスマートフォンでも同じスタイルが継続反映します
継続反映でも、スマートフォンの画面でサイトを見てみてフォントの認識に
何ら障害、見ずらいとか、が感じられなければそれはそれでよいのですが
認識しずらくなることも、コンテンツによりあるかと思います
対応策としては、
ＰＣ画面では、カスタマイズを表現していてもスマートフォン画面では
通常の白背景にするとか
もしくは、異なる画像に切り替えるとか、ですね
そのＣＳＳ指定法を種別にご案内します
今回の解説は、お隣ページでの背景画像をフィットする方法の
ＣＳＳをカスタムしますので、初めての方は以下ページをご確認ください
サイト背景画像がＰＣ画面で寸足らずでもＣＳＳでフィットする方法
ＰＣでの背景画像をスマートフォンでは切り替え表示
スマートフォンでは白背景にする
その場合は以下のＣＳＳに入れ変えます
ここはそのままです
画像コードのみ書き換え
.background {
display: block;
width:auto;
height: auto;
z-index: -19;
background: url(./img/1agoemon123.png);
background-repeat: no-repeat;
background-position: center center;
position: fixed;
overflow:hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size:cover;
}
画像コードだけは書き換えてください
display: none;で640px以下サイズではＰＣ用の画像を表示しないとしているのです
サイトオプション背景画像では、表示しないを選択しておくこと
@media screen and (max-width: 640px) {
.background {
display: none;
width:auto;
height: auto;
z-index: -19;
background-repeat: no-repeat;
background-position: center center;
position: fixed;
overflow:hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size:cover;
}
}
中断の日本語フォントは削除してください
これでＰＣサイズがスマートンサイズに代わると白台紙に戻ります
画像で切り替え表示する場合は、@mediaコードをさらに追加します
display: block;で、スマートフォンサイズでは以下項目内の
画像を表示します
@media screen and (max-width: 640px) {
.background {
display: block;
width:auto;
height: auto;
z-index: -19;
background: url(./img/atn_02@2x.gif);
background-repeat: no-repeat;
background-position: center center;
position: fixed;
overflow:hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size:cover;
}
}
画像コードは書き換えてください
bodyの項目に@mediaコードを追加する方法もありますが
あまりここはいじりたくないもので外部コードを追加する方法でまとめました
関連ページ
- 記事のデフォルト背景の変更方法
- シリウスの記事背景はＣＳＳ指定でデフォルトは白を指定していますが、背景の種類により各種合わせてカスタマイズが可能です
- サイト背景画像がＰＣ画面で寸足らずでもＣＳＳでフィットする方法
- シリウスにサイト背景を入れたものの、寸足らずでスペースが開いてしまう。画像の拡張では、画質の劣化を招く。そんな場合はＣＳＳ指定でフィットする方法がございます
- 背景をノンスクロール指定
- シリウスレスポンシブテンプレートでサイト背景をノンスクロール指定、固定化するＣＳＳ追加をご案内します
