アメブロ本文中でjava scriptを使う詳しい方法 | AmebloEnjoyMethod

AmebloEnjoyMethod

アメブロカスタマイズ情報やhtmlやcss、jQuery等やライフハック記事をお届けしています。





移転前に書いた【アメブロで禁止タグを本文中に使う方法】の詳しい解説記事です。

アメブロの本文中で禁止タグを使う方法 ※追記あり


この方法を使えば、記事1つずつをカスタマイズしてブログをHPみたいに使えちゃいます。
(ブログをHPとして使う際に、使えばいいと思う。)
またメッセージボードにも設置出来るので、色んなカスタマイズをやってみては如何でしょうか?

禁止タグの使い方

1、フリープラグインに以下の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>


※注意事項

このコードを動かすには、先に記事本文が読み込まれていなければ動きません。
なので、フリープラグインが記事が読み込まれた後に読み込まれる必要があります。

例として3カラムで中央に記事カラムの配置の場合
読み込まれる順番がヘッダー、左カラム、右カラムなので、右カラムにフリープラグインを設置する必要があります。

配置の注意点

2、使いたい場所にscriptを記述する。

次にscriptを使いたい場所に、使いたいscriptを記述します。
今回のサンプルは2通り用意しました。


記述方法

<pre class="eval" style="display:none;">
// ここにjava scriptを記述する
</pre>

動作させたいscriptをpreタグの中に記述します。

※注意事項

・改行は無くす事。
アメブロの仕様で、改行が入っている場合、勝手に⁢br>が挿入され、動作しなくなります。

・編集画面でタブ移動をせずに記述する事。

IEやFirefox等のブラウザで記事を書く時には、【HTMLタグの表示】【タグの非表示】とタブがありますが、コードを記述した後に、【タグの非表示】に切り替えるとコードが改変されてしまうので、文章を書いた後にscriptを記述すればいいと思います。

記述時の注意点

下記画像の様に、最後に動かしたいscriptを記述して、そのまま公開。

見本画像

メッセージボードの手順も同じ様にすれば問題ありません。

本文中でscriptを動かした時のサンプル


下の例が本文中でscriptを動作させている例です。
アメブロの禁止タグであるiframeを使っています。




















記事内で禁止タグのサンプルコード

質問がありましたので、メッセージボードに最新記事のRSSを表示させるscriptの例です。


以前書いた
最新記事を自動でサムネイル表示を使って記事本文中でjava scriptを動作させています。

RSSのサムネイル表示のサンプルコード

<pre class="eval" style="display:none;">jQuery(function ($){jQuery("#message").html('<if'+'rame scrolling="no" frameborder="0" style="overflow:hidden;width:582px;height:312px;border:none;margin:0;padding:0;" src="http://fukugan.com/rssimg/rssimg.php?l=9&bg=%23FFFFFF&rp=2&cp=2&round=5&e=UTF-8&r=9&c=1&w=500&h=100&lpi=&skp=&st=tm&self=&ctg=N002&urls[]=http%3A%2F%2Frssblog.ameba.jp%2Famebloger-s%2Frss20.xml&ts=1294594896" ></if'+'rame>');});</pre>


ここで注目すべき点は、禁止タグの文字列を区切ることです。
そのまま表記してしまっては、記事投稿時に【禁止タグが入力されています】とエラーが出て、記事が投稿できないので'+'でうまく区切ってやってください。

またサンプルと同じ様に、iframeはこの様に本文中でも使えます。