こんにちは。
以前から、はてなブログの記事下に載せる内容をカテゴリー別に変えたいと考えていました。
例えば記事のリンクやアフィリエイトリンクなどです。
今読まれている記事に合った内容の方がクリックされる確率上がりそうですね。
はてなブログでは「関連記事を表示する」という設定があるので、ここをチェックしておけば、内容に合った記事リンクが自動で挿入されますが意図したものとは違ったりすることもしばしば。
なので今回、「カテゴリー別に記事下の内容を変えるコード」をjavascriptを用いて作りました。
また生成や修正が簡単にできるように、そのスクリプトを生成するフォームも作ったのでよければどうぞ。
どのように作ったか
はてなブログのデザイン設定には「記事下」という項目があり、ここに記載した内容が全ての記事の下部分に自動的に挿入されます。
やりたいことは、その「記事下」に記載されている内容をカテゴリ別に変更したいというものです。
以下のようなjavascriptを使うことでうまく挿入することができました。
これをそのままデザイン設定の記事下欄に記述すると、例えば「車」カテゴリの記事では「車のカテゴリのみに表示しています。」と表示されるようになります。
もっと変数を増やしてやれば3個以上でも条件分けすることが可能です。
ただ、コードが長くなってしまいますが。。。
このコードでは、
①記事下にdivを配置しておく。
②対象カテゴリと載せたい内容を記載しておく。
③記事のカテゴリを調べる。
④対象カテゴリと一致したらその内容をdiv部分に挿入。
ということをしています。
ひとまずこれでやりたいことはできました。
でも、これ毎回手打ちするのは大変です。
コード中の変数内で改行してしまうとうまく動作しませんし。。。
ということで簡単に入力できるフォームを作ってみました。
生成フォームを作った
これを使うと上で紹介したようなコードを簡単に生成することができます。
カテゴリは3つまで入力できるようにしています。
カテゴリ1：
カテゴリ2：
カテゴリ3：
挿入内容1：
挿入内容2：
挿入内容3：
貼付けコード(このまま記事下に貼り付け)
使い方
以下の手順でコードを生成することができます。
①「カテゴリ1」に自分のブログのカテゴリを入力する。
②「挿入内容1」に「カテゴリ1」に記述したカテゴリ記事の場合に表示したいHTMLコードを記述する。
③他のカテゴリでも表示したい内容があれば、カテゴリ2、3、挿入内容2、3に同様に記述
る。
④「生成」ボタンを押す。
⑤コードが生成されるので、そのままデザイン→記事→記事下に貼りつける。
※「カテゴリ1」と「挿入内容1」の入力は必須です。
※複数のカテゴリに一致する場合には①→②→③の順で優先されます。
注意事項
個人使用を目的に作ったものなので、様々なケースに対応していません。（実はバグだらけ？）
使うに当たっては自己責任で。。。
①対象のカテゴリに一致しない場合には表示されません。
②属性値や文字列などの囲みはダブルクオーテーションのみです。また入れ子は不可です。
③「挿入内容」への内容によってはうまくスクリプトが動作しない場合があります。
④本スクリプトの使用によってブログ表示が崩れる場合があります。バックアップをしてから使用してください。
⑤本記事内容の適用によって生じたことは、本ブログ・ブログ管理者は責任を負いません。
まとめ
カテゴリによって記事下の内容を変更するjavascriptコードを作りました。
また、入力を簡単にするためにフォームも作ってみました。
本当は別にHTMLページを用意しておいてそこを参照するってのが管理しやすいんですが、はてなブログでは難しそうだったので今回のように作りました。
カテゴリに合った内容を記事下に表示することによってリンクをクリックしてもらうことが目的ですが、どれほど効果があるのかはこれからです。
興味ある方は使ってみてください。
javascript（jQuery）はこの本がわかりやすいです。
今回もこの本を参考にしながら作りました。
