にほんブログ村や人気ブログランキングなどのランキングサイト。アメブロ記事中にリンクバナー（画像ボタン）を挿入している方もいますが、今回はそのボタンカスタマイズ。
イメージとしては以下のように、マウス重ねるとほんの少しだけ動くパターン。
ただ単に画像として貼っておくより、読者が触れた瞬間に動くので「あ、ボタンだな」と認識しやすく、あわよくばクリックしてもらえる可能性もあるかもしれません♪
HTMLタグをコピーする
ランキングサイトから該当のHTMLタグをコピー後、アメブロの編集画面に貼り付けます。この際「標準エディタ」及び「新投稿エディタ」をお使いの方は「HTMLタグを表示」タブをクリックしてから、貼り付けるようにください。
参考記事：「カスタマイズの基本！投稿エディタの種類と違いとは？」
<a href="http://www.blogmura.com/" ><img src="http://www.blogmura.com/img/www88_31.gif" width="88" height="31" border="0" alt="ブログランキング・にほんブログ村へ" /></a>HTMLタグを追加修正をする
HTMLタグを表示させた状態のまま、以下のようにソースの一部を追加修正します。
ピンク部分が追加箇所。今回は「class（クラス）」名を付けた「p」タグを利用します。
クラス名の名称は何でも構いません。わかりやすように「blogmura」としてみました。
<p class="blogmura"><a href="http://www.blogmura.com/" ><img src="http://www.blogmura.com/img/www88_31.gif" width="88" height="31" border="0" alt="ブログランキング・にほんブログ村へ" /></a></p>CSSファイルに追記をする
アメブロ管理画面からCSS編集場面に移動し、以下のソースを貼り付けます。画面左上の「クイックリンク」から「スキンCSS編集」をクリックすれば、すぐに移動できます。
参考記事：「意外と知らないアメブロの便利な機能クイックリンクで時間節約」
.blogmura {
margin: 0 auto;
text-align: center;
}
.blogmura a img {
margin: 0;
}
.blogmura a:hover img {
position: relative;
top: 1px;
}
.blogmura a:active img {
top: 2px;
}CSSファイルを保存後、記事を公開すればカスタマイズは終了です。なお、普通に記事を書く際は「HTMLタグを表示」タブから「タグの非表示」タブに切り替えてください。
また、定期的に挿入したい場合（記事の一番最後の部分など）は、ひな形が出来上がった過去記事からコピー＆ペーストして再利用するのが効率的だと思います。
以上、アメブロカスタマイズ＆ホームページ制作*Mydesignの*Copyselfでした。
アメブロカスタマイズ料金プラン＆過去の制作実績はコチラからご覧いただけます。