Jugem カスタマイズ(背景)

質問

JUGEMでブログを開設しようと只今カスタマイズ中です。
しかしどうしても分からないところがあって質問しにきました

背景とは書いたものの全体の背景ではなく
記事・サイドバーの背景の色という意味です。
その背景に色をつけたいのですが、つけることが
できないのかなかなか分かりません^^;

テンプレートはhttp://nous.jugem.jp/?tid=50　これです。

よろしくお願いしますm(_ _)m

回答No.1

756co

テンプレートはアドレスではなく、
「テンプレートの名前」を書いた方がいいと思います。

CSS編集フォームでスタイルシートを編集します。

・サイドバーの背景色

CSS編集フォーム内にある、　back1 のクラス名を探します。

↓のように書かれているのですぐ見つかるはずです。

/*------------------------------------------------
　サイドバーの背景設定
　urlの次の()内にもこもこ背景のURLをいれてください。
　html側のtdのサイズに合わせた背景を用意してください。
　デフォルトだと横240pxです。
　もこもこ画像ではなく、線にしたい場合はbackgroundから始まる行を削除し
　border-left:1px solid #カラーコード;
　border-right:1px solid #カラーコード;
　という行を追加してください。
-----------------------------------------------*/

.back1 {
margin: 0px;
padding: 0px 0px 10px 0px;
background-image:url(http://nous.img.jugem.jp/20070909_334419.png);　　　←←←
background-repeat:repeat-y;　　←←←
background-position:center top;　　←←←
}

←←←で示した部分を消し、
background-color:#******; と背景色の指定を書き足します。

/*------------------------------------------------
　サイドバーの背景設定
　urlの次の()内にもこもこ背景のURLをいれてください。
　html側のtdのサイズに合わせた背景を用意してください。
　デフォルトだと横240pxです。
　もこもこ画像ではなく、線にしたい場合はbackgroundから始まる行を削除し
　border-left:1px solid #カラーコード;
　border-right:1px solid #カラーコード;
　という行を追加してください。
-----------------------------------------------*/

.back1 {
margin: 0px;
padding: 0px 0px 10px 0px;
backgounnd-color:#******;
}

#******　の部分は好きな色のコードを入力します。

・記事の背景色

CSS編集フォーム内、back2 のクラス名を探します。
back1と同様、説明書きがあるのですぐ見つかるでしょう。

/*------------------------------------------------
　記事部分の背景設定
　urlの次の()内にもこもこ背景のURLをいれてください。
　html側のtdのサイズに合わせた背景を用意してください。
　デフォルトだと横460pxです。
　もこもこ画像ではなく、線にしたい場合はbackgroundから始まる行を削除し
　border-left:1px solid #カラーコード;
　border-right:1px solid #カラーコード;
　という行を追加してください。
-----------------------------------------------*/

.back2 {
margin: 0px;
padding: 0px 0px 10px 0px;
background-image:url(http://nous.img.jugem.jp/20070909_334418.png);
background-repeat:repeat-y;
background-position:center top;
}

同じように、　backgroundの指定をすべて消して
背景色指定を書き足します。

/*------------------------------------------------
　記事部分の背景設定
　urlの次の()内にもこもこ背景のURLをいれてください。
　html側のtdのサイズに合わせた背景を用意してください。
　デフォルトだと横460pxです。
　もこもこ画像ではなく、線にしたい場合はbackgroundから始まる行を削除し
　border-left:1px solid #カラーコード;
　border-right:1px solid #カラーコード;
　という行を追加してください。
-----------------------------------------------*/

.back2 {
margin: 0px;
padding: 0px 0px 10px 0px;
background-color:#******;
}

どちらも、背景の画像を消すことになりますので
両端にある縦ラインは消えます。

どうしてもそれを残したい場合は
使っている画像に、透過処理や色をつけるなどの加工が必要になります。
その場合はテンプレート・素材の作成者・著作権保持者に許可を取る必要があるでしょう。

お礼

たいへんよく分かりました。
ありがとうございます！

URLを出してしまってすみません。
次回からは出しません。