9.ファンブログのカスタマイズ（ボタン編）：ブリカマ日記

9.ファンブログのカスタマイズ（ボタン編）

第９回の「ファンブログ」の「カスタマイズ」
今回はボタンの作成です。

ファンブログのカスタマイズ（目次）

私のプロフィールを見ていただければわかると思いますが、
ボタンになっていると思います。
※7/2現在ボタンは事情により削除しました･･･すいません

マウスポインタをボタンの上に持ってくると
変化があるボタンを作る方法です。

画像の準備

まずは画像を用意しなければなりません。

このように２つの画像を用意してください。

これは通常の状態と、マウスを合わせた状態の
２つの画像ですね。

これ以外にも方法はありますが、今回は私が
この方法なので２つの画像で行います。

CSSの記述

このボタン画像の切り替えはCSSで行われています。

以下のように記述します。

.c_pro a{
height: 21px;
width: 100px;
margin-top:3px;
background:url(https://fanblogs.jp/burikama/file/332/gtWC64LaJOk.jpg) no-repeat;
}
.c_pro a:hover{
background:url(https://fanblogs.jp/burikama/file/332/gtWC64Lab24Cfw.jpg) no-repeat;
}

これでCSSはＯＫです。

しかしこれは１つのボタン分なので、ボタンの数だけ
用意しなければなりません。

「.c_pro」となっている部分がありますが、
以前やったタグの「class」名ですね。

これは他のとダブらなければ問題ないので
好きなように定義していってください。

ＣＳＳの説明です。

「height: 21px;」・「width: 100px;」
これはもうお分かりですよね？
そうです。高さと幅ですね。

「margin-top:3px;」
さてこれは？言葉のままですね。
上の隙間です。この指定では３ｐｘあけてね！という意味です。

「no-repeat;」
これは画像を繰り返し置かないという意味です。
これをとってしまうと、サイズ指定されてない場合は
どんどん画像がつながっていきます(-_-;)

最後に、、、
「a:hover」
これはいったい？！
この「hover」がついている場合はマウスポインタが
このリンク（＜a＞タグ）に来たときにこの指定した
物にしてくださいよ！というものです。

ですから通常は上のＣＳＳ、マウスポインタが来たときは
下のＣＳＳの画像に変わるというわけです。

ＨＴＭＬの記述

今度はこれに対応したＨＴＭＬを記述します。

＜div class="c_pro" align="center＞
＜a href="https://fanblogs.jp/burikama/profile"＞＜/a＞
＜/div＞

ＣＳＳで指定した「c_pro」が＜div＞タグに指定されています。
その中にある＜a＞タグに上記CSSが適用されるわけです。

ここには＜img＞タグがないのがお分かりでしょうか？
CSSで＜a＞タグのところはこれだ！と「background:url・・・」で
指定されているので画像が表示されるんですね(^^♪