やっと「ブログの説明エリア」に画像を貼りました。
CSSの編集は、2箇所だけです。
/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea{
max-width:980px;/* ←ブログの説明エリアの横幅制限 */
background-image:url(画像のurl);/* ←ブログの説明エリアに背景を敷きたいとき */
background-repeat:no-repeat; /* ←画像の繰り返し方法*/
}
今までの
background-color:#ddffdd;/* ←ブログの説明エリアに背景を敷きたいとき */
と置き換えただけです。
background-image と background-repeat は以前、
「背景(記事)」を一部だけ変える・・・CSS解説
で解説しましたが
一応、おさらいです。
repeat :縦横両方向に繰り返す(規定値)
repeat-x :横に繰り返す
repeat-y :縦に繰り返す
no-repeat :繰り返さない
コントローラーが半分になるので、今回の画像は繰り返さない指定にしました。
また、画像とは直接の関係はありませんが、
今までの「ブログの説明エリア」から、「タイトルと説明を囲うエリア」へ
枠線とスクロールを移動しました。
/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
max-height:90px;/* ←タイトルと説明を囲うエリアの高さ制限 */
overflow-x:scroll;/* ←タイトルと説明を囲うエリアに横のスクロール */
border-top:3px solid #cc9999;/* ←タイトルと説明を囲うエリアの上に枠線を付けたいとき */
border-left:thin dotted #cc9999;/* ←タイトルと説明を囲うエリアの左に枠線を付けたいとき */
border-right:medium double #cc9999;/* ←タイトルと説明を囲うエリアの右に枠線を付けたいとき */
border-bottom:thick dashed #cc9999;/* ←タイトルと説明を囲うエリアの下に枠線を付けたいとき */
}
スクロールバーが、画像の邪魔になるための移動です。
コメントの文句だけ変えました。
あっ!
/* */
で囲んだ部分がコメントだと説明していませんでした。
後で別な編集をするとき、消したり変えたりして問題ないか?
と悩まないために、出来るだけコメントを付けておきましょう。
最後まで閲覧していただいて、ありがとうございます。