【はてなブログ】雑記ブログに最適！直帰率を下げ滞在時間を上げる「カテゴリーリンク」を自動挿入する方法

このブログ「ドリリウム」はダイエットからプログラミングまで幅広いジャンルを扱う雑記ブログです。

こうしたブログでは、特定カテゴリーの記事がその他多くの記事に埋もれてしまって巡回率が下がることがあります。

例えば、ダイエットの記事を見て他のダイエット記事が見たいと思ったとしましょう。

フッターにある「前の記事」「後の記事」のリンクを辿っても全く違うカテゴリーの記事に飛んでしまいます。

はてなブログの標準機能である「関連記事」も必ずしも狙って同じカテゴリーの記事が出るとは限りません。

ブログにはカテゴリーのリンクがデフォルトで表示されますが（下図）、これはわかりやすいとはいえず、特にブログを閲覧することに慣れている方を除いてなかなかこのリンクを活用できる人は多くありません。

デフォルトのカテゴリーリンクの例（当ブログの場合）

そこで、目に見えてわかりやすい同カテゴリーへのリンク（下図）を記事下自動挿入してみたいと思います。

今回自動挿入するカテゴリーリンクの例（スタイルは皆さん次第）

カテゴリーリンクを挿入したい場所に書くコード

カテゴリーリンクの自動挿入に必要なコードは大きく分けて2つです。

1つは実際にカテゴリーリンクを挿入したい場所に書くコード。

そしてもう1つは自動挿入の処理を行うコードで、これはフッターに書いておくのが無難です。

早速1つ目のカテゴリーリンクを挿入したい場所に書くコードがこちらです。

<div id="category-link"></div>

私の場合には「記事下」にこのコードを挿入しました。

記事の冒頭にカテゴリーリンクを置きたい場合は「記事上」、記事の末尾に置きたい場合には「記事下」。

その他、置きたい場所に自由に挿入してください。

また、category-linkというidでお好みのスタイルを適用することができます。

フッターあたりに書くコード

続いて実際にカテゴリーリンクを自動挿入するコードです。

こちらはフッターに記述すると無難です。

 var article = document.getElementsByClassName("entry-content");
 if(article.length > 0){
   var categories = document.getElementsByClassName("entry-categories")[0].getElementsByTagName("a");
   if(categories.length > 0){
     var categoryUrl = categories[0].getAttribute('href');
     var categoryName = categories[0].innerHTML;
     var categoryLink = document.getElementById("category-link");
     categoryLink.innerHTML = "<a href='" + categoryUrl + "' target='_blank'>その他の「" + categoryName + "」の記事はこちら</a>";
   }
 }

このコードの例では、単純なカテゴリーへのリンクではなく前後に文字を付与しています。

その他の + categoryName + の記事はこちら

 という部分です。

categoryNameにはその名の通りカテゴリー名が自動的に挿入されます。

ここの文言は自分のブログのスタイルに合わせて自由に変更してみてください。