サイドバーの記事サムネイルにカウントアイコンをつけるCSS

はてなブログのサイドバーには最新記事や関連記事を表示させるモジュールが用意されていますが、このサムネイルにカウントアイコンを付けるカスタマイズを行なってみました。

SPONSORED LINK


サムネイルにアイコンをつける実験

サイドバーのランキング記事等にカウントアイコンをつけているサイトは最近かなり多くなってきています。はてなブログでもCSSでカスタマイズすればサイドバーの最新記事・関連記事・注目記事のリストにはカウントつきのアイコンを表示させることができます。

f:id:hiroseyonaka:20170331220950j:plain

当ブログのようにアイキャッチがごちゃごちゃしている場合は、カラーを半透明に変えてアイコン自体はあまり目立たせない方がおしゃれです。この手のカウントアイコンはグレー・黄・赤、フラットデザインであればエメラルドグリーンなどが定番なので、ブログのデザインによってカラーを変更し上手く馴染むよう調整してみてください。

SPONSORED LINK

実装方法

アイコンの実装方法はとても簡単。仕組みとしては、CSSのcounter-incrementプロパティを使って指定した要素に番号を自動的に振り、それを取得しているだけです。はてなブログの場合は最新記事や関連記事モジュールのサムネイルに振られているクラス名「urllist-with-thumbnails li」に指定します。IE7以下は非対応となっていますのでご注意ください。

実装するには以下のコードをデザインCSSに貼り付けます。

.urllist-with-thumbnails li::before {
content: counter(widgetCounter);
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: #fff;
margin-right: 8px;
position:absolute;
  font-size: 0.8em;
background-color: rgba(0,0,0,0.5);
}
.urllist-with-thumbnails li {
counter-increment: widgetCounter;
}

透明度を下げたいときは、以下のように数値を変更します。

.urllist-with-thumbnails li::before {
background-color: rgba(0,0,0,0.8);
}

当ブログでは数字部分にGoogleフォントの「Montserrat」を指定しているのでやや太字になっていますが、ゴシック体や明朝体などデザインに合わせて好きなフォントにしてみてください。

SPONSORED LINK

あわせて読みたい