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

ボクココ

サービス開発を成功させるまでの歩み

はてなブログで記事下に関連記事を出すカンタンな方法

JavaScript

ども、@kimihom です。

今回ははてなブログのカスタマイズについて。色々なブログで、記事の下に「関連記事」だとか「合わせて読みたい」だとか、そういう記事リンク集がある。これは、記事を読んだ後に同じブログ内を回遊してほしいからやっているわけだ。はてなブログではデフォルトで記事下に関連記事を表示する機能を提供していない。てことで何らかのテクニックを使ってやらないといけない。

調べてみると、外部のプラグインを使うやり方などが紹介されている。これらはその外部提供者に依存しているので、あまり好ましくない。以下の方法を使えば、はてなブログ内の設定だけで記事下に関連記事を出すことが可能だ。

ではその手順を紹介する。

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

はてなのサイドバーに関連記事がある。これを記事下に持っていこうってのが今回のやり方。

はてなブログの管理から、デザイン -> カスタマイズ -> サイドバー へ行こう。

f:id:cevid_cpp:20160213221008p:plain

ここでモジュールを追加を選択し、関連記事を選択。適当にいい感じにオプションをつけておこう。

サイドバーの関連記事を非表示

サイドバーには関連記事を出さないので、非表示にしよう。

デザイン -> カスタマイズ -> デザインCSS に以下を追加。

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

記事下に関連記事を表示

そんで JavaScript で記事下にその関連記事を移そう。

デザイン -> カスタマイズ -> 記事 -> 記事下に以下を追加。

<div id="relateArticle"></div>

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

仕上げ

このままだとサイドバーに表示される関連記事が記事下に移動するだけなので、あとは記事下の #relateArticle の CSS をいい感じに調整してあげよう。 メディアクリエイターやブロガーの方なら、そのくらいできるよね!

てことでブログ楽しみましょう。