フッター(記事下)の「コメントする」ボタンにアイコンを付ける方法 | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。


テーマ:
※CSS編集可能デザインを採用されている方向けです



以前、フッター下の「いいね!した人」にアイコンを付ける方法をご紹介しました。

今回は「コメントする」ボタンにアイコンを表示する方法をご紹介します。

「ブログを書く」絵文字のボタンをクリックして、試しに「メモ」⇒メモを、アイコンとして文字の左側に表示してみました。

「デザインの変更」⇒「CSSの編集」で、以下の設定をご自身のアメブロの「現在使用中のブログデザインCSS」の末尾に追記(コピペ)してみて下さい。

/*「コメントする」ボタンにアイコンを表示*/
.articleCommentBtnArea{
border: 1px solid #cccccc;
border-radius: 2px;
background-image: url(http://stat100.ameba.jp/blog/img/btn/btn_basic_ss.1.0.png);
}
.articleCommentBtnArea:hover{
background-image: url(http://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(http://stat.ameba.jp/blog/ucs/img/char/char2/131.gif);
}



赤字の箇所が、今回使用したアイコンとして表示する画像のURLです。お好みの画像URLに差し替えてください。


☆ブィブィ ゞ(o^-')b




500x281

ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス