◆コメントリンクを目立たせる

こんにちは、カスタマイズと復興支援で頑張るたっくんです。

以前、このような記事を書きました。

⇒フッターに「コメント」「ペタ」アイコンをつける

⇒フッターに「トラックバック」アイコンをつける

今回は、これらの記事で紹介したCSSの、

つけ足しという形になると思います。

このように、コメントリンクの文字色を変えたり、

フォントサイズを大きくしたりして、

コメントリンクを目立たせてみました。

CSS編集

以下のCSSを追加してみてください。

/*コメントリンク目立たせる*/
.commentLink{
font-size:18px;/*文字サイズ*/
font-weight:bold;/*太字*/
color:#ff0000;/*文字色*/
}

以前にご紹介したコメントアイコンも表示させる場合は、

以下のとおりになります。

/*コメントアイコン*/
.commentLink{
background-image:url(http://stat100.ameba.jp/common_style/img/common/icon/open_comment.gif);
background-repeat:no-repeat;
padding:2px 0 2px 20px; /* 余白(↑→↓←) */
font-size:18px;/*文字サイズ*/
font-weight:bold;/*太字*/
color:#ff0000;/*文字色*/
}

文字サイズ等は、適宜変更してください。

なお、今回のCSSは、

「ペタリンク」「トラックバックリンク」にも応用できます。

「ペタリンク」を目立たせたい場合は、

「.commentLink」を「.petaLink」に、

「トラックバックリンク」を目立たせたい場合は、

「.commentLink」を「.trackbackLink」に変更してください。

アイコン画像のURL変更も忘れずに。

コメントリンクを目立たせると、

コメントが増えるかもしれませんね。

ぜひ、あなたも試してみてください。

関連記事

⇒フッターに「コメント」「ペタ」アイコンをつける

⇒フッターに「トラックバック」アイコンをつける

@takumi_heigenをフォロー