104blog

投資が趣味なITエンジニアの雑記ブログです。

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

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

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

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

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

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

この記事では、デザイン変更の画面から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>

表示されたか確認しよう

コードを保存したら、早速動作を確認しましょう。

サンプルコードでは、「IT・プログラミング」 or 「Java」 or 「Python」のカテゴリの記事下に「てすとてすと」という文言を入れるように設定しました。

 

サンプルで、「Java」カテゴリの記事を見てみます。

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

 

てすとてすと」という文言が表示されました。

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

みなさん思い思いの文言を挿入されたら良いかと思います。

ぼくは、以下のように投資系の記事の紹介を入れました

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

ブログの回遊率の向上にもつながると思いますよ!

何かわからないことがあれば、はてブやコメントで質問していただければお調べしますよ。(多分)