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

あらかじめ日記

2chまとめサイト「ソノウソホント?」の雑記と、ブログで使えるスクリプトとかテクニックとか。その他、音楽やアニメ、漫画の話題とかも。

まとめサイト「ソノウソホント?」と「ムードもりあげ楽団」はこちら。

【まとめブログ向け】記事(レス)の間に固定情報(RSSフィードや、広告等)を挿入するJavaScript

ブログのテンプレートを利用すれば、固定の位置に情報を表示させることは容易だと思います。

自身のサイトの方でも、本文と続き記事の間、記事の最後には情報を出していましたが、続き記事が長くなる様な場合に、その途中にも何か固定情報(RSSフィードとか、広告等)を出したいな、、と思うようになりました。
そこで、JavaScriptのサンプルなどを眺めつつ、以下の方法で実現してみました。

 

f:id:allthewayfrom:20150322105342j:plain



動作のサンプルは、まとめサイトの最新記事で確認してみてください。


あくまでまとめブログ向けとして各レスが、特定のクラス属性付きの"div"タグ囲まれている前提であれば、と言うか、大抵のツールはレス単位でclass属性付きのdivでまとめていますので、そのクラスの数を調べて挿入したい位置を決める。(真ん中や1/3の位置、など)

挿入したい固定情報がスクリプトコードの場合は、新規に出力すると、スクリプトを実行させる方法が面倒なので、既に別の箇所にコードは書いておき、そのタグ全体ごと、挿入の位置に付け替える。

挿入する位置を探すための前提を決めてしまえば、こんな感じで基本的なコードだけで実装可能でした。


使い方

※本プログラムによって発生した問題に関して一切責任を負えませんので、あくまで使用は自己責任でお願いします。


ソースコード

(関数定義用)
<script>
<!--
  function insInfoInRes(){
    var resEle = document.getElementsByClassName("※1");
    if(resEle == null || resEle.length <= 2) return;

    var newEle = document.createElement("div");
    newEle.id = "※2";
    var tgtEle = resEle[parseInt(resEle.length/2)];

    tgtEle.parentNode.insertBefore(newEle, tgtEle);

    var infoEle = document.getElementById('※3');
    if(infoEle == null) return;

    newEle.appendChild(infoEle);
  }
// -->
</script>

(関数呼び出し用)
<script>
<!--
  insInfoInRes();
// -->
</script>

  1. 挿入したい固定情報をブログのテンプレート上に設定しておき、id属性を設定したdivタグで囲う。
  2. ※1に各レスで囲んでいるクラス属性名を記入。
    (例:「まとめくす」の初期設定の場合は"t_b"のクラス名になります)
  3. resEle.length <= 2」の箇所は、レス数が2以下なら処理しない、なので本処理を行う最大数を決めたい場合は、適当に変更してください。
  4. 挿入用として新規のdivタグを追加するので、それにid属性を付けたい場合は※2を記入。
    (不要なら削除で構いません。あと、クラス属性としたいなら.classNameです。)
  5. parseInt(resEle.length/2)」の箇所は、レスの総数の半分(小数点切捨て)です。位置を変えたい場合は、適当に変更してください。
  6. 固定情報を囲んだdivタグのidを※3に記入。
  7. 関数定義用を、headタグ内に追記。
  8. 関数呼び出し用を、ブログのテンプレート上で記事内容の最後の方に記入。 (記事を全て読み込み終わった後で呼ぶため)

 

応用すれば、レスの数に応じて1/3、2/3の位置に挿入、と言ったこともできますね。

また、現在自身のサイトではRSSフィードに加えてレス数が丁度半分であることも記載しています。
たまに、レスが長いまとめを見ると自分でも「もういいか…」と思って離脱してしまいますが、残りの目安がわかれば「なら最後まで見てみるか」と、滞在時間を延ばす効果も期待できそうです。


誤っている箇所や不具合報告、他に良い方法がありましたらご指摘ください。
m(_ _)m