読者になるボタンの変更(このブログの読者)

★ 読者になるボタンの変更(このブログの読者)




◆　読者になるボタンの変更（画像）このブログの読者


①　画像に変更
(画像幅によっては調整 の部分は右サイドバーの場合は調整してください。）

/* ------------------------------------------------------- */
/* 読者になるボタンの変更（画像）　このブログの読者　　　　*/
/* ------------------------------------------------------- */
.readerRequestBtnArea .skinImgBtnS{
background-repeat : no-repeat ;
background-image : url(画像のＵＲＬ) ;
width: 140px; /* 横幅px */
height:28px; /* 縦幅px */
text-indent:-100px;/* 画像幅によっては調整 */
}

◆　読者になるボタンの変更（画像）ロールオーバー


①　画像ロールオーバー

/* ------------------------------------------------------- */
/* 読者になるボタンの変更（ロール画像）　このブログの読者　*/
/* ------------------------------------------------------- */
.readerRequestBtnArea .skinImgBtnS:hover{
background-image:url(画像のＵＲＬ);
background-repeat : no-repeat;
}

◆　アイコンをいれる

①　アメブロが用意したアイコンを入れる

/* ------------------------------------------------------- */
/* 読者になるボタンの変更（アイコン）　　このブログの読者　*/
/* ------------------------------------------------------- */
.readerRequestBtnArea .skinImgBtnS span{
background-image:url(http://stat100.ameba.jp/common_style/img/skin/cmn/icons/menu_icons/menu_icons_pastel.png);
background-position:left 5px;
}

●　アイコンは、　background-position:left 5px;　の　5px 部分を調整
　　　（画像によって微調整が必要）

・読者になる
background-position: 0 5px;
・アメンバーになる
background-position: 0 -93px;
・メッセージを送る
background-position: 0 -192px;
・プレゼントアイコン
background-position:left -295px;



●　ＣＳＳ編集用デザインのスキンの　【読者になる】　の部分は文字になっています。
　　画像は下記が使われています






・　画像に文字を入れない画像を使って行う場合は、下記の様になります
　（ text-indent:-100px;　を消す）

/* ------------------------------------------------------- */
/* 読者になるボタンの変更（画像）　このブログの読者　　　　*/
/* ------------------------------------------------------- */
.readerRequestBtnArea .skinImgBtnS{
background-repeat : no-repeat ;
background-image : url(画像のＵＲＬ) ;
width: 140px; /* 横幅px */
height:28px; /* 縦幅px */
}

◆　例（当ブログ）


①　画像（横　140px 縦　28px）




②　ロールオーバー画像（横　140px 縦　28px）





③　アメブロアイコン（下記は、１つの画像です）