読者です 読者をやめる 読者になる 読者になる

よなかのはなし

LifeHacks And Hello!Project Blog

はてなブログのサイドバーにある記事サムネイルにカウントアイコンをつける方法

ブログ はてなブログ カスタマイズ

f:id:hiroseyonaka:20160828040742p:plain

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

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

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


f:id:hiroseyonaka:20160828040805p:plain


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

実装方法

アイコンの実装方法はとても簡単。仕組みとしては、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」を指定しているのでやや太字になっていますが、ゴシック体や明朝体などデザインに合わせて好きなフォントにしてみてください。