2011年01月22日

【第41回】背景画像を変更する

今回は、ブログの背景画像を設定してみましょう。

Seesaaブログのテンプレートこねこ(左サイドバー)は、背景画像が設定されておらず、背景色が白(#FFF)に設定されています。

今回はこの背景に、下の大きな画像を一つ設定してみます。

SD_041_header.jpg

さて、今回編集するのは、ブログ全体の背景。
そこで、ブログ全体を定義するクラスに背景プロパティを追記していくことになります。

第22回の記事でもご紹介したように、Seesaaブログでブログ全体を定義しているのは#containerです。

ここに、背景画像を定義するbackground系のプロパティを追記していきましょう。

★ブログに背景画像を設定する方法★

#containerの中に、background系のプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
#container{
width:840px;
text-align:left;
margin:0 auto;
background-color:#fff;
}
▼▼▼ 変更後 ▼▼▼
#container{
width:840px;
text-align:left;
margin:0 auto;
background-color:#fff;
background-image:url("http://seesaa-blog-design.up.seesaa.net/image/SD_041_header.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center top;

}

今回はこのように、4つのプロパティを追記してみました。

background-imageは、背景に表示する画像を設定するプロパティです。
url()の中に、表示する画像のURLを記載します。
自分で用意した画像のアップロードとURLの取得方法については、第24回を参照してください。

background-repeatは、背景画像の繰り返しを定義するプロパティです。
今回は値をno-repeatとし、背景画像を繰り返さない設定にしました。
なお、背景画像を繰り返し表示する例については、コメント欄の背景画像を設定した第38回を参照してください。

background-attachmentは、ブラウザ上での背景画像表示位置の固定/非固定を定義します。
今回はfixedとしており、ブラウザ上で画面をスクロールしても、背景画像はスクロールされない設定としています。

最後のbackground-positionは、背景画像の表示位置(水平方向、垂直方向)を定義するプロパティです。
今回は、水平方向はcenterすなわち中央寄せ、垂直方向はtopで上寄せにしています。

このようにCSSを変更すると、このブログのデザインはご覧のようになります。

▼▼▼ 変更前 ▼▼▼
SD_039_04.jpg

▼▼▼ 変更後 ▼▼▼
SD_041_01.jpg

おっと、タイトル画像があるので、背景画像が良く見えませんね。

そこで、タイトル画像をなくしてみましょう。
タイトル画像のクラスやプロパティなどは、第39回をご覧下さい。

▼▼▼ 変更後 ▼▼▼
SD_041_02.jpg

タイトル画像を消すと、ご覧のように背景画像が良く見えるようになりました。

ちなみにこの画像は、上記でbackground-attachmentプロパティで設定した通り、画面をスクロールさせても同じ位置に表示され続けます。

SD_041_03.jpg

おっと、記事本文の背景が白(#FFF)で定義されているので、背景画像が表示されません。

そこで、ここでは、記事本文を表す.blogクラスの背景色プロパティbackground-color:#fff;を削除してみました。
記事本文を表す.blogクラスについては、第5回で枠線を追加する際に一度説明しています。

SD_041_04.jpg

これで、記事本文の背景にも、画像が表示されるようになりました。

背景画像は、表示位置や繰り返し設定などによって、ブログの表情が変わってきます。
今回の解説はあくまでも一例ですので、background系のプロパティを上手く操作して、自分の気に入った背景を設定してみて下さい。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。