アメブロでjQueryを使う設定

いろんな人がまとめてますが備忘録的に残しておきますね。

参考にさせていただいたサイト
http://ameblo.jp/blog-lab/entry-10795838329.html


■事前準備
１．ブログ管理画面を開く

２．左メニューの下にある「サイドバー」「プラグインの追加」をクリック

３．「フリープラグイン」タブを選択して、以下のテキストを入力

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>(function(j){j(function(){$=jQuery=j})})(jQuery);</script>
<script type="text/javascript">
$(function(){
  $(".jscode").each(function(){
    eval($(this).text());
  });
});
</script>


■本文を書く
HTML表示で書いてくださいね！！

<div>タグにclass="jscode"をつけて書いたコードが実行されます。

<div class="jscode">
このエリアにjQueryテキストを入力
～～～～～～
～～～～～～
</div>

本文中に使われているjQueryのバージョンを確認する場合は以下のコードを試してみてください。
<div class="jscode">
$(function(){alert(jQuery.fn.jquery);});
</div>


※注意
コードが本文中にそのまま出てしまうので、それを避ける場合は非表示にしてくださいね。

style="visibility: hidden;
のスタイルを設定すると表示はされませんが、その分空白が出来てしまいます。。。
<div class="jscode" style="style="visibility: hidden;">
</div>

style="display: none;"
とすると、うまく実行できなくなります。

実行後にdisplay: none; とするか、このdivブロック自体をどこか欄外に移動してしまうかで解消できそうですね。
試してないですけどー。