CSS プロフィール・ブログの読者のボタン

2011.9.12アメブロの変更によりCSS変更します
文字色に!importantをつけないと変わらなくなりました


※サイドバーの横幅が狭い方にプロフィールがある場合は縦に並びます

下で見本を見てベース画像のＵＲＬをコピーしておきます
あるいは自分で作ったベース画像やココで持ち帰った画像のＵＲＬを調べておきます

ベース画像に合ったアイコン画像のＵＲＬをコピーしておきます
あるいはここから持ち帰ったアイコン画像を画像フォルダにアップしてアイコン画像のＵＲＬを調べておきます

それらのＵＲＬを赤字部分に入れてそれにあわせて文字色のを変更してから
ＣＳＳの一番最後に貼ります

ロールオーバーしない場合は・・・

/*プロフィール・ブログの読者のボタン*/
.skinImgBtnS{/*ベース画像*/
background-image:url(ベース画像のＵＲＬ);
}
.skinImgBtnS:hover span,.skinImgBtnS:focus span,.skinImgBtnS span{
background-image:url(アイコン画像のＵＲＬ);/*アイコン画像*/
color:#333333 !important;/* ボタンの文字色 */
}

もし・・ロールオーバーさせたいのでしたら（マウスがのったときに画像や文字色を変える）

/*プロフィール・ブログの読者のボタン*/
.skinImgBtnS{/*ベース画像*/
background-image:url(ベース画像のＵＲＬ);
}
.skinImgBtnS:focus span,.skinImgBtnS span{
background-image:url(アイコン画像のＵＲＬ);/*アイコン画像*/
color:#333333 !important;/* ボタンの文字色 */
}

.skinImgBtnS:hover{/*マウスオーバー時のベース*/
background-image:url(ベース画像のＵＲＬ);
}
.skinImgBtnS:hover span {/*マウスオーバー時*/
background-image:url(アイコン画像のＵＲＬ);/*アイコン画像*/
color:#ff00ff !important;/* ボタンの文字色 */
}

ボタンのベース画像
　↓アメブロで使っている画像ですからそのままＵＲＬを使います

　　http://stat100.ameba.jp/p_skin/wu_pf_cssedit/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_designnote/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_sky/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_tech/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_urbanstyle/img/skin_btn_s.jpg

　　http://stat100.ameba.jp/p_skin/wu_pf_017tricolore/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_womanblog_13/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_womanblog_18/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_womanblog_19/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_womanblog_41/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_womanblog_49/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_womanblog_50/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_womanblog_52/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_womanblog_55/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_girlsblog_34/img/skin_btn_s.gif

　　http://stat100.ameba.jp/p_skin/wu_girlsblog_05/img/skin_btn_s.gif

　　http://stat100.ameba.jp/p_skin/wu_girlsblog_07/img/skin_btn_s.gif

　　http://stat100.ameba.jp/p_skin/wu_girlsblog_33/img/skin_btn_s.gif

　　http://stat100.ameba.jp/p_skin/wu_pf_madobecat/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_report/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_003earthstripe/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_005circlefabric/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_flower_print/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_ggusr_05/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_goldfish/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_wall/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_starrysky/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_colorfu/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_psychedelic/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_zukeigakufu/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_hanabi/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_cats/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_bahama/img/skin_btn_s.png

　　http://stat100.ameba.jp/p_skin/wu_pf_lovelypink/img/skin_btn_s.png

自分で画像を作る場合は　128px × 28px のサイズで作ります（お持ち帰り自由）


　

　　

　















アイコン画像


↓アメブロで使っている画像ですからそのままＵＲＬを使います

(パステル）
http://stat.ameba.jp/common_style/img/skin/cmn/icons/menu_icons/menu_icons_pastel.png

(グレー）
http://stat.ameba.jp/common_style/img/skin/cmn/icons/menu_icons/menu_icons_gray.png

(黒）
http://stat.ameba.jp/common_style/img/skin/cmn/icons/menu_icons/menu_icons_black.png

(白）
http://stat.ameba.jp/common_style/img/skin/cmn/icons/menu_icons/menu_icons_white.png

あるいは↓こちらをダウンロードして自分の画像フォルダにアップして使います
（お持ち帰り自由）なぜか？無駄に縦に長い画像です？