はてなブログで特定のカテゴリの記事下に自動でコードを埋め込む方法

はてなブログで特定のカテゴリの記事下に自動でコードを埋め込む方法です。

たとえば、このブログには2大テーマ「投資」と「プログラミング」がありますが、両者のコンテンツを結びつけたい場合に重宝します。

例：プログラミングの記事を見に来た人に、投資の面白さを伝える記事を紹介したい

早速、やり方を書いていきますね。

まずはデザイン変更の画面へ移動
JavaScriptを埋め込もう
表示されたか確認しよう

まずはデザイン変更の画面へ移動

この記事では、デザイン変更の画面からjavacriptコードを挿入します。

まずははてなブログ管理画面から、デザイン編集画面へ移動してください。

f:id:toyo--104:20190112002804p:plain

次に、

①カスタマイズ（スパナのマーク）

②ヘッダ

③タイトル下

と進んでください。

タイトル下にコードを埋め込みます。

f:id:toyo--104:20190112003400p:plain

JavaScriptを埋め込もう

タイトル下には、以下のようなJavascriptを埋め込みましょう。

「カテゴリのリスト」と、「表示したい文言」の部分を編集してください。

表示したい文言の部分には、HTMLタグを挿入することができます。

（HTMLにはシングルクォートを入れず、ダブルクオートのみにして下さい）

<script>
addEventListener("DOMContentLoaded", function() {
  // 記事以外なら表示しない（カテゴリやTOP画面など）
  var regex = new RegExp("/entry/.*");
  if(location.pathname.match(regex) != null){
    var category = document.getElementsByClassName('entry-categories');
    for (var i = 0,  len = category.length; i < len; i++) {

      // ここに、記事下に文言を入れたいカテゴリのリストを記入
      var cat_list = ["IT・プログラミング","Java","Python"];
      if(cat_list.includes(category[i].innerText)){
        var entry_con = document.getElementsByClassName('entry-content');

        for (var i = 0, len = entry_con.length; i < len; i++) {
          // pタグの部分に、表示したい文言を記入する（divでも何でもOK）
          entry_con[i].insertAdjacentHTML('beforeend', '<p>てすとてすと</p>');
        }
      };
    }
  }
});
</script>