アメブロ禁止タグを使う方法

2010年12月13日 22時46分50秒
テーマ：アメブロ小技・大技

こんばんは、アメブロカスタマイズのわざメーバです。

以前、アメブロでiframe(インラインフレーム)を使う方法というのを紹介したんですが、今回、iframeだけでなく、通常は記事や、メッセージボード、フリースペースなどで使用できないタグをもっと汎用的に使えるように考えてみましたので紹介します。

これにより、記事にiframe(インラインフレーム)を埋め込んだり、限定的ではありますが、メッセージボードやフリースペースをフリープラグインのかわりに利用するというようなことも可能になります。

例えば、RuTubeの動画を貼り付けたり、

ほかにも、記事にフォームを設置したり、スクリプトを呼び出すボタンを置くこともできます。



ただし、scriptタグは、かなり限定的で動かないものが多いですし、scriptタグでなくても場合によってはうまく貼り付けできない場合もありえますのでご了承ください。

ちなみに、『document.write』が使われているとほぼ全滅です。

では、やり方です。

今回は、『フリープラグインを使用』します。

まずは、禁止タグを無理やり使えるようにする準備として、フリープラグインに、以下のように追加してください。

<script src="http://hana.poche.jp/wazameba/js/waza11.js"></script>
<script>
  $(function(){prohibitedTagsUse();});
</script>

赤文字の行は、フリープラグインに1度だけ書かれていればOKなので、既に書かれている場合は不要です。

これで準備OKです。

なお、この『準備』は一度やっておけば今後する必要はありません。

では次に、実際に貼り付けたいもののタグを書きます。

例として、普通やらないとは思いますが、Yahoo!をiframe内に表示してみたいと思います。

が、もちろん今回貼り付けたいのは禁止タグ(iframe)なので、そのままでは貼り付けできませんので、以下のように書いてください。

<div class="createTag"><!--
<[iframe width="300" height="200" src="http://www.yahoo.co.jp"]><[/iframe]>
--></div>

ポイントは3つ。

まず、禁止タグとなっているタグの『<』や『>』を、『<[』『]>』に書き換えてください。

次に、タグ全体を<!--と-->で囲んでコメントアウトします。

そして、それをさらにclass="createTag"なdivやspanなどで囲んでください。

すると、このようにして書いたタグを、上で『準備』したプラグインスクリプトが、通常のタグとしてその場所に貼り付けてくれるようになっています。

また、タグ名以外にも、『onclick』など、属性で禁止されているものもありますが、その場合は、適当な場所に『{}』を挟み込んで『on{}click』のようにすると、『{}』部分が無視されて、貼り付けられるタグでは『onclick』のように繋がるようにしてあります。

という感じです。

ちょっと難しいかもしれませんが、うまく使えると色々できますので、よろしければチャレンジしてみてください。

なお、IE7、IE8、Firefox3.6、Chrome6.0、Safari4(何れもWindows版)で動作を確認していますが、もし不具合があれば連絡してくださると嬉しいです。