広告

posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「Big Bang」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

ファンブログでは記事中にCSSは書けない

前記事「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タグを使うのはキライなのですが、
1記事にだけスタイルを適用したい時は使っています。

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

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

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

その方法とは、.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>

新ブログ「Big Bang」で続きを読む