ブロプー Blog

こんにちは！さいとうです
最近はあちこちでクリスマスの飾りつけがされてますね！
まだ見に行ってませんが、会社の近くのミッドタウンや六本木ヒルズでもクリスマスイルミネーションが始まっているそうです
気づけばもう２００８年もあと1ヶ月半で終わりです
この間秋が来たと思ったのに、月日が経つのは本当に早いものです

さて今回は、アメーバブログの「読者になる」「ブログを作る」ボタンを変更する方法です。

「第７回　アメブロ用テンプレートについて」で少し触れた「読者になる」「ブログを作る」ボタン。「このボタンはCSSで他の画像に差し替えることもできるのですが、CSS初心者には難しいかもしれません」と第７回で書きました
今回はこのボタン画像の変更方法について書いていきます

CSSしか編集ができないアメブロ。CSSだけでどうやってこのボタン画像を変更するかわかりますか？？
画像を変更させる手順は
<img>で表示されている画像を隠して
表示させたい画像をCSSを使って表示させる
だけです
こうやって聞くと簡単そうに思えるかも知れませんが、CSS初心者にはちょっと難しいかもしれませんでは「読者になる」ボタンを例にして解説していきましょう

表示されている画像を隠す

<div id="readerList">内の<img alt="読者になる" src="～～～btn_reader.gif"/>この<img>のCSSにdisplay:none;を追加します。

#readerList dt img { display: none; }

こんな感じです。
すると右の図のようになるはずです
「読者になる」ボタン画像が消えましたね！！

ボタン画像を表示させる

デフォルトの画像が消えたら、表示させたいボタン画像を表示させましょう

今度は<div id="readerList">内の<a>タグのCSSを編集します。

#readerList dt a:link {
background-image:url(http://~~~~/btn_reader.jpg);
}

#readerList dt a {
display: block;
width: 152px;
height: 30px;
}
こんな感じです。すると右の図のようになるはずです見事、ボタンを変更することができました
widthとheightに関しては、表示させたい画像の大きさに合わせて数値を変えてくださいね！

「読者になる」ボタンの変更方法はお分かりいただけたでしょうか？同じような感じで「ブログを作る」ボタンも変更することができます。ぜひチャレンジしてみてください

次回はオリジナルのブログ用画像を作ろう！です。更新は１１月２５日（火）の予定です。お楽しみに

ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料で使えますょ