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

スポンサーリンク


2014年1月22日にA8.netのファンブログはSeesaa Blogのシステムをベースにして生まれ変わりました。よってファンブログ関連の記事は今では当てはまらない可能性があります。新しいファンブログのカスタマイズは別ブログ「ファンブログ テック」で詳しく書いていますので、そちらをご覧ください。

前記事「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>

関連コンテンツ

スポンサーリンク

「ファンブログでは記事中にCSSは書けない」への2件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください