前記事「amazonで作る金環日食のネットショップ」をアップする際に大変ハマったので注記。

「amazonで作る金環日食のネットショップ」を見てもらえばわかるのですが、
あの記事だけ右のサイドバーを消しています。それ自体は別段難しい処理ではないので、
ローカルでテストした時は簡単に実現できました。

しかし、ファンブログで公開するとサイドバーが消えない。なんで？

ソースを見ると、記事中に書いたstyleタグの中身が消えている！

実際に使っているCSSは次の内容です。

table#index,p#index_afi,
div#info,div.entryDate,
div#sidebarRight,div.entryInfo,
p#dstext,div#ds,h3#trackbackTitle,
div#trackbackText,div#commentform{display:none;}
h2.entryTitle,#footer{clear:both;}
#wrapper{width:917px;}
#content{width:747px;}
#entries{margin:0;padding:0;}
#entries .entryBody{padding:10px 0 0 0;}
#entries .entryContinue{margin:0;}

この通り摘要されれば、あの記事のとおりに表示されるのですが、されない。
それもそのはずで、ソースの{から}の部分が全部すっぽりとなくなっていました。

セキュリティ上の設定なのでしょう。

私自身、本当はbody内にstyleタグを使うのはキライなのですが、
１記事にだけスタイルを適用したい時は使っています。

ブログの時はそうしないと他の記事に無駄なソースを渡すことになるのでそうしています。

とはいえ、安全性を考慮した結果だと思うので、この設定に異論はないです。ではどうするか？

ということで、以前の記事「ブログでクルクルスクロール」の方法を使おうと思いました。

その方法とは、.cssファイルの拡張子を.jpgに変えてアップするという方法で、
その記事に書いていますが非常に危険なやりかたです。

でも、ファンブログだけで完結させたかったので、やってみました。

しかし、出来ない！

送られてきたレスポンスヘッダを見ると、Content-typeが image/jpegで送られてきている！

サーバーの設定を直したんですね？いいことですよ、とっても。

でも、困ってしまった。

仕方がないので、ファンブログ内だけで完結させるのは諦めました。

別サーバーに置いたcssを読むようにしたら、キレイに出来ました。

以下、「amazonで作る金環日食のネットショップ」のソースです。

<script type="text/javascript">
var css=document.createElement('link');
css.setAttribute('type','text/css');
css.setAttribute('rel','stylesheet');
css.setAttribute('href','CSSのURL');
var head=document.getElementsByTagName('head');
head[0].appendChild(css);
</script>

<iframe src="amazonのiframeのURL" width="100%" height="4000" frameborder="0" scrolling="no"></iframe>