プロフィール欄のボタンを カスタムしてみよう。［新デザイン対応］

ご訪問ありがとうございます。
ブログランキングの応援
をして頂けると励みになります。

ここをクリックしてくださいね。


　



今、いろんな部分のカスタムに挑戦中ですが、
今回は、プロフィール欄にあるボタンに注目してみました。



そのボタンとは、下記のような「読者になる」等の
ボタンのことです。



CSS編集用の新デザインでは、
最初は、次のようになっています。



このボタンを次のようにカスタムしてみたいと思います。



【１】通常時





【２】ボタンにマウスポインタをのせた時





上記のようにカスタムするためには、
次のCSSを追加する必要があります。

/* ■プロフィール欄のボタン■ */
.skinImgBtnS:focus span,.skinImgBtnS span{
background-image:url(http://stat100.ameba.jp/common_style/img/skin/cmn/icons/menu_icons/menu_icons_gray.png); /*マウスオーバー前*/
}
.skinImgBtnS:hover span {
background-image:url(http://stat100.ameba.jp/common_style/img/skin/cmn/icons/menu_icons/menu_icons_pastel.png) !important; /*マウスオーバー後*/
color:#6bb83e;
}

CSSの追加方法がわからない方は、
こちらの記事もご参考にしてくださいね。
↓↓↓
アメブロにスクロールバーを設置してみよう。［新デザイン対応］



これで、プロフィール蘭のボタンも
カスタマイズできましたね。

私のブログで確認してくださいね。
↓↓↓
kiyoのテスト用ブログ



なお、今回のカスタマイズは、
アメブロカスタマイズ辞典様の記事
「超簡単にボタンマウスオーバー！ 」
を参考にさせて戴きました。ありがとうございました。



今回は、以上です。



最後まで読んでいただき、
ありがとうございました。

ブログランキングの
応援クリックをお忘れの方は、
ここをクリックしてくださいね。


　

クリックして戴けると、
とても励みになります。