2010年10月25日
アメブロの本文中で禁止タグを使う方法 ※追記あり
アメブロの禁止タグといえば、scriptやiframeですね。
以前に本文中にscriptが使える方法をご紹介しましたが
今回は禁止タグ全般が使えてしまう方法をご紹介します。
※2010/10/25追記
<pre class="eval"></pre>を1ページで複数使いたい場合
動作しない場合のチェックポイント
※2010/10/26追記
設置例を追加
動作しない場合追加
サンプル
本文中で色々な事が出来ちゃう
今回の記事を思いついた経緯。
■これってAmebloデスカ？様のエントリーに
【Naver まとめがすごくいいんだけど】という記事があり
（＾ω＾）【そいえばアメブロって本文中にiframe使えないんだっけか。】
（＾ω＾）【js使える方法は公開されてるけど、他の禁止タグ使う方法は皆書いてないなぁ～】
記事ネタゲットだぜ！(ﾟ∀ﾟ)
禁止タグにあるiframeが本文中に使えると
ブログの自由度がかなり上がると思います。
ちなみにNaver まとめは、自分で【まとめ】を作ることができ
画像集や動画集、リンク集などをまとめる事ができ、結構使い勝手がいいです。
ちなみに11月頃から【まとめ】を作った人を対象に
広告収入を還元してくれるらしいです。
広告収入に関してNaverは一切受け取らず、利用者に還元する仕組みだとか。
収益の何割かを社会貢献に、そしてユーザーに分配する。
どこかの広告だらけのブログ運営会社は見習って欲しいですよねｗ
さてそんな小ネタはいいとして、紹介していきます。
禁止タグを使う方法
■このブログは証明できない。
まずは上記ブログ様に行き
本文中にjava scriptを動かすコードを、フリープラグインに貼り付けます。
続いて本文中に動かしたいコードを用意します。
今回はNaver まとめのiframeを例にご説明します。
<pre class="eval" style="display:none">
$(function(){
var a ='<if'+'rame src="http://matome.naver.jp/paste?id=2128713469830574601&type=V&p=1287611878280&g=1&ver=1.0&color=02&size=02" frameborder="0" width="460" height="540"></if'+'rame>';
$("#aiframe").prepend("<span>"+a+"</span>");
});
</pre>
<div ID="aiframe"></div>
最後の一行<div ID="aiframe"></div>部分が、表示させる位置です。
$(function(){
var a ='<if'+'rame src="http://matome.naver.jp/paste?id=2128713469830574601&type=V&p=1287611878280&g=1&ver=1.0&color=02&size=02" frameborder="0" width="460" height="540"></if'+'rame>';
$("#aiframe").prepend("<span>"+a+"</span>");
});
</pre>
<div ID="aiframe"></div>
最後の一行<div ID="aiframe"></div>部分が、表示させる位置です。
弄る部分
var a ='<if'+'rame src="http://matome.naver.jp/
paste?id=2128713469830574601&type=V&p=128
7611878280&g=1&ver=1.0&color=02&size=02" f
rameborder="0" width="460" height="540"></if'+'rame>';
var a =は触らないでその先から、自分が使いたいコードを貼ってください。
'←(シングルクォーテーション)これで禁止タグの部分を区切り、+で連結させています。
設置例
基本は
'<sc'+'ript></sc'+'ript>';
他のコードもこれと同じように、区切って+を使ってやれば動きます。
■美人時計ブログパーツの場合
これのコードはigoogle経由でiframeを使っています。
コードの中に余計なモノが入っていて
いつもの方法では動作出来ないので
こういったコードがごちゃごちゃしている奴は
直接呼び出し元の所を、iframeで呼び出しちゃいましょう。
サンプルソース
※サンプルは見やすく改行をいれていますが
書く際には改行は全て消してください。
<pre class="eval" style="display:none;">
$(function(){
$('<if'+'rame src="http://www.bijint.com/gadget/gg.html" class="bijin" width="320" height="320"></if'+'rame>').appendTo("#aiframe2");
});
</pre>
HTML
<div id="aiframe2"></div>
<style>.bijin{border:none;}</style>
$(function(){
$('<if'+'rame src="http://www.bijint.com/gadget/gg.html" class="bijin" width="320" height="320"></if'+'rame>').appendTo("#aiframe2");
});
</pre>
HTML
<div id="aiframe2"></div>
<style>.bijin{border:none;}</style>
動作しない場合
※追記 2010/10/22
通常の編集画面の場合
一度書いてから、プレビューしたり、【タグの非表示】に移動すると
勝手にコードを変えられてしまうので
一番最後に書いてから、【全員に公開】をすれば問題なく動作します。
※追記 2010/10/25
1ページで複数の記事を表示している場合
本文内でjava scriptを動かすコードが動作しないので
それに対応するコードです。
<script type="text/javascript">(function() {var codes = document.body.innerHTML.match(/<pre [\w\s:;"=]*class="?eval"?[\w\s:;"=]*>((.|\n)*?)<\/pre>/gi);if (codes == null) return;for (var i = 0; i < codes.length; i++) {eval(codes[i].replace(/<\/pre>/i, "").replace(/<pre [\w\s:;"=]*class="?eval"?[\w\s:;"=]*>/i, ""));}})();</script>
これで1ページ内、一つの記事内に
複数の<pre class="eval">を使用しても
java scriptが動作するようになります。
■禁止タグが動作しない場合のチェックポイント
・改行を全部消してコードを書いてみる。
例
<pre class="eval">$(function(){var i='0'});</pre>
・ちゃんと禁止タグが’<sc’+’ript>’のように分割されているか。
あとがき
今回のは少々説明が難しかったorz
ただ使い道としては、iframe表示しか思いつかないｗ
何か本文中で禁止タグのいい使い道があれば教えてくださいな。
ご質問あればコメントまでお願いします。
1 ■こんにちは
ウチのブログ、動画を貼り付けるってこと滅多にしないので細かく調べませんでしたが、｢Naverまとめ｣かなーりいいんでちょっびだけ触れてみました。
なーる。自分でもなんとなくできそうです。
youtubeの動画を1記事にたーくさん並べて表示してるブログはコレでまとめれば見るヒトもラクになりそう。