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

アメブロでiframe(インラインフレーム)を使う方法

2010年11月25日 23時53分27秒
テーマ：アメブロ小技・大技

2010/12/13追記：より一般的に使えそうなアメブロの禁止タグを使う方法の方がいいかもしれません。

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

今回の内容は、ごく初心者の方には難しいかもしれませんがご了承ください。

アメブロは記事でiframeタグが『禁止タグ』となっているため使えませんよね。

iframeは、Webページの一部を切り抜いてその中に別のWebページの内容を表示する仕組みで、これができると基本的には何でもありな感じになるので禁止されているのでしょう。

実は、僕自身、iframeを使って表示したいものがあるのですが、残念ながらそのままではできないんです。

でも、僕はそんなことではくじけませんよ。

というわけで、今回は、アメブロの記事内で無理やりiframe(インラインフレーム)を使うカスタマイズ方法です。

iframeが使えるようになると、例えばこんなものが表示できるようになります。

他にも、別サーバーにアップロードしたフラッシュムービーや何かしらのフォームなど、工夫次第ですごく色んなものが表示できるようになりますので、楽しみが広がると思いませんか？

では、実際にやってみましょう。

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

以下の内容をフリープラグインに追加してください。

<!-- アメブロでiframe(インラインフレーム)を使う方法 -->
<script type="text/javascript"><!--
$(function(){
  $("div.iframeCreate").each(function(i, O){
    var tag = 'iframe';
    var attrs = new Array("src", "width", "height", "frameborder", "scrolling", "marginwidth", "marginheight");
    for(var i in attrs){
      if ($(O).attr(attrs[i])) {
        tag += ' ' + attrs[i] + '="' + $(O).attr(attrs[i]) + '"';
        $(O).removeAttr(attrs[i]);
      }
    }
    tag = "<" + tag + "></iframe>";
    $(O).empty();
    $(O).append(tag);
  });
});
//--></script>

これで、準備OKです。

次に、実際に記事にiframeを設置します。

まず、設置したいiframeタグが次のものだったとします。

<iframe src="http://・・・" frameborder="0" width="460" height="540"></iframe>

iframeは『禁止タグ』ですのでこのままスンナリ書くことはできません。

そこで、赤字の部分を以下のように書き換えます。

<div class="iframeCreate" src="http://・・・" frameborder="0" width="460" height="540"></div>

つまり、開始タグのタグ名『iframe』を『div class="iframeCreate"』に書き換え、終了タグ『/iframe』を『/div』に書き換えます。

これだけです。

簡単ですよね。

この方法を使うと、貼り付け用タグが『iframe』なサービスをアメブロで利用しやすくなるかもしれませんね。

ちなみに、今回の方法はちょっと強引な方法ですので、何でも大丈夫というわけにはいかないかもしれませんが、僕が表示したかったものは表示できましたのでご紹介することにしました。

なお、今回のカスタマイズは、IE7、IE8、Firefox3.6、Chrome6.0、Safari4(何れも Windows版)で効果があることを確認しています。

よろしければお試しください。