ICT

メッセージボードの背景に画像を設置する

ブログを続ける理由の一つに、webの利活用を考察していくことがある。発展途上のテクノロジーには興味があり、まだまだネットの世界は未完の状態。

ブログにも種類が多数あり、今続けているのが、googleのbloggerとアメブロに絞られてきた。

カスタマイズの幅が狭いアメブロで、出来ることを見つけていくのも面白いが、ブログのテンプレートをカスタマイズしていくなか、アメブロにはメッセージボードが特徴になっており、この活用の如何によってユーザーにとっての親和度は大きく違っていく。。。。

今日は、シンプルなメッセージボードの背景に画像を使ってみよう。。。。

完成のイメージは目次ページを作っていこうとしているのだ

こちらにも動画で紹介してあります。

まずは画像をメインの幅（小生は480px）に合わせて、メッセージボードを作ってみる

これは以下の3つの画像によって出来ている

上部画像　　

中部(繰り返し画像）画像　　

下部画像　　

CSSの最後に以下のようにコピペする

/* ■メッセージボードのカスタマイズ■ */#message{ width:480px; margin-bottom:0px; padding-bottom:45px;　/* ■中部画像とぴったりくっつくように下部画像の縦サイズと同じにする■ */ background:url(http://stat.ameba.jp/user_images/20111127/12/下部画像.png) no-repeat left bottom;}#message .contents{ width:480px; padding:45px 0 0 0;　/* ■中部画像とぴったりくっつくように上部画像の縦サイズと同じにする■ */ background:url(http://stat.ameba.jp/user_images/20111127/12/上部画像.png) no-repeat;border:none;}#message .subContents{ padding:0px 30px 0px 30px;　/* ■テキスト文字が自分のデザインの邪魔にならない範囲に調整してみましょう■ */ background:url(http://stat.ameba.jp/user_images/20111127/12/中部画像.png);color:#000000;}

参考にしたのはこちらの記事 です