Amebaで任意の位置に自動でタグを挿入するブログパーツ書いたよ

アメブロでエントリを書くたびに、記事の特定位置に広告などのタグを入れたいと言う場合があります。

HTMLタグを表示して、広告のタグなんかを入れてあげればできるわけですが、毎回入力するのも面倒なので、決まったタグを各エントリごとに自動的に挿入するJavaScriptを書いてみました。

基本構成は、「はてブボタン設置用ブログパーツを改良してみたよ」で書いたのと同じく、GoogleにホストされているjQueryを利用しています。

ここで記載のJavaScriptを「フリープラグイン」の箇所（「ブログを書く」＞「サイドバーの設定」＞「フリープラグイン」の編集）に貼り付ければ利用できます。

2010.02.24追記

AmebaではjQueryを読み込んでいると言う指摘をいただいたのでスクリプトを一部修正しました。

Amebaの記事の最後に任意のタグを挿入するスクリプト

書き方はこんな感じ。

<script>
  $(document).ready(function(){

    var entries  = $("div.entry > div.contents > div.subContents");
    var add_tag  = '<p>記事に挿入したいタグ</p>';

    for (i = 0; i < entries.length; i++) {
      if ($(entries).eq(i).is(":has('div#advertising2')")) {
          $("div#advertising2").before(add_tag);
      } else {
          $(entries).eq(i).append(add_tag);
      }
    }
  })
</script>

記事に挿入したいタグの箇所に、常にエントリ内に表示したいタグを置き換えます。

ただし、タグ内に改行を入れると上手く動きません。

スクリプトの解説

~~まず、最初の2行はGoogleにホストされているjQueryを利用する場合のおまじないです。~~

AmebaではjQueryが読み込まれている（http://stat100.ameba.jp/blog/js/apm001.js ）のでこの記載は不要です。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>

次に、画面に表示されるエントリのオブジェクトを取得しています。

var entries  = $("div.entry > div.contents > div.subContents");

Amebaの記事の場合、divタグのentryクラスの中にdivタグのcontentsクラスがあり、その子要素のdivタグであるsubContentsクラス内に記事データが入ってます。

- FireBugで見たときの要素の構造

次は、記事の中に埋め込みたいタグを書いておきます。

var add_tag  = '<p>記事に挿入したいタグ</p>';

以下、先ほど取得した記事のオブジェクトの数だけループさせて、上記の追加するタグを埋め込んでいく処理をします。

ただし、アメブロはデザインによって最新の記事の最後に自動的に広告が挿入されます。（お金払えば広告を解除できますが）
そのまま記事の最後に追加していくと、この広告の後にタグが挿入されてしまい、エントリと分離してしまうため、広告がある場合は、その前にタグを追加するようにしています。

if ($(entries).eq(i).is(":has('div#advertising2')")) {
    $("div#advertising2").before(add_tag);

is()で、要素があるかどうかを判断を行うため、その中に「(":has('div#advertising2')"))」を指定して、Amebaで自動で付けられる広告タグのIDを持っているかどうかをチェックしています。

広告タグがあれば、before()で広告の前に埋め込みたいタグを挿入しています。

それ以外は、記事の最後にタグを追加します。

$(entries).eq(i).append(add_tag);

Amebaの記事の最初に任意のタグを挿入するスクリプト

こちらはもっとシンプル。

<script>
  $(document).ready(function(){

    var entries  = $("span.theme");

    var add_tag  = '<p>記事に挿入したいタグ</p>';

    for (i = 0; i < entries.length; i++) {
      $(entries).eq(i).after(add_tag);
    }
  })
</script>

簡単に解説すると、各エントリの最初に表示されるテーマ用のクラス（theme）の後に、after()で追加したいタグを挿入するようにしています。

スクリプトを作り変えれば他の場所にタグを挿入することも可能です。

ただ、記事内にタグを入れ込む場合は、記事の中に予め決まったタグを入れておくなどの工夫が必要になり、これだと毎回タグを埋め込むのとあまり変わらないので意味が無くなるかもしれません。

また、挿入するタグによってはブログ全体のレイアウトが崩れたり、上手く動作しないものがあるかもしれません。

利用に際しては特に制限無いので、ご自由にどうぞ。

[PR]お名前.comのホームページ作成ツール★誰でも簡単にWebクリエイターに

[PR]【iPhone】オンラインで購入！＜送料無料・24時間営業＞

[PR]重いパソコンがサクサク動くウイルス対策ソフト

アメブロで「続きを読む」を実装する方法

AmebloにGoogle+1ボタンを設置してみたよ

Amebaに「なうで紹介」と「mixiチェック」ボタンを追加してみたよ

Amebloに貼り付けていた、はてなブックマークボタンを更新してみたよ

AmebloのフリープラグインのJavaScriptをGoogle codeにホストしたよ

Amebloに設置していたツイートボタンをTwitter公式のものに変えました