シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧くださいトップページのみ背景画像を異なる表示とするＣＣＳ指定手順
今回はシリウスサイトの背景をすでに画像で設定しているサイト
もしくは 今後サイト背景を画像にするとした場合
トップページのみを以下階層と異なる背景で表示するという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;
を 追記してください
無指定の場合は スクロールすると画像まで上に移動します
また
トップページHTMLをclass指定することだけは忘れないでください
トップページの背景画像をＣＳＳ指定で切り替える一カラム
トップページのみ背景画像を切り替える 1カラムデフォルト背景例
シリウスカスタマイズ
