同カテゴリーが記事下の関連記事に表示されない時の対処法 - 【はてなブログ】| 【カスタマイズ】

f:id:Surprisedblog:20190705024136j:plain — William Iven

問題と対処法
記事下の関連記事の仕様
サイドバーの関連記事モジュールの仕様
カスタマイズ

関連記事を記事下に表示する設定にしているのに、関連する記事が表示されないので、はてなモジュールから関連記事を表示するようにカスタマイズしました。

問題と対処法

私としては、記事と同じカテゴリーが表示されてほしいのですが、全く予想だにしていない記事が関連記事として表示されてしまいます。

そこで、サイドバーに設定することができる関連記事を、記事下に移動させることで対処しました。

記事下の関連記事の仕様

はてなブログによるとこのような仕様になっています。

http://staff.hatenablog.com/entry/2017/06/13/164000から引用

はてなブログでは、記事ページ（個別記事のパーマネントリンク表示）の本文下（ソーシャルパーツを表示していればその下）に、関連記事を表示するようにしました。そのブログに投稿された記事から、表示中の内容に関連するとみられるものを最大5件まで、一覧形式で表示します。

サイドバーの関連記事モジュールの仕様

サイドバーの関連記事モジュールの表示方法は、このようになっています。

f:id:Surprisedblog:20190704190351p:plain

関連記事モジュールは、同じカテゴリーを関連記事として表示してくれます。

このモジュールを記事下に移動させて、記事下の関連記事として同じカテゴリーの記事を表示させることができます。

カスタマイズ

サイドバーに関連記事モジュールを追加する

デザイン設定のカスタマイズから、モジュール追加で関連記事を追加します。

f:id:Surprisedblog:20190704210725p:plain

関連記事モジュール以降にJavaScriptを埋め込む

関連記事モジュールより後に、JavaScriptコードを記入します。

サンプルコード

※サンプルコードは、説明通りの動作を保証できるものではありません。

jquery使用

<script>
    //サイドバーの関連記事モジュール
    var $r_entries = $("#box2 .hatena-module-related-entries")
    //一番下の関連記事
    var r_entries = $r_entries[$r_entries.length - 1]
    //記事下
    var customized_footer = $("article footer .customized-footer")
    if (customized_footer.length>0) {//記事下に配置できる場所がある
        //記事下の一番上に移動   
        customized_footer.prepend(r_entries)
    }else{
        //コメントの上に表示
        $("article footer .comment-box").before(r_entries)
    }
</script>

素のJavaScript

<script>
try {
    //サイドバー
    var box2 = document.getElementById("box2")
    //サイドバーの関連記事モジュール
    var domr_entries = box2.getElementsByClassName("hatena-module-related-entries")
    //一番下の関連記事
    var r_entries = domr_entries[domr_entries.length - 1]
    //記事下
    var article_footer = document.getElementsByTagName("article")[0].getElementsByTagName("footer")[0]
    var customized_footer = article_footer.getElementsByClassName("customized-footer")[0]
    try {
        //記事下の一番上に移動
        customized_footer.insertBefore(r_entries, customized_footer.firstChild)   
    } catch (error) {//エラーの場合　
        //コメントの上に表示
        var footer_comment=article_footer.getElementsByClassName("comment-box")[0]
        footer_comment.parentNode.insertBefore(r_entries,footer_comment); 
    }
} catch (error) {}
</script>