読者登録のボタンを自分で作ってみる~CSS編~
カスタマイズ初心者です。
#sub_main .readerMainLink{
width:318px;/*画像の幅*/
height:168px;/*画像の高さ*/
}
.readerMainLink p a {
display: block;
font-size:12px;
width:318px;/*画像の幅*/
height:168px;/*画像の高さ*/
background: url(通常時の画像URL) no-repeat;
text-indent:-9999px;
}
.readerMainLink p a:hover {
display: block;
font-size:12px;
width:318px;/*画像の幅*/
height:168px;/*画像の高さ*/
background: url(マウスオーバー時の画像URL) no-repeat;
text-indent:-9999px;
}
あちこち色々調べながら、少しずつカスタマイズしていってます。
同じように興味のある方の少しでも参考になればと思いまとめておきます。
ふたつの画像が用意出来たら
画像フォルダにアップして
それぞれのURLをメモしておきます。
そして、下記のタグを
CSSの一番下に追加すればOKです。
☆⌒Y⌒Y⌒Y⌒Y⌒Y⌒Y⌒Y⌒Y⌒Y⌒☆
/*読者登録ボタンを変更するCSS*/
#sub_main .readerMainLink{
width:318px;/*画像の幅*/
height:168px;/*画像の高さ*/
}
.readerMainLink p a {
display: block;
font-size:12px;
width:318px;/*画像の幅*/
height:168px;/*画像の高さ*/
background: url(通常時の画像URL) no-repeat;
text-indent:-9999px;
}
.readerMainLink p a:hover {
display: block;
font-size:12px;
width:318px;/*画像の幅*/
height:168px;/*画像の高さ*/
background: url(マウスオーバー時の画像URL) no-repeat;
text-indent:-9999px;
}
☆⌒Y⌒Y⌒Y⌒Y⌒Y⌒Y⌒Y⌒Y⌒Y⌒☆
赤字の部分は、自分で作った画像のサイズを入れます。
これで本当に完成です~☆
説明するのって難しいですね。(汗)
分かりづらい説明を最後まで読んでくれた方。
ありがとうございました♡
こちらとか参考にさせてもらってます♥