一回目の投稿では、理由があってうまく行く事がありますが、更新すると動かなくなります。いくつか要点があって、これを知らないとことごとく失敗するので注意して下さい。結論から言うと、頑張れば、たいていはなんとかなると思います。
スクリプト要素は DIV 要素内に書く
これをやっておかないと、Tumblr では スクリプトタグそのものをふつうの文字列と判断して、スクリプト要素内の改行に BR 要素を付加してしまうので全く動作しなくなってしまいます。全ての改行を取り除く方法もありますが、後からの変更が大変なので、DIV 要素内に入れて下さい。
要素に使えない拡張属性は消されてしまう
これは仕方の無い事ですが、ものによってはそれが無いと動かないスクリプトや貼り付けコードがあります。例えば、pixiv の画像の貼り付けコードは以下のようになっていて、本来存在しない属性( data-id 等 )があります。
<script src="http://source.pixiv.net/source/embed.js" data-id="32781938_1209156501636af5f39fc475b19caf1e" data-size="medium" data-border="off" charset="utf-8"></script><noscript><p><a href="http://www.pixiv.net/member_illust.php?mode=medium&illust_id=32781938" target="_blank">魔法の湖</a> by <a href="http://www.pixiv.net/member.php?id=624362" target="_blank">night wálker</a> on <a href="http://www.pixiv.net/" target="_blank">pixiv</a></p></noscript>
これを使えるようにするには、結構な努力が必要になります。まず、全てを文字列に変換して、document.write で書きだすようにします。
文字列の変換は、こちらの JavaScript ボタンを使って下さい。
但し、これだけだと文字列中の > と < が > と < に変換されてしまうので、String.fromCharCode(0x3c) と String.fromCharCode(0x3e) を使って以下のように書き換える必要があります。
<div>
<script type="text/javascript">
str="";
str+=String.fromCharCode(0x3c)+"script src=\"http://source.pixiv.net/source/embed.js\" data-id=\"32781938_1209156501636af5f39fc475b19caf1e\" data-size=\"medium\" data-border=\"off\" charset=\"utf-8\""+String.fromCharCode(0x3e)+String.fromCharCode(0x3c)+"/"+"script"+String.fromCharCode(0x3e);
document.write(str);
</script>
</div>
これでやっと使えるようになるのですが、なかなか大変です。実際埋め込んでみたのがこちらになります。
pixiv の埋め込みコードの場合、ここまでして使う理由はありませんが、JavaScript を使った埋め込みツールは使えるにこした事はありません。日本の HTML を書き込めるブログでこういう事はまずありませんが、複数のブログを気軽に使える Tumblr のような存在は貴重なので、攻略方法は知っておいたほうが良いと思います。
posted by
at 2013-02-01 03:13
|
Tumblr
|

|