背景をノンスクロール指定
シリウスのデフォルト機能か、当サイトの背景組み込みコンテンツで
サイト背景に画像をを挿入することは容易にできますね
さて、その背景画像はサイトのスクロールに合わせて上部へ移動したほうが
よいのでしょうか?
多くのサイトを見てみますと、デザイン以外のフォト画像の場合、
ほとんどノンスクロールかと理解していますが、?
サイト背景をスクロールしない、というCSS指定をすれば、記事だけが
動いても背景は動かず...という形態に
そんな仕組みはレスポンシブ構造でも簡単にできます
ここでご注意です
当サイトの関連ページ
サイト背景画像がPC画面で寸足らずでもCSSでフィットする方法
をCSSに入れている場合は、コードの固定記述が含まれているので
今回の解説は必要ありません
あくまで通常のレスポンシブテンプレートを使用する場合に限ります
ノンスクロールを指定するコードをスタイルシートに入れ込みます
background-attachment:fixed
ここへ到達
==================================================
基本スタイル
==================================================
*/
body {
background-color: #ebebeb;
border-top: 4px solid #999999;
color: #333333;
font-family: メイリオ Helvetica, Hiragino Kaku Gothic Pro sans-serif;
font-size: 15px;
line-height: 180%;
text-align: center;
letter-spacing: -0.001em;/* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%;/* 文字サイズの自動調整機能のキャンセル */
ここに入れます
background-attachment:fixed
}
これで終わり,,,desu
関連ページ
- 記事のデフォルト背景の変更方法
- シリウスの記事背景はCSS指定でデフォルトは白を指定していますが、背景の種類により各種合わせてカスタマイズが可能です
- サイト背景画像がPC画面で寸足らずでもCSSでフィットする方法
- シリウスにサイト背景を入れたものの、寸足らずでスペースが開いてしまう。画像の拡張では、画質の劣化を招く。そんな場合はCSS指定でフィットする方法がございます
- サイト背景をデバイス別に切り替える方法
- シリウスのレスポンシブサイトの背景をPCとスマートフォンではフォントの認識具合により切り替えることも必要。では、切り替える方法をご案内します