記事フッタの「いいね!した人」と「コメント」にアイコンを表示する方法

記事フッタの「いいね!した人」と「コメント」にアイコンを表示する方法

記事フッタの「いいね!した人」と「コメント」のリンクにアイコンを付ける方法

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

こんにちは。

アメブロの記事フッタには「いいね!した人」と「コメント」という2つのテキストリンクがありますが、今回はこれらのテキストリンクにアイコンを表示する方法をご紹介します。

「いいね!した人」にアイコンを付ける

まず、「いいね!した人」にアイコンを表示します。

アイコンには、このリンクのすぐ上に表示されている「いいね!ボタン」と同じアイコン()を、文字の左側に表示することにします。

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

/* 「いいね!した人」にアイコンを表示 */
.articleLinkArea .iineEntryCnt{
  padding: 2px 0px 4px 17px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  background-image: url(//stat.ameba.jp/user_images/20170302/22/wazameba/5c/66/p/t00150016_0015001613880881958.png);
}

赤文字部分が、アイコンとして表示する画像のURLですので、お好みで他の画像に変更することも可能です。

「コメント」にアイコンを付ける

次は、「コメント」にアイコンを表示します。

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

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

/* 「コメント(?)」にアイコンを表示 */
.articleLinkArea .commentLink{
  padding: 2px 0px 4px 20px;
  background-position: 0px 0px;
  background-repeat:no-repeat;
  background-image:url(//stat.ameba.jp/common_style/img/common/icon/open_comment.gif);
}

やはり赤文字部分がアイコンとして表示する画像のURLで、お好みの画像に変更可能です。

以上、『記事フッタの「いいね!した人」と「コメント」のリンクにアイコンを表示する方法』をご紹介しました。

基本的には、ユーザーCSSにコピペするだけの、とても簡単なカスタマイズですので、よかったらやってみてくださいね。

関連記事

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