TOP

1カラムデフォルト記事背景の場合..対処法

シリウスデフォルトテンプレートの記事背景カラーは、何もカスタマイズなど
加えていない状態であれば、ホワイト(FFF)白色台紙ですね。

 

この記事背景は、シリウス特有の構造でCSSでカラー指定しているでもない..
テンプレートフォルダの画像ファイルより、スタイルシートの呼び出し指定で
ここの位置に表示されているのです。

 

では、サイトコンテンツか何かしらの事情で記事の範囲ではなく、背景全体を
画像で現すという手法で、よく見られるカスタマイズですね。
(当サイトもしかりです)

 

ただし、当記事はトップページだけを特殊加工するという好まれる方だけ
利用する狭い範囲のお話しとご承知ください。

 


 

手順はは以下...

 

class指定で、管理画面に置いた画像ファイルを別読み込みすることに
なりますが、用意してからでも後追加でもOK...

 

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

 

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

 

 

すでに記事背景をオール画像としている場合とは異なりカテゴリー以下の
下層ではデフォルトの記事背景表示

 

トップページのみ記事背景を読み込まず..非表示として好みで選択した
背景画像を全体に表示する...

 

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

 

上記での例1ページでご案内している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カラムデフォルト背景例関連解説
一カラムのレスポンシブレイアウトはスマホ用のダブルページを追加
SIRIUS シリウスの一カラムの場合 PCレイアウト記事列はスマホでは 画面縮小に従い途中折れしますが ページ内にもう一つスマホ用構成のページを いれとけば対処可能です カスタマイズ詳細はサイトで....
エントリーページ一カラムをブログスタイルへカスタマイズ
SIRIUS シリウスのエントリーページを一カラムとして背景を他ページと異なるよう切り替えて見るとブログみたいなスタイルにカスタマイズできますね
トップページのみ異なる背景でブログスタイルへカスタマイズ
SIRIUS シリウスのデフォルトでは 背景画像はすべて同じ画像が表示されますが CSS指定により切り替えすることで異なる表示が可能です カスタマイズ詳細はサイトで....
トップページのみ背景画像を切り替える 1カラム背景画像設定済み例
SIRIUS シリウスサイトでサイトすべての背景を画像で設定済みとしている場合でトップページのみ背景画像を異なる指定で表示するカスタマイズ方法のご案内です。