はてなブログに関連記事を記事下に表示させるのでR ver.2

この記事で、いろいろな方法ではてなブログに関連記事を記事下に表示させる方法を試したのでR。

これ以外に、サイドバーなら関連記事をモジュール追加を利用してする方法があったのでR。

それが、ここの方の記事によるのでR。ただし、ランダムではないので、そこは納得することが必要なのでR。

「ダッシュボード」→「デザイン」→「カスタマイズ」→「サイドバー」で、まず関連記事のモジュールを追加するのでR。

そして、

その関連記事を非表示にするために、「デザイン」→「カスタマイズ」→「デザインcss」に、

.hatena-module-related-entries {
　　display: none;
}

を追加するのでR。これで表向きの表示が見えなくなるのでR。

つぎに、この関連記事を記事下に出現させるべく、「デザイン」→「カスタマイズ」→「記事」の記事下に、

<div id="relateArticle"></div>
<script>
var timer = setInterval(function() {
    if (typeof jQuery != 'undefined') {
        $("#relateArticle").html($(".hatena-module-related-entries").html());
        clearInterval(timer);
    }
}, 1000)
</script>

を挿入するのでR。これで、サイドバーには非表示となった関連記事が、記事下に出現するのでR。この関連記事の表示のさせ方の変更は、先の「デザイン」→「カスタマイズ」→「サイドバー」の関連記事のモジュール内で行うことができるのでR。

これによって、サイドバーから、記事下に、関連記事を移行させたような形で実施できたのでR。

ただし、

スマホの画面では表向きの表示が表に出るので、先ほどの「デザイン」→「カスタマイズ」→「デザインcss」を

.hatena-module-related-entries {
        display: none;
}
@media screen and (min-width:769px){
    .hatena-module-related-entries {
        display: none;
     }
}

として表向きの表示をスマホでの指定も含めてするようにしたがよいようでR。

広告



（広告）月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
（広告）WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
（広告）年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─