ご質問をいただいていて、そういえば書いていなかったな・・・と記事にすることにしました。

例えば、クールなイメージのブログに、ちょっとラブリーなボタンは・・・
と、思われていらっしゃる方には、ブログテイストに合わせて変更してみるのも良いですね






カスタマイズ方法

今回は一番簡単な、１枚画像でマウスオーバー時に画像が変化しない方法をお伝えします。
下記コードをCSSに書き加えましょう。

CSS編集方法が分からない方はこちら

自作の画像をつくる場合は、アメブロ標準の画像（254×114px）に被せる必要があるので、それよりも大きいものをつくりましょう。

【1枚画像でマウスオーバー時の変化なし】

/*■アメンバー記事■*/
.amemberEntryBtn img{
visibility:hidden;
}
.amemberEntryBtn a{
width:300px; /* 画像の横幅 */
height:130px; /* 画像の高さ */
background-repeat:no-repeat;
display: block;
overflow:hidden;
outline:none;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.amemberEntryBtn a.btn000,
.amemberEntryBtn a.btn001,
.amemberEntryBtn a.btn002,
.amemberEntryBtn a.btn003,
.amemberEntryBtn a.btn004,
.amemberEntryBtn a.btn005,
.amemberEntryBtn a.btn006,
.amemberEntryBtn a.btn007,
.amemberEntryBtn a.btn008,
.amemberEntryBtn a.btn009{
background-image: url(画像のアドレス);
}