2011年01月19日

【第38回】コメント欄に背景画像を設定する

そういえば、このブログではまだ、背景画像について触れていませんでした。

良い機会なので、コメント欄に背景画像を表示させてみたいと思います。

第36回で解説したように、Seesaaブログのコメント欄はご覧のような構成になっています。

SD_036_02.jpg

今回は、この中の@#commentsに、以下のような背景画像を表示させてみます。

marble02.jpg


★コメント欄に背景画像を表示させる方法★

#commentsbackground-imageプロパティを追加し、背景画像を表示する。
さらにbackground-repeatプロパティを設定し、背景画像を繰り返し表示されるようにする。

▼▼▼ 変更前 ▼▼▼
#comments {
padding:10px 0px 10px 10px;
margin-top:25px;
background:#fff;
}

▼▼▼ 変更後 ▼▼▼
#comments {
padding:10px 0px 10px 10px;
margin-top:25px;
background:#fff;
background-image:url(http://seesaa-blog-design.up.seesaa.net/image/marble02.jpg);
background-repeat:repeat;

}

これで、コメント欄全体に背景画像が表示されます。

▼▼▼ 変更前 ▼▼▼
SD_036_01.jpg

▼▼▼ 変更後 ▼▼▼
SD_038_01.jpg

いかがでしょう。

今回はコメント欄に背景画像を設定してみましたが、backgroundプロパティを使えば他の箇所にも背景画像を表示することができます。

お試しください。

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

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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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