シリウステンプレート作成カスタマイズ

 

 

ここでの解説は　シリウスデフォルトカラーテンプレートのカラースタイルを
変更するものです

 

オリジナルもきれいですね

 

しかし　オリジナリティな自分スタイルのカラーにしたい方に
おすすめの手法です

 

 

シリウスカラーテンプレート作成をする前に　ご注意ごと　準備するもの
がございます

 

作成の途中途中で説明を入れますと　理解しずらくなるので
ここでご確認ください

 

 

作成と言っても　新たに作るのでは無く　今あるテンプレートを

 

基礎として　もう一つのテンプレートフォルダを作り改編　改造するものです

 

別フォルダに新た名な　テンプレートフォルダとして追加　保存することで
以降再利用も　デフオルト同様行えます

 

 

今回はデフォルトテンプレート3カラムでの説明になりますが
2カラム　1カラムでも応用はできます

 

 

テンプレートのカラーは　スタイルシートで設定するのではなく
表示されるカラー画像の変更とご理解ください

---

 

単体カラー？

 

単体のカラーでカラー変更しますが　場所により複数の色分けも可能です

 

問題なのが　グローバルメニューなんです

 

デフォルトでは　上下の明暗がありますね

ここを単体で表示すると　カラーによりけりですが　なんか　いまいちと
感じられるかもしれません

 

多少なりとも変化を見せたいなら　画像ソフトで作るか

 

余りお勧めしませんが　どこかのサイトのナイスなグローバルメニューの
一部画像を参考に作ればよいかも　
これぐらいのサイズがあればOK　　　

 

---

 

 

準備するもの

 

今回のカラーは　紫を使います
このぐらいの画像を作りパソコンに保存しときましょう

 

カラー画像を　何処から用意すれば　という方は　サイトデザインから
背景画像を設定して表示させ切り取り保存もできます
また　当サイトで案内している無料画像ソフトで作成することもできます

 

 

 

---

 

ここ大事　フッター　スタイルシートの一行改編

 

フッター画像についてはなぜか？　面倒がございます

 

サイト下部のフッター部分なのですが　ただ単に画像ファイルを変更しても　
ザラメ画像になってしますのです

 

 

原因は　フッターに限り画像がgfi画像ファイルになっているのですね

 

スタイルシートでの指定は　gif指定
background-image: url(./img/footer.gif);
シリウステンプレートにあるfooterファイルの画像をそのまま変更しても
ザラメ画像となるのです

 

gifの指定をするとザラメ画像

 

シリウス運営もとで設定しているデフォルトはなぜかザラメになりませんし
なぜ　ここだけ違うのかも疑問ですが？

 

 

そこで
PNGファイルを指定表示するよう　変えます

 

変更箇所は　スタイルシートで指定している gif　をpngに変えてください

 

/* フッター */

 

#footer {
text-align: center;
color: #FFFFFF;
line-height: 64px;
height: 64px;
background-image: url(./img/footer.gif);
background-repeat: repeat-x;
background-position: left top;
}

 

#footer a{
color: #FFFFFF;
text-decoration: none;
}

 

#footermenu{
text-align:center;
padding:6px;
}

 

 

 

改行例
background-image: url(./img/footer.png);

 

 

 

また　カラー変更後の画像ファイルをpngファイルとして呼び出しのため
名称変更をしなければリなません
ステップ２で解説追記しております

 

---

 

フッター追加情報　もう一つのカラー変更方法

 

 

フッターについては　上手く反映されないという質問が稀にございます

 

ここは多少面倒かなとは思っていたのですが......

 

 

画像を編集しなくても

 

スタイルシートでカラーを指定すれば　即変更が可能です

 

 

問題は 　画像編集ができないので　画像上部のわずかな
ラインが表示できないこと

 

画像参照

ライン表示だけ気にしなければ即反映されます

 

スタイルシートでのラインを指定表示にするための詳細は　後日
追記いたしますのでお待ちください

 

 

スタイルシートでのカラー変更手順は
background-image: url(./img/footer.gif);の記述から

 

image: url(./img/footer.gif)を削除して好みのカラーコードに書き換えます

 

 

例　　　以下
background-color: #FFFFFF;

 

画像の呼び出し記述が変わることで
画像の呼び出しは指定されず　
記載したカラーコードが表示される事になるのです

 

書き換え後　保存選択をすればプレビューで変更は確認できます

 

スタイルシートでの位置をお確かめください
一行のみ

 

/* フッター */

 

#footer {
text-align: center;
color: #FFFFFF;
line-height: 64px;
height: 64px;
background-image: url(./img/footer.gif);ここです
background-repeat: repeat-x;
background-position: left top;
}

 

#footer a{
color: #FFFFFF;
text-decoration: none;
}

 

---

 

スポンサーリンク

 

 

カラーテンプレート作成手順を詳細に解説しております
テンプレートフォルダ選択　ステップ1
ファイル画像カラー変更手順　　ステップ２
シリウスカスタマイズ