アーカイブページにはてなブックマーク数を表示するようにするカスタマイズ - はてなブログカスタマイズ
こんにちはnasustです。
今回は、アーカイブページに、はてなブックマーク数を表示するカスタマイズです。
はてなブックマーク数が付くことで記事の注目度がアップします。
JQuery
JQueryが必要です。JQueryを導入していない場合は以下のhtmlをヘッダに入力してください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
既に他のカスタマイズなどで導入済みである場合は必要ありません。
CSS
.archive-entry .archive-bookmark-count .low-count{ color:#F07171; } .archive-entry .archive-bookmark-count .high-count{ color:#FF0000; }
JavaScript
以下のJavaScriptをフッターに入力します。
<script> $(function(){ var hrefList = []; var archiveEntries = $(".archive-entry"); archiveEntries.each(function(){ var archiveEntry = $(this) var entryTitleLink = archiveEntry.find(".entry-title-link"); var href = entryTitleLink.attr("href") hrefList.push(href); }) var uris = "" for( var i = 0 ; i < hrefList.length ; i++ ){ uris += "url=" + encodeURIComponent( hrefList[i] ) + "&" } $.getJSON("http://api.b.st-hatena.com/entry.counts?" + uris + "callback=?" , function( json ){ archiveEntries.each(function(){ var archiveEntry = $(this) var entryTitleLink = archiveEntry.find(".entry-title-link"); var href = entryTitleLink.attr("href") var count = json[href]; if(count > 0){ var html = "<div class='archive-bookmark-count'>" if( count < 10 ){ html += "<span class='low-count'>" }else{ html += "<span class='high-count'>" } html += "<span class='num'>" html += count; html += "</span>" html += " USERS"; html += "</span>" html += "</div>" entryTitleLink.before( html ); } }); }); }); </script>
最後に
アーカイブページにはてなブックマーク数があると、注目されている記事が分かりやすくて良い感じです。
テーマによっては、デフォルトでブックマーク数が表示されないようです。 自分のブログで使用している「 Report 」テーマでは表示されないようです。