コメント投稿ボタンの画像を変更する方法

アメブロカスタマイズで自分らしい空間を作る技 コメント投稿ボタンの画像を変更する方法

アメブロカスタマイズのわざめーばです。

こんにちは。

今回は、アメブロのカスタマイズ向け『CSS編集用デザイン』のコメント投稿ボタンの画像を変更する方法をご紹介します。

CSSで簡単に変更できますので、よかったらやってみてください。

画像を用意する

今回は、次の画像を使用してみます。

コメント投稿ボタン comment_ww

通常時は、この画像の上半分がコメント投稿ボタンとして表示され、オンマウス時(マウスカーソルがボタンの上に乗った時)に画像の下半分が表示されるように設定します。

CSSを編集する

CSSの編集で、以下のようなコードをあなたのアメブロのユーザーCSSの最後に追加して下さい。

.commentBtn{
  text-indent:-9999px;
  border:none;
  background-position:left top;
  background-image:url(https://stat.ameba.jp/user_images/20110811/21/sozai-land/06/6b/p/o0300010011410406620.png);
  width:300px;
  height:50px;
}
.commentBtn:hover{
  background-position:left bottom;
}

赤文字部は、コメント投稿ボタンとして使用する画像のURLを設定します。

緑文字部にはボタンの横幅、橙文字部にはボタンの高さをピクセル数で設定してください。

グレーで書いた部分は、オンマウス時に画像の下半分が表示されるように設定する記述です。

もし、オンマウス時のボタン表示の切替が不要な場合は、この部分はユーザーCSSに記述しないでください。

また、今回の方法とはちがう、「オンマウス時に別の画像を表示する」ように設定するには、この部分を次のように書き換えて下さい。

.commentBtn:hover{
  background-image:url(別の画像のURL);
}

これで、コメント投稿ボタンの画像を変更する方法の説明はおわりです。

簡単ですので、ぜひチャレンジしてみてくださいね。

画像素材

今回使用したコメント投稿ボタン画像は、この記事のために作成したものですが、他にも色違いをたくさん作りましたので、もし使えそうなのがあったらご利用下さい。

なお、画像は、アメブロ内でしたらそのまま直で使えると思いますが、削除等を懸念される場合は持ち帰ってご自分のアメブロの画像フォルダにアップロードするなどしてからご利用下さい。

コメント投稿ボタン comment_ww

https://stat.ameba.jp/user_images/20110811/21/sozai-land/06/6b/p/o0300010011410406620.png

コメント投稿ボタン comment_wy

https://stat.ameba.jp/user_images/20110811/21/sozai-land/9b/d1/p/o0300010011410406624.png

コメント投稿ボタン comment_wv

https://stat.ameba.jp/user_images/20110811/21/sozai-land/e0/ca/p/o0300010011410406618.png

コメント投稿ボタン comment_wr

https://stat.ameba.jp/user_images/20110811/21/sozai-land/22/dc/p/o0300010011410406619.png

コメント投稿ボタン comment_wp

https://stat.ameba.jp/user_images/20110811/21/sozai-land/f6/4a/p/o0300010011410405268.png

コメント投稿ボタン comment_wo

https://stat.ameba.jp/user_images/20110811/21/sozai-land/7b/18/p/o0300010011410405165.png

コメント投稿ボタン comment_wg

https://stat.ameba.jp/user_images/20110811/21/sozai-land/d3/29/p/o0300010011410405187.png

コメント投稿ボタン comment_wc

https://stat.ameba.jp/user_images/20110811/21/sozai-land/a9/ab/p/o0300010011410405256.png

コメント投稿ボタン comment_wb

https://stat.ameba.jp/user_images/20110811/21/sozai-land/c0/55/p/o0300010011410405164.png

コメント投稿ボタン comment_bw

https://stat.ameba.jp/user_images/20110811/21/sozai-land/7b/5a/p/o0300010011410403287.png

コメント投稿ボタン comment_by

https://stat.ameba.jp/user_images/20110811/21/sozai-land/ae/35/p/o0300010011410403352.png

コメント投稿ボタン comment_bv

https://stat.ameba.jp/user_images/20110811/21/sozai-land/38/3d/p/o0300010011410403288.png

コメント投稿ボタン comment_br

https://stat.ameba.jp/user_images/20110811/21/sozai-land/87/92/p/o0300010011410403346.png

コメント投稿ボタン comment_bp

https://stat.ameba.jp/user_images/20110811/21/sozai-land/df/e3/p/o0300010011410402113.png

コメント投稿ボタン comment_bo

https://stat.ameba.jp/user_images/20110811/21/sozai-land/68/6e/p/o0300010011410402116.png

コメント投稿ボタン comment_bg

https://stat.ameba.jp/user_images/20110811/21/sozai-land/91/c1/p/o0300010011410402109.png

コメント投稿ボタン comment_bc

https://stat.ameba.jp/user_images/20110811/21/sozai-land/8e/89/p/o0300010011410402110.png

コメント投稿ボタン comment_bb

https://stat.ameba.jp/user_images/20110811/21/sozai-land/9b/66/p/o0300010011410402111.png

以上です。

アメブロカスタマイズで自分らしい空間を作る技