はてなブログのサイドバーの最新記事にアイコンを表示

hatenaロゴ

このブログでは、サイドバーの最新記事の一覧をテキストリンクで表示させています。
サムネイル画像をつけたり、概要を表示させたり、いろいろと試してみたのですが、画像とテキストのバランスが悪い気がして、結局、シンプルな表示に戻してしまいます...。

ただ、それもちょっとさびしいので、サイドバーのタイトルと同じように、テキストリンクにアイコンを表示させてみたところ、なかなかさりげなくいい感じになりました。

アイコンは、このブログの内部リンクにも表示させている、はてな純正アイコン(  ペンマーク)を使いました(最新記事モジュールの高度なカスタマイズにコードを入力)。

最新記事モジュール1
最新記事モジュール2
HTML
<i class="blogicon-pen"></i>&nbsp;<a href="{Permalink}">{Title}</a>

<i>タグのクラス名を変更することで違うアイコンを表示できます。また、アイコンの横に空白(&nbsp;)を表示させて、アイコンとリンクの間にすき間を作りました。
{Permalink}は記事URL、{Title}は記事タイトルです。ほかにもいろいろ表示できます。

参考になるブログ・Webサイト
FOXISM - はてなブログで使えるアイコンフォント(Webフォント)120種類

- さらに追記 -
最新記事モジュールの高度なカスタマイズを使わずに、CSSでアイコンを表示させました。

(デザイン→カスタマイズ→デザインCSSにコードを入力)

CSS
.recent-entries-item-inner a:before {
    font-family: blogicon;
    font-weight: normal;
    content: "\f024\00a0";
}

- 追記 -
はてなブログのサイドバーの最新記事にNEWマークを表示を書きました。