---

 

今回はシリウスサイトの背景をすでに画像で設定しているサイト..

 

もしくは、今後サイト背景を画像にするとした場合..の参照記事..

 

トップページのみを以下階層と異なる背景で表示するというCSS指定手順を
ご案内いたします..

 

イメージは当ページみたいなもんです（オール画像）
ただし、当ページはエントリーページであり、イメージとして画像配備して
いるのであって、トップページも画像ありきでも異なる画像となります。

 

 

さて、シリウスのデフォルトテンプレートでは、2カラムでも3カラムでもトップページのみを
一カラムに変更できることは...class指定することにより可能です..

 

こちらでclass指定での変更詳細をご確認ください
2カラムトップページのみ一カラム個別指定変更カスタマイズ

 

 

トップページのみ背景画像を変更する場合は、やはりclass指定することに
よって可能となります。

 

上記例サイトでトップページのみ一カラムとはご確認できたと理解し...
先へ進みますね

 

 

スポンサーリンク

 

 

 

 

---

 

トップページのみ画像の表示指定の理解

 

スタイルシートを開きます

 

以下の原本記載へ到達してください

 

ここはいじりません

 

/* 基本スタイル */

 

body {
margin: 0px;
padding: 0px;
text-align: center;
color: #333333;
font-size: 0.9em;
line-height: 140%;
background-color: #F5F5F5;
　　　　<% backgroundImage %>
<% backgroundDisplay %>
<% backgroundColor %>
<% bodyFontSize %>
}

 

上記の少々下へ以下class指定　および加えた改行記載を張り付けます

 

改行されている箇所をご確認ください

 

body.top {
margin: 0px;
padding: 0px;
text-align: center;
color: #333333;
font-size: 0.9em;
line-height: 140%;
background-color: #F5F5F5;
background-image: url(./img/.背景の画像コードjpg);（追加する画像コード）
<% backgroundColor %>
<% bodyFontSize %>
}

 

 

 

原本CSS
　　　　<% backgroundImage %>
<% backgroundDisplay %>
の記述が、シリウスデフォルト機能で指定した画像を読み込んでいますが

 

class指定の記述では、シリウス管理画面から別画像を読み込みますので
不要となり削除します..

 

削除しないとデフォルトが読み込まれます..

 

 

次に削除した記述の箇所へ
...管理画面から読み込むための新たな記載を付け加えます..

 

以下記述です
background-image: url(./img/.背景の画像コードjpg);

 

 

背景としたい画像のコードを書き込んでください

 

例
background-image: url(img/1acc.png);

 

 

で、class指定の記述では書き換えた画像コードが読み込まれ表示されるわけです

 

長々と書いてますが作業はこれだけです（簡単ですね）

 

---

 

すみません...
大事なこと書き忘れです...

 

スクロールした際..画像を固定する場合は

 

スタイルシートのbody要素内に背景画像を、固定化する指定コード

 

background-attachment:fixed;

 

を追記してください...

 

bodyの下、囲い枠内のどこかに..以下参照...
/* 基本スタイル */

 

body {
margin: 0px;
padding: 0px;
text-align: center;
color: #FFFFFF;
font-size: 0.9em;
line-height: 140%;

background-attachment:fixed (ここですね）
}

 

 

無指定の場合は、スクロールすると画像まで上に移動してしまいます...

 

また,、トップページHTMLをclass指定することだけは忘れないでください。

 

 

トップページの背景画像をＣＳＳ指定で切り替える一カラム
トップページのみ背景画像を切り替える　1カラムデフォルト背景例
シリウスカスタマイズ