プロフィール（ブログ）のボタンの調整

★　プロフィール（ブログ）のボタンの調整

２０１３年６月３０日
プレゼントの廃止により、プレゼントを贈るは、ピグともになるに変わりました。
尚、場所の名前であるセレクタ名はプレゼントを贈るのままです。



●　用意した画像（横 128px 縦 28px）

　①　文字なしボタン








　②　文字ありボタン①









　③　文字ありボタン②・・・ロールオーバー用







作成に利用したサイト
http://box.aflat.com/buttonmaker/



●　プロフィールのボタンを全部一括変更（文字なしボタンの場合）

①　ボタンを全部一括変更（文字なしボタンの場合）

/* ------------------------------------------------------- */
/* プロフィールのボタンを全部一括変更　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .skinImgBtnS{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
width:128px;/* 画像の横幅 */
height:28px;/* 画像の縦 */
}

②　ロールオーバー

/* ------------------------------------------------------- */
/* プロフィールのボタンを全部一括変更（ロールオーバー）　　*/
/* ------------------------------------------------------- */
.profileBtnArea .skinImgBtnS:hover{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
width:128px;/* 画像の横幅 */
height:28px;/* 画像の縦 */
}

●　プロフィールのボタンを個別に変更（文字なしボタンの場合）

①　ボタンを個別に変更（文字なしボタンの場合）

/* ------------------------------------------------------- */
/* プロフィールのボタン（読者になる）　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .readerBtn{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
width:128px;/* 画像の横幅 */
height:28px;/* 画像の縦 */
}
/* ------------------------------------------------------- */
/* プロフィールのボタン（アメンバーになる）　　　　　　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .amemberBtn{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
width:128px;/* 画像の横幅 */
height:28px;/* 画像の縦 */
}
/* ------------------------------------------------------- */
/* プロフィールのボタン（メッセージを送る）　　　　　　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .messageBtn{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
width:128px;/* 画像の横幅 */
height:28px;/* 画像の縦 */
}
/* ------------------------------------------------------- */
/* プロフィールのボタン（ワンポイント画像を消す）　　　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .presentBtn{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
width:128px;/* 画像の横幅 */
height:28px;/* 画像の縦 */
}

②　ロールオーバー

/* ------------------------------------------------------- */
/* プロフィールのボタン（読者になる）（ロール）　　　　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .readerBtn:hover{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
width:128px;/* 画像の横幅 */
height:28px;/* 画像の縦 */
}
/* ------------------------------------------------------- */
/* プロフィールのボタン（アメンバーになる）（ロール）　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .amemberBtn:hover{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
width:128px;/* 画像の横幅 */
height:28px;/* 画像の縦 */
}
/* ------------------------------------------------------- */
/* プロフィールのボタン（メッセージを送る）（ロール）　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .messageBtn:hover{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
width:128px;/* 画像の横幅 */
height:28px;/* 画像の縦 */
}
/* ------------------------------------------------------- */
/* プロフィールのボタン（ワンポイント画像を消す）（ロール）*/
/* ------------------------------------------------------- */
.profileBtnArea .presentBtn:hover{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
width:128px;/* 画像の横幅 */
height:28px;/* 画像の縦 */
}

●　プロフィールのボタンを個別に変更（文字ありボタンの場合）

①　ボタンを個別に変更（文字ありボタンの場合）

/* ------------------------------------------------------- */
/* プロフィールのボタン（読者になる）　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .readerBtn{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
width:128px;/* 画像の横幅 */
height:28px;/* 画像の縦 */
text-indent:-600px;
}
/* ------------------------------------------------------- */
/* プロフィールのボタン（アメンバーになる）　　　　　　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .amemberBtn{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
width:128px;/* 画像の横幅 */
height:28px;/* 画像の縦 */
text-indent:-600px;
}
/* ------------------------------------------------------- */
/* プロフィールのボタン（メッセージを送る）　　　　　　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .messageBtn{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
width:128px;/* 画像の横幅 */
height:28px;/* 画像の縦 */
text-indent:-600px;
}
/* ------------------------------------------------------- */
/* プロフィールのボタン（ワンポイント画像を消す）　　　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .presentBtn{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
width:128px;/* 画像の横幅 */
height:28px;/* 画像の縦 */
text-indent:-600px;
}

②　ロールオーバー！

/* ------------------------------------------------------- */
/* プロフィールのボタン（読者になる）　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .readerBtn:hover{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
}
/* ------------------------------------------------------- */
/* プロフィールのボタン（アメンバーになる）　　　　　　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .amemberBtn:hover{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
}
/* ------------------------------------------------------- */
/* プロフィールのボタン（メッセージを送る）　　　　　　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .messageBtn:hover{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
}
/* ------------------------------------------------------- */
/* プロフィールのボタン（ワンポイント画像を消す）　　　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .presentBtn:hover{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
}

●　プロフィールのボタン（ワンポイント画像）

①　ワンポイント画像を消す

/* ------------------------------------------------------- */
/* プロフィールのボタン（ワンポイント画像を消す）　　　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .skinImgBtnS:hover span,
.profileBtnArea .skinImgBtnS:focus span,
.profileBtnArea .skinImgBtnS span {
background-image:none;
padding:0
}

②　ワンポイント画像を変更

　・使用画像

/* ------------------------------------------------------- */
/* プロフィールのボタン（ワンポイント画像を変更）　　　　　*/
/* ------------------------------------------------------- */
.profileBtnArea .skinImgBtnS:hover span,
.profileBtnArea .skinImgBtnS:focus span,
.profileBtnArea .skinImgBtnS span {
background-image:url(画像のＵＲＬ);;
background-repeat:no-repeat;
background-position:left center;
width:100px;
}