アメブロ記事下に自動で定型文を挿入

アメブロで投稿本文の下の方に、ブログランキングのバナーやリンク、読んでほしいおススメリンク、広告などを表示させるのに便利です。私は、楽天モーションウィジットを表示させてみました。

プラグインに書いたコードの例

アメブロ記事下に楽天モーションウィジットを表示させる

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div class="rakuten_widget">
<!-- Rakuten Widget FROM HERE --><script type="text/javascript">rakuten_design="slide";rakuten_affiliateId="■あなたのコード■";rakuten_items="ctsmatch";rakuten_genreId=0;rakuten_size="320x48";rakuten_target="_blank";rakuten_theme="gray";rakuten_border="on";rakuten_auto_mode="on";rakuten_genre_title="off";rakuten_recommend="on";</script><script type="text/javascript" src="http://xml.affiliate.rakuten.co.jp/widget/js/rakuten_widget.js"></script><!-- Rakuten Widget TO HERE -->
</div>

<script type="text/javascript">
$(function(){
$(".rakuten-widget").appendTo(".articleText")
});
</script>

1行目は、JQueryを使えるようにする為のの準備。1度書けばOKなので、プラグインの先頭にでも書いておけば、色々と使いまわしできそう。

3~5行目は、自分の楽天モーションウィジットのコードを、divタグで囲んだだけ。私は、div class=”rakuten_widget”と、class名をrakuten_widgetにしましたが、div class=”rmw” でもdiv class=”rw” でも、好きな名前でOKです。

7~11行目のコードで、記事下に表示させている。$(“.rakuten-widget”)の部分は、3行目でつけた名前を指定。div class=”rmw”とした場合は、$(“.rmw”)と書く。

(“.articleText”)の部分は、自分が利用しているアメブロのテンプレートにより異なります。私はCSSが編集できるスタンダードスキンを利用しています。

今回は、楽天モーションウィジットなどのスクリプトコードでも、アメブロの記事下に表示させることができるのか?ということが気になり、広告を貼りましたが、文章でもなんでもOKなので、色々と応用できそうでうs。

モバイル版アメブロにはRSSが表示されないので注意

パソコンでの閲覧、もしくは、スマートフォンなどモバイルでの閲覧時に表示方法をパソコン版に変更すると見ることができるようです。モバイル版のアメブロを閲覧している人には反映されません。

昔の携帯(ガラケー)で、アメブロを閲覧する場合は、余計なサイドバーやリンク、画像など表示が遅くなるだけで、邪魔なだけでしょうし、モバイル版アメブロで、サイドバーのRSSが表示されないのは致し方ない事だと思います。パソコンに詳しい方なら、何か裏技的なテクニックをお持ちかもしれませんが、当方はそういった知識もありませんし、そこまでする必要性も感じないためやりません。

モバイルでの閲覧時には、プラグインが読み込まれない仕様のようです。

参考にしたサイト