シリウスカスタマイズ | オンラインマニュアルライブラリー

シリウスのデフォルトテンプレート記事背景は　何もカスタマイズなどしなければ

白台紙ですね

この記事背景は　画像でできておりテンプレートフォルダの画像ファイルに
置いてあり　スタイルシートの呼び出し指定で表示されるのです

トップページのみ一カラムとして　オール背景を画像として表示する場合は

class指定で　管理画面に置いた画像ファイルを別読み込みすることになります

例１
当該コンテンツは　同関連ページの関連説明となります
トップページのみ背景画像を切り替える　1カラム背景画像設定済み例

class指定は　以下ページでご確認ください
シリウス2カラムトップページのみ一カラム個別指定変更カスタマイズ

すでに記事背景を　オール画像としている場合とは異なり

カテゴリー以下の下層では記事背景表示

トップページのみ記事背景を読み込まず　非表示として

背景画像を全体に表示する

...というカスタマイズの手順で進めますが

上記での例１ページでご案内しているCSS記載に　もう一つの
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 %>
}

ここまでは例1ページ同様ですが　次に基本レイアウトへ移動します

/* 基本レイアウト */

原本です

#container {
width: 900px;
_width: 910px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
background-image: url(./img/cnt_bg.png);
backgrund-repeat: repeat-y;
}

上記載の下へclass指定を追加してください

追加行です

body.top
#container {
width: 900px;
_width: 910px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
background-color: transparent;
backgrund-repeat: repeat-y;
}

で　終了です
背景読み込み指定コードを
background-image: url(./img/cnt_bg.png);

以下に書き換え　記事背景を透明としました
background-color: transparent;

失敗例
display: none;にすると　記事内がすべて消えてしまいました

class指定を追加した際は　テンプレートの横幅指定と同じサイズに
書き換えてください
width: 900px;

トップページのみ背景画像を切り替える　1カラムデフォルト背景例
トップページのみ背景画像を切り替える　1カラム背景画像設定済み例
トップページのみ異なる背景でブログスタイルへカスタマイズ