はてなブログの記事一覧ページにスターとブックマーク数を表示させてみた

こんにちは、鬱太郎です。先日、テーマを変更してはてなブログをカスタマイズしました。

www.neetaro.com

ふとトップページ（記事一覧ページ）を見ていると、

記事一覧ページにはてなスター等が表示されていない

あれ？スターが表示されてない！あとブックマーク数も！

おそらくテーマを変更していろいろカスタマイズしていたら、はてなスター等が記事一覧ページに表示されなくなってしまったようです。

私のように困っている方もいるかもしれません。

でも大丈夫！表示されてないなら表示すればいいじゃない！という事で、今日ははてなブログの記事一覧ページにはてなスターとブックマーク数を表示させる方法をまとめてみました。

同じような現象の方も表示されるかもしれません！

はてなスターを記事一覧ページに表示させる
はてなブックマーク数を記事一覧ページに表示させる
終わりに

はてなスターを記事一覧ページに表示させる

結論から、「デザイン」→「カスタマイズ」→「デザインCSS」に下のコードを追加します。

div.archive-entry-body>span.social-buttons{
 display:inline
}

これについて詳しく説明していきます

記事一覧のHTML構造を解析する

デベロッパーツールを使い記事一覧ページに表示される1記事の要素を解析します。

デベロッパーツールを使い記事一覧ページのエントリーを調べる

ありましたね！この<section class="archive-entry ...">...</section>の中身を調べて構造を把握します。これをまとめると、次のようになります。

<!--1--><section class="archive-entry ..." data-uuid="...">
<!--2-->  <div class="archive-entry-header">...</div>
<!--3-->  <div class="categories">...</div>
<!--4-->  <a href="http://www.neetaro.com/entry/month-summary" class="entry-thumb-link">...</a>
<!--5-->  <div class="archive-entry-body">
<!--6-->    <p class="entry-description">...</p>
<!--7-->    <span class="social-buttons">
<!--8-->      <span class="star-container">...</span>
<!--9-->      <div class="hatena-star-metadata" style="display: none">...</div>
<!-- -->    </span>
<!-- -->  </div>
<!-- --></section>

となります。これを図で示すと、

f:id:neet-utsu-taro:20171002135613p:plain

こうなります。ソースコードの番号と要素が関係していることがわかります。ここで、7番の<span class="social-buttons">...</span>が表示されていないことに気づきました。この要素のCSSをデベロッパーツールを用いて確認すると、

.social-buttons {
    display: none;
}

となっていました。display:noneはそのタグを（含む中の要素すべてを）表示しないという意味を持ちます。つまり、CSSで画面に表示されない設定になってるんですから、当たり前のことというわけですね。このコードを打ち消すようなCSSを作り、はてなブログのデザインCSSに登録すれば表示されます。

実行確認

「デザイン」→「カスタマイズ」→「デザインCSS」に下のコードを追加します。

div.archive-entry-body>span.social-buttons{
 display:inline
}

上記コードをデザインCSSに登録すると、はてなスターが表示されました

ソースコードの説明

これから、CSSの説明をします。

div.archive-entry-body>span.social-buttons{
 display:inline
}

div.archive-entry-bodyはclass=archive-entry-bodyを有する<div>タグという意味です。

同様にspan.social-buttonsはclass=social-buttonsを有する<span>タグという意味です。

cssにおいて>は要素の中（下）という意味です。

つまり、1行目の div.archive-entry-body>span.social-buttonsは

class=archive-entry-bodyを有する<div>タグの中にあるclass=social-buttonsを有する<span>タグを意味しています。

.social-buttons{display:inline}でも同じですが、先ほどの表記の方がより限定されます。social-buttonsというクラス名は他のモジュール等でも使われそうなものですので、CSSによる汚染が心配です。記事一覧ページのsocial-buttonsクラスのデザインだけを変更したつもりでも、ほかにも悪影響が出てしまう可能性を考慮してより限定的な表記を用いました。

display:inlineはテキストのように行内に続けて表示させるという意味です。今回は、display:noneの対義語として用いました。

はてなブックマーク数を記事一覧ページに表示させる

はてなスターが表示されたけれども、ブックマーク数が表示されていない！と思いました。ですので、はてなスターの前にブックマーク数を表示するように試行錯誤してみました。

結論から、「デザイン」→「カスタマイズ」→「フッター」に下のコードを追加します。jQueryを使用します。

<script>
/*記事一覧のそれぞれのはてなスターの前に、はてなブックマーク数を表示させる*/
$(function(){
    var archiveEntries = $(".archive-entry");
    archiveEntries.each(function(){
        var archiveEntry = $(this)
        var entryTitleLink = archiveEntry.find(".entry-title-link");
        var href = entryTitleLink.attr("href")
        var starContainer=archiveEntry.find(".star-container");
        var html="<img src='https://b.hatena.ne.jp/entry/image/"+href+"'>";
        
        //console.log(html);
        starContainer.before(html);
    });
});
</script>

「デザイン」→「カスタマイズ」→「ヘッダー」にjQueryのロードを追加（既にある場合は不要）

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

これについて詳しく説明していきます。

追加する要素を確認する

はてなスターを表示させたことで、記事一覧ページのHTML構造が分かりました。

<!--7-->    <span class="social-buttons">

の前に、はてなブックマーク数を表示したいですね。画像で言うとこんな感じです。

ピンクで囲んだところにはてなブックマーク数を追加したい

はてなブックマーク数を調査

そもそもはてなブックマーク数のこれこれって何だろうって何だろうと思い、デベロッパーツールで調べてみました。

ブックマーク数は画像

なんと意外！それは画像！

それはまさかの画像だった

はてなブックマーク数のあれはgif画像だった。

はてなブックマーク数の取得システム

はてなブックマーク数の画像ファイルの取得方法が調査したところ判明したのでまとめたいと思います。

特定のURLにリクエストする
指定された記事のブックマーク数の画像が返される

これだけです。

この特定のURLというのが肝です。

https://b.hatena.ne.jp/entry/image/{記事URL}

です。私の記事の例ですと、

https://b.hatena.ne.jp/entry/image/http://www.neetaro.com/entry/use-feedly

ですね。

これをうまくプログラムに組み込めば、記事一覧ページにはてなブックマーク数を表示させることができます。

JavaScriptを作る

nasust.hatenablog.com

上の方が作ってくださったJavaScriptの記事を読み取る部分を使わせてもらいました。

実行確認

「デザイン」→「カスタマイズ」→「ヘッダー」にjQueryを読み込むコードを追加します。すでに追加してある方は必要ありません。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

「デザイン」→「カスタマイズ」→「フッター」に次のコードを追加します。

<script>
/*記事一覧のそれぞれのはてなスターの前に、はてなブックマーク数を表示させる*/
$(function(){
    var archiveEntries = $(".archive-entry");
    archiveEntries.each(function(){
        var archiveEntry = $(this)
        var entryTitleLink = archiveEntry.find(".entry-title-link");
        var href = entryTitleLink.attr("href")
        var starContainer=archiveEntry.find(".star-container");
        var html="<img src='https://b.hatena.ne.jp/entry/image/"+href+"'>";
        
        //console.log(html);
        starContainer.before(html);
    });
});
</script>

コードを追加するとブックマーク数が記事一覧ページに表示されます

やったぜ！

ソースコードの説明

私はJavaScriptにあまり詳しくないので詳細な説明はできません。

archiveEntries.each(function(){});で記事一覧ページに表示されてるここのエントリーに対して中の関数を実行しているのでしょう。 var href = entryTitleLink.attr("href")で記事のURLを変数hrefに格納し、前述のはてなブックマーク数をリクエストするURLに追加しています。

リクエストURLをsrcに含んだ<img>タグを.star-containerの前に追加します。それがstarContainer.before(html) です。