サポート » テーマ » 投稿のプレビューでCSSが反映されません

  • Calotropis』(Version: 1.5.2)はテーマデザインやメニューなどのカスタマイズ機能が豊富で気に入っているのですが、投稿のプレビューでCSSが反映されず困っています。
    ググってみたところ同じ様な症例がいくつか散見されました。
    その中に、[アイキャッチ画像が原因ではないか?]という記述が見つかりましたが、アイキャッチ画像を外しても変化は見られませんでした。
    また、全てのプラグインを外してプレビューを試みても同様でした。
    『Calotropis』に限らず、投稿のプレビューでCSSが反映されない要因はどんなことが考えられるのでしょうか?
    どなたかご教示いただければ幸いです。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • ご指摘のテーマを使用したことがないので分からないのですが、プレビューとはテーマに備わっている機能なのでしょうか?

    キャッシュ系のプラグインは使用していないこととして、
    単純に、投稿を確認する といったリンクからページを表示しても、CSSは更新されないと思います。

    単にブラウザのキャッシュを更新すればよいのではないでしょうか?
    それでも、反映されないのであれば、CSSの記述を確認してみることも必要になると思います。

    トピック投稿者 fujichan

    (@fujisan)

    ご指摘ありがとうございます。
    『プレビュー』は普通に投稿で下書きしたものを『変更をプレビュー』ボタンで見ようということで、通常の行為です。
    この『変更をプレビュー』時に適用したテーマのCSSが反映されるわけですが、『Calotropis』のCSSは『変更をプレビュー』時になぜか反映されないのです。
    質問前にブラウザのキャッシュを更新なども行いましたがダメでした。
    大事な事を忘れていました。
    『Calotropis』のCSSは、オプションでヘッダーや背景、コラムレイアウトなどがカスタマイズできる構造で、共通スタイル以外は『style.php』や『layout.php』などでテーマオプションから指示する仕組みで、更に『カスタムCSS』なども用意されていてかなり複雑な構造です。
    テーマの構造自体がwordpressの『変更をプレビュー』の指示規約?に合っていないのかもしれません。

    取り急ぎ、wp 3.0.1と3.0.4上で、『Calotropis』(Version: 1.5.2)を確認しました。
    CSSで設定できる機能があまりに多いので、全ての機能を確認したわけでは
    ありませんが、少なくともfirefox3.6とIE7では問題なくプレビューできます。

    少なくともCalotropis Theme Optionsで設定した、Column Layoutは反映されています。
    テーマの構造自体より、サーバ側利用環境や、クライアント側の問題のように思われます。

    以下、確認してください。

    プレビューと、投稿後のHTMLソースを比較して、<head>ないの<link rel=”stylesheet” href=…>に違いがありませんか?特に、<link rel=’stylesheet’ id=’itx-css’ href=’…’>はきちんとありますか。

    ファイアーウォールなどでブラウザのリファラーを遮断していませんか?
    こちらで試した範囲では、itx-cssの方は、プレビューのときはCSSのアドレスを直接たたくとなぜかCSSではなく、HTMLが帰ってきているようです。

    もし、firefoxで確認できるようなら、プレビューの状態でソースコードを表示し、itx-cssのソースが適切なCSSが帰っているか、確認してみてください。

    それから(順序が逆ですが)、初めての方は必ずお読みください をお読みいただいて、ブラウザなど環境を示してください。
    特にCSSに絡むようなものは、環境が分からないと、どうしようもありませんので。

    最後に、「CSSが反映されません」というのは、どういう状態か分かりません。
    特定の項目(レイアウト)だけが反映されないのか、CSSが一切されないのか、
    style.cssだけが反映されているのか、どういう状態なのでしょう?

    トピック投稿者 fujichan

    (@fujisan)

    aimaim様、ありがとうございます。

    失礼しました。ブラウザはGoogle Chrome8.0、FireFox3.6、Internet Explorer8、Opera11.0など、仕事柄色んなバージョンを使用し、チェック済みです。
    尚、稼動サーバーは、OS:Linux CPU:Xeon L5410 Apache:2.2.3 Perl:5.8.8
    MySQL:5.0.77 PHP:5.1.6、5.2.14、5.3.3(切り替え可、確認時は5.1.6、現在は5.3.3) です。

    「CSSが反映されません」という現象は以下をご参照下さい。
    ようこ/イリさんのページ:http://wilfulcat.com/naisho/2010/09/02/4057
    (私の該当サイトは仕事の取引先の試作段階で公開できませんのでご容赦下さい。)

    プレビューと、投稿後の<head>内の<link rel=”stylesheet” href=…>に違いはなく、<link rel=’stylesheet’ id=’itx-css’ href=’…’>は、

    投稿ページ:<link rel=’stylesheet’ id=’itx-css’ href=’http://***/?itx=css&ver=3.0.4&#8242; type=’text/css’ media=’all’ />

    プレビューページ:<link rel=’stylesheet’ id=’itx-css’ href=’http://***/?preview=true&preview_id=1&preview_nonce=391c9aa40b&itx=css&ver=3.0.4&#8242; type=’text/css’ media=’all’ />

    となっていました。

    ブラウザのリファラーの遮断については、設定を確認しましたが、他のテーマではきちんとプレビューできている為問題ないと思われます。

    FireFoxでプレビュー時のitx-cssのCSSを確認しましたら、
    @import url(http://***/wp-content/themes/calotropis/css/ui/base/jquery.ui.core.css);@import url(http://***/wp-content/themes/calotropis/css/ui/base/jquery.ui.tabs.css);
    @import url(http://***/wp-content/themes/calotropis/css/ui/ui-lightness/jquery.ui.theme.css);
    と冒頭にあり、以下上から順に、menu、content、navi and friends、comments、Sidebars、footer、calendar、 Header and links…などは設定どおり正常に返ってきているようでした。
    (FireFoxでプレビュー時のitx-cssのCSSの正常な反映と比較が出来ないので確証はありません。)

    稼動サーバーにPHP高速化設定の切り替え(即時反映)がついている為、無効に切り替えたり色んな事を試してみましたが変化は見られませんでした。

    他のサイトなどで、たまにCSSが反映されない状態を見かけたりしますが、リロードすると表示されたりします。
    今回のケースでは、キャッシュクリアしてからリロードしたりしましたが、改善しませんでした。

    原因が特定できないままですが、どうやら『サーバ側利用環境や、クライアント側の問題のよう』だと分かりました。引き続きご教示していただけると助かります。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「投稿のプレビューでCSSが反映されません」には新たに返信することはできません。