記事フッタ「コメントする」ボタンにアイコンを表示する方法

記事フッタ「コメントする」ボタンにアイコンを表示する方法

記事フッタ「コメントする」ボタンにアイコンを表示する方法

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

こんにちは。

現在、アメブロの記事フッタ(の上)には「いいね!」と「コメントする」という2つのボタンが並んでいます。

この2つのボタンを見比べると、「いいね!」ボタンはアイコンが付いていますが「コメントする」ボタンにはアイコンがなく、何となくアンバランスな気がしますが如何でしょう?

そこで、この「コメントする」ボタンにアイコンを表示してみましたので、その方法をご紹介します。

アイコンは、アメブロの旧来のデザインで使われていた画像()を、文字の左側に表示してみました。

やり方は簡単で、CSSの編集で、以下のコードをあなたのアメブロのユーザーCSSの最後に追加すると同様にアイコンが表示されるようになります。

.articleCommentBtnArea{
  border: 1px solid #cccccc;
  border-radius: 2px;
  background-image: url(https://stat100.ameba.jp/blog/img/btn/btn_basic_ss.1.0.png);
}
.articleCommentBtnArea:hover{
  background-image: url(https://stat100.ameba.jp/blog/img/btn/btn_basic_ss_hover.1.0.png);
}
.articleCommentBtn, .articleCommentBtn:hover{
  padding-left: 28px;
  border: 0 none;
  background-color: transparent;
  background-position: 6px 2px;
  background-repeat: no-repeat;
  background-image:url(https://stat100.ameba.jp/common_style/img/common/icon/open_comment.gif);
}

赤文字部分が、今回使用したアイコンとして表示する画像のURLですので、ここを変更することで別の画像に差し替え可能です。

もしよろしければお試しください。

関連記事

CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ