FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

Firefox等でCSSが反映されないときは

IE,OperaだとCSSが反映されるのに、Firefox,Safariでは反映されないときの原因として「全角文字」があります。

特にプロパティからコメントアウトまでのスペースに全角スペースを入れてしまうと、視覚的に発見するのは難しいです。

【誤りの例】

.class {
font-size:10pt;　/* コメントの前に全角スペース */
color:#ffffff;
}

font-size:10pt; から /* コメントの前に全角スペース */ の間に全角スペースが含まれた場合、font-size は効きますが、全角スペースの次のプロパティ color が効かなくなります。

Firefoxでスタイルシートが効かないと思ったらまずこの全角スペースが含まれていなか確認してください。

【正しい例】

.class {
font-size:10pt; /* コメントの前に半角スペース */
color:#ffffff;
}

半角スペースであればいくつ連続しても問題ありません。

関連記事

IEで改行タグ<br>を連続しても改行されないバグについて (2009/12/01)
Firefox等でCSSが反映されないときは (2009/08/19)
表示が崩れる原因の調査手順 (2009/08/15)
記事内下部のアカマイ広告 (2009/04/09)
テンプレートを変えたら表示が崩れた (2008/06/01)
カラムが落ちる(下に表示される)のは何故か？ (2006/12/09)

[ 2009/08/19 02:44 ] Q&A トラブル解決 | TB(1) | CM(12)

≪ プラグイン３をプラグイン１と２の上に表示する | HOME | 同ページ内リンク（ページトップへ戻る） ≫

[ 5523 ]

昨日の左右振り分けカスタマイズ(コメント欄用)
http://tanpoko.blog70.fc2.com/blog-entry-835.html
ですが、全角スペース部分があったので元記事も自分のスタイルシートも訂正したのですが、やはり解消されず…(´；ω；`)

記事タイトルのほうは相変わらず大丈夫みたいです。
あえて半角スペース部分を全角にしてみたのですが、それでも変化無くちゃんと表示されました。

さくらいさんのはFirefoxでも大丈夫なようですので、私の場合は先にやっているカスタマイズ(管理人コメントの場合はコメントタイトル部分の色を変える)と合わないのかもしれません。
記事で紹介しておきながら自分が出来ないとは(涙)

お手数お掛けしましたm(__)m

[ 2009/08/19 14:15 ] [ 編集 ]

[ 5525 ]

standardを使わせてもらっているのですが、コメントの表示をlightframeみたいにすることはできますでしょうか？
（コメント一つ一つを枠で囲うようにしたいです）

[ 2009/08/19 19:27 ] [ 編集 ]

[ 5529 ] > ちゃんさん

ちゃんさんのスタイルシートには、.comment_date{} の前に、全角スペースを含んだ行があるようです。

.ちゃん1{display:inline;
color:#cc99cc;　　　　　　/* 文字色 */
}

全角スペースの次にくるプロパティかID,クラスのセレクタが無効になってしまうようです。この全角スペースを取り除いてみてください。

他にも数カ所全角スペースがあるようです。検索オプション「大文字と小文字を区別する」で検索すると見つかります。

> あえて半角スペース部分を全角にしてみたのですが、それでも変化無くちゃんと表示されました。

win,mac共に試みたのですが、私の環境では無効になりました。この現象を再現できないと解決が難しいですが、もし何か解ればまたお知らせしますね。

[ 2009/08/19 20:23 ] [ 編集 ]

[ 5531 ] > かぼすさん

記事にするのでもうしばらくお待ちください。

[ 2009/08/19 20:36 ] [ 編集 ]

[ 5533 ]

ありがとうございますm(_ _ ")mペコリ

[ 2009/08/19 21:00 ] [ 編集 ]

[ 5534 ] > かぼすさん

そう言えばこの記事を過去に書いたのを忘れてました＾＾；
こちらの記事を参考にしてください。

standardシリーズのコメント欄を一つずつ枠で囲み分ける
http://10plate.blog44.fc2.com/blog-entry-153.html

[ 2009/08/19 22:28 ] [ 編集 ]

[ 5535 ] いたおさんへ

メインブログ・サブブログ共に全角スペースを全部直しました。
まさかあんなにいっぱいあるとは…
他の箇所は普通に表示されていたので全く気付きませんでした。
いたおさんに感謝です(*´ω｀)

カスタマイズをする時は必ずFirefoxでも確認するのですが、コメント部分だけスタイルシートが効かなかったので、私のカスタマイズとの折り合いが悪いから仕方ないと思い込み…(汗)

全てのブラウザに合わせるのはなかなか難しいですね。

[ 2009/08/19 23:36 ] [ 編集 ]

[ 5536 ] > ちゃんさん

スタイルシートから全角スペースが消えましたね。これでFirefoxでもカスタマイズが反映されるはずですよ。

私もブラウザによる表示の違いにはいつも悩まされます＾＾；

[ 2009/08/19 23:56 ] [ 編集 ]

[ 5540 ] 少し前から拝見させて頂いてます

今回のいたおさんの記事とは全く関係のない質問になってしまうのですが…
教えて頂きたいことがあったので質問させて頂きました。

私もブログを作成させて頂いてます。
何と説明したらいいのか分からないのですが…
ブログの画面の見方(サイズ)によってブログの内容が引き伸ばされたり、収縮したりします。
いたおさんのブログのように、画面のサイズを変えても収縮したり引き伸ばされることなく一定にしたいんです。
もしよければそのやり方を教えて頂けないでしょうか？
他に聞ける相手もいませんので…良ければ宜しくお願い致します。

[ 2009/08/20 12:39 ] [ 編集 ]

[ 5543 ]

すいませんでしたm(_ _ ")mペコリ
無事できました

一回同じ事をしたのですがコメントの背景が真っ黒になりまして・・・ｗ

もっとよく見ればよかったです

[ 2009/08/20 17:32 ] [ 編集 ]

[ 5549 ] > キヨさきさん、かぼすさん

> キヨさきさん
幅を%で指定しているところをpx等の固定値で指定してください。URLを教えてくれればもっと具体的に指摘できると思います。

> かぼすさん
手こずったようですが、出来て良かったです＾＾；

[ 2009/08/20 18:20 ] [ 編集 ]

[ 9173 ] 承認待ちコメント

このコメントは管理者の承認待ちです

[ 2013/09/02 20:05 ] [ 編集 ]

コメントの投稿