サポート » テーマ » Raindropsテーマ使用時のブラウザによる表示の違いについて。

  • テーマはRaindropsを使用しています。

    1週間ほど前からIE9での表示が変わってしまいました。
    Google ChromeなどIE9以外のブラウザでの表示は従来と変わらないのですが、IE9のみ表示のフォントサイズやヘッダー画像の大きさが変わってしまいました。

    URLはwww.kikirauza.comです。

    当フォーラムに別件で抜粋表示のコード入力をした際には問題なく表示されたのですが、その後しばらくしたら見え方が変わってしまいました。

    特にphpなどを変更はしていません。
    初心者ゆえの技術的な間違いなどあるのかもしれません。

    修正する方法などございましたらお教え下さると助かります。
    どうぞ、よろしくお願いいたします、

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • モデレーター gatespace

    (@gatespace)

    ※「テーマ」に移動します。
    【重要】 お読みくださいには投稿しないでください。

    こんにちは

    Raindropsテーマを使っていただきありがとうございます。

    ie9 及び、chromeで拝見しましたが、どちらも同等の表示になっているように見えます。
    (きっちり測定していない、見た目の判断で申し訳ないです)

    ご利用ののバージョンは、WordPressでライブになったのが8月26日ですので、1週間前という事は、タイミング的には、ピッタリ合います。

    今回のバージョンでは、テーマカスタマイザーでの背景画像の位置指定やリピートが正常に動作しないというバグの修正でしたが、ヘッダーイメージやサイトタイトルの文字の大きさに関する変更は行っていません。

    今のところ、原因を見極める事が出来ません。

    修正方法について

    Raindropsテーマは、簡単なブラウザ判定機能を持っており、IE9でアクセスした場合には、bodyのクラス要素に、ie9というクラスが自動設定されているので、まず、ご確認ください。

    このクラスを使う事で、ブラウザごとの表示の不具合を安全に修正する事が出来ます。

    サイトタイトルのスタイル修正例
    style.cssの最終行に、 (動作確認済み)

    .ie9 #site-title a span{
    	color:red;
    }

    他にも、フィルタなどを使ってスタイルを変更する事も出来ますが、まずは、上記の方法をお試しいただき、うまくいかないようであれば、お手数ですが再度 書き込みください

    URLはwww.kikirauza.com は、URLは
    http://www.kikirakuza.com
     でいいんですよね

    トピック投稿者 yamaguchi

    (@yamaguchi)

    お世話にまります。

    投稿場所を間違えまして大変失礼しました。

    早速のご返信ありがとうございます。
    URLは
    http://www.kikirakuza.com
    でOKです。

    style.cssの最終行に、

    .ie9 #site-title a span{
    color:red;
    }

    を記入してみましたが変化はありませんでした。
    現在は上記のcss修正前の状態にに戻してあります。

    表示が変化してしまった詳しい状態は
    ヘッダー画像の950pxの幅が30%(見た目ですが)程度上下左右が小さくなっている。
    テキストが小さくなっている
    全体のカタチが縮小されたように表示される。

    この表示状態に気付いてダッシュボードを開いた時に
    「お使いのブラウザは安全ではありません
    IEが安全ではいバージョンをお使いのようです」
    との案内が表示されるようになりました。

    現在はIE9の更新バージョンKB2722913の状態です。

    そのことが関係あるのかもしれませんが理由は不明です。

    何か手段がございましたらお教えいただけると助かります。
    どうぞよろしくお願いいたします。

    を記入してみましたが変化はありませんでした。

    スタイルルールは、IE9で、テスト用のサイトを表示した上で、テキストの色が、赤になる事を確認したので、何かしらの、環境的な違い(例えば、プラグインなどが持っているCSSとの干渉など)があるのかもしれません。

    現在は上記のcss修正前の状態にに戻してあります。

    よい判断です。以下の事を試す場合も そうしていただくといいと思います。

    ヘッダー画像の950pxの幅が30%(見た目ですが)程度上下左右が小さくなっている。
    テキストが小さくなっている
    全体のカタチが縮小されたように表示される。

    レインドロプスの画像表示の仕組みから考えると、レインドロップスの場合、ヘッダー画像を背景画像としてブロックサイズにうまくなじませるスタイルルール(CSS3のbackground-size:cover;)を使って表示していますので、
    #header-imageのサイズが、何らかの条件で、ページ幅の70%位に、変更される条件が整うと、画像がそのブロックにフィットするように縮小されます。

    この条件は、レイアウトの種類によって、ちょっと変わってきます。

    ページ幅が固定(750px 950px 974px)の場合には、ページ幅より小さいヘッダー画像の場合は、実寸でヘッダーの中央に、大きい場合は、ページ幅にフィットします。

    ページ幅が fluid の場合には、アップロード画像サイズにかかわらず、#header-imageブロックにフィットするように作っています。

    ( このあたりのコードは、ワードプレス3.4に合わせた機能なので、バグがある可能性は大いにあります )

    なので、現在950px幅の、レイアウトをお使いと思いますが、ページ幅の設定を、fluidに、変更してみていただいて、やはり、70%くらいの表示になるかどうか、フィードバックして頂けるとうれしいです。

    修正のためのほかの方法について

    ヘッダー画像を表示している、#header-imageのサイズをフィルタで変更する

    以下のリンクに、変更例があります。

    http://www.tenman.info/wp3/raindrops/2012/08/04/header-image-height-display-improperly/

    (fluidの場合は、ページサイズが変化するので、javascriptもつかって、#header-image幅、高さをコントロールしています。fluidでは、これは使えません。)

    より詳細度の高いスタイルの設定方法

    functions.phpに以下のPHPを書いていただければ、埋め込みスタイルの末尾に、スタイルが追加されます。syle.cssに記述するより、ルールが、より強く働きます。

    add_filter( 'raindrops_embed_meta_css', 'my_ie_style' );
    
    function my_ie_style($default){
    
    	$css = '.ie9 #site-title a span{color:red!important;}';
    
    	return $default."\n{$css}";
    }

    その他 functions.phpを古いものに戻す

    前バージョンのfunctions.phpへのリンクは、以下ですが、0.983 8/3 ライブ、0.982 7/19 ライブという風に、頻繁に変更があるので、原因がさらに前のバージョンの変更によるものである可能性もあるので、直らなかったら、すぐ元に戻してください。

    http://themes.svn.wordpress.org/raindrops/0.984/functions.php

    もし、可能であるならば、
    style.cssに、以下のスタイルを記述していただき、どのブロックが、どれぐらいのサイズになっているか、教えてください。

    #header-image,
    #top,
    #hd{
    border:1px solid red!important;
    }

    トピック投稿者 yamaguchi

    (@yamaguchi)

    詳細なご指導ありがとうございます。

    上記のご返信内容を読んで思い当たることがありました。

    従来よりヘッダーの画像(幅951px)使っていましが、ここ数週間前にヘッダーおよびフッターの背景を変更できるオプションが出来たことに気付き、デフォルトの画像を変更して全体を真っ黒にしようトライしました。が、カラーの設定では変更できずに「真っ黒」の画像(幅950pxよりずっと小さいと記憶しています)を作りヘッダーおよびフッターの背景としてアップロードしました。見え方としては真っ黒になっていましたが、その翌日から数日の間に現在のような状態になりました。

    そこで、951pxの真っ黒の画像を作りアップロードしてみました。
    これでスタイルルールに抵触しない画像の幅になると思いますので、これで数日のリードタイムを持って状態を把握したいと思います。

    状態が改善しない場合は他の方法をトライしてご報告いたします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「Raindropsテーマ使用時のブラウザによる表示の違いについて。」には新たに返信することはできません。