【WordPress】 Chromeでリロードをすると文字サイズが変化する問題(その2)

前回の記事にコメントを頂いたので追加でいろいろ調べてみました。
やはりChromeのバグのようですね。

前回の記事
【WordPress】 Chromeでリロードをすると文字サイズが変化する問題

スポンサーリンク

どんな問題だっけ?

WordPressで作成したWebサイトをChromeで表示させるとフォントサイズが大きくなることがあるという問題です。
リロードで大きくなったり戻ったりと文字のサイズが安定しないのです。

chrome_bug_03

コメントでもう私の環境では再現しないと書きましたが、別サイトのテスト用に追加していた子テーマのCSSをごっそり削ったら再発しました。
嘘書いてしまいました。
申し訳ないです。

しかしこれが解決のヒントになりました。

Chromeのデベロッパーツールについて

Chromeの画面で右クリックをして「要素を検証」を選ぶと画面の下にデベロッパーツールが立ち上がります。F12でもOKです。

chrome_bug_05

これはクラス名や有効なCSSを確認するときに使います。
Webサイトを作成するときに(特にうまくいかないときに)非常に便利なツールです。

フォントサイズが変わる問題であれば無効になったフォントサイズの指定を子テーマで再度指定すれば解決するかと思いアドバイスをしましたが、このツールでは判別できないようです。
細かく書くと、後述の「サイトの基準フォントサイズ指定」は有効でも常に無効扱いになっているのです。

chrome_bug_07

もっと簡単な解決方法がありましたので、この件は一旦置いておいてください。

どんなバグか

twentytwelveのstyle.cssは以下のように設定されています。

html {
font-size: 87.5%;
}
body {
font-size: 14px;
font-size: 1rem;
}

始めの87.5%は「Web基準フォントサイズの16pxを87.5%にしてこのサイトの基準フォントサイズにするよ」という意味です。16×0.875=14となりこのサイトの基準フォントサイズは14pxで、これが1remという単位になります。
例えば1.285remと指定すると14×1.285=17.99となり18pxになるというわけです。

次に
font-size: 14px;
font-size: 1rem;
と並んでいますが、1rem=14pxと指定しましたのでこの2行の内容は同じです。
同じ要素の指定は後に書いたものが優先されるため、最近のブラウザであれば1remが有効になります。remを使えない古いブラウザのために14pxも指定しているということです。

ところがChromeではバグではじめの87.5%で決めた基準フォントサイズ14pxが無効になることがあるのです。
つまり1remがWeb基準フォントサイズの16pxとなり、1rem(=14px)、100%(=14px)で指定しても16pxで拡大されて表示してしまうのです。
前回の記事で「1.15倍に大きくなった」と書いていましたが16/14=1.142ということだったようです。

対策方法

簡単に治す方法が3つあります。

①子テーマを設定していないなら

テーマのstyle.cssを直接変更します。
body {
font-size: 14px;
font-size: 1rem;
}
1remの”r”を削除します。
これだけです。

font-size: 1em;
と言う表記になります。

emも基準の何倍かという相対指定ですが、「その場所に設定してあるフォントサイズの何倍か」という内容になります。
remは「サイトの基準フォントサイズの何倍か」ですが、この場所では同じように機能します。

emについて少し説明をすると、
例えば1.2emでも5つ重ねると文字が極端に大きくなってしまいます。
14×1.2=16.8で17pxのつもりでいても35pxになってしまうのです。
サイトの構成が複雑で入れ子構造が多くなるとこのような問題が出てきます。
このため最近では「サイトの基準フォントサイズの何倍か」をずばり指定するremが使われています。

chrome_bug_09

chrome_bug_11

今回の場合は1em、すなわち1倍で指定していますので、いくら掛けあわせても1倍にしかならないということです。

具体的な直し方ですが、ftpを使っていないならダッシュボードの「外観」→「テーマ編集」を選び、使っているテーマのstyle.cssを編集し「ファイルを更新」ボタンを押して終了です。

chrome_bug_13

ただしこの方法には2点懸念事項があります。

テーマのstyle.cssを直接変更しているため、テーマのアップデートでstyle.cssが更新されると上書きされてもとに戻ってしまうのです。
アップデート後に再確認して、再発しているようであれば再度同じ対策をする必要があります。

もう一つはオリジナルのテーマそのものに手を入れているため、記述を間違えたり別のカスタマイズに影響が出たりして元に戻したくなっても、オリジナルのソースが分からなくなってしまうことです。
出来る限りFTPでバックアップを取りながら変更したほうが安全です。

②子テーマを作っているなら

子テーマのstyle.cssに
body {
font-size: 1rem;
}
を追加すれば直ります。

chrome_bug_15

親テーマと全く同じ指定をもう一度するということです。

 ③絶対指定でフォントサイズを指定し直す

remや%でなくpxで指定をし直せば「サイトの基準フォントサイズの何倍か」という決め方ではなくなるため、この問題は表面化しません。
記事本文に該当するCSSに
font-size: 14px;
などを追加すれば直ります。

例えば、

chrome_bug_17

chrome_bug_19

問題が出たらそこを直すというもぐらたたき的な方法のため、チェックで漏れが無いかが重要になります。
ぱっと見では記事本文でしかこのバグが発生していないようですが、本当のところはわからないためちょっと不安が残ります。

最後に

原因がバグなので直る理由はよく分かりませんが、私の環境ではこれで直りました。
どうやら親テーマのbodyでfont-size: 1rem;を指定することで発動するバグのようですね。
WordPress界隈であまり話題になっていないのは、テーマをそのまま使うことは稀で細かくカスタマイズする人が多いためバグが表面化しにくいのかもしれませんね。

はせがわ様ありがとうございました。
お陰でスッキリしました。

スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメント

  1. はせがわ より:

    お世話になります。
    早速のご回答とわかりやすい解決策ページを新しく立てていただき本当にありがとうございます。

    図解つきで初心者の私にはとてもわかりやすく理解できました。

    内部構造などまったくわかっていないため、
    そういうことになっているのか、そういう決め事が書かれているのかと
    興味深く拝見しました。

    私は子テーマを作成していましたので ② にて解決策をやってみました。
    cssを編集したあと、キャッシュも削除(プラグイン)してみましたら
    見事にフォントが14ピクセル、初期設定で統一されたようです!
    ありがとうございます!
    何ページが開いてみた限り、ランダムに確認しても大丈夫そうですので、
    これで様子をみてみます。

    作成時や閲覧時の改行設定など、なんかムズムズしていましたので、
    とてもスッキリしました。

    お忙しいなかご教授本当にありがとうございました。

  2. m.smd より:

    私も同種の問題で悩んでいました。私の場合はtopページは正常に表示されるものの、個別記事で文字が大きくなりサイドバーが下にずれこむ現象でした。画面右クリックで再読込すると正常表示になりましたので、どうも子テーマがちゃんと読み込まれていないように思われました。検索でここにたどり着きました。情報ありがとうございます。
    私の場合は子テーマに親テーマと同じ
    body,
    button,
    input,
    select,
    textarea {
    color: #000;
    font-family: Verdana, sans-serif;
    font-size: 14px;
    font-size: 1.4em;
    line-height: 1.5;
    }
    を書いたところ今のところ正常に表示されています。

    Themesは「aplos」で最近変えたところでした。chromeバージョンは39.0.2171.65で最新です。
    雨男さんとは若干違う現象でしたが、どなたかの参考となればと思い、コメントする次第です。

  3. より:

    たびたびお邪魔します。「私の場合は子テーマに親テーマと同じ」と書きましたが誤りです。親テーマは1remで子テーマは1emとしました。最初のコメントを書いた後に気がついたのですが、子テーマを作っていない場合は「1em」で作っている場合は「1rem」と記述されていますが、その違いがよく分かりません。両方とも「1em」と思うのですが。。。
    ちなみに、私の場合は子テーマに1remでも1emでも同じように正常に表示されます(前のようにレイアウトが崩れるということはなくなりました)

    PS.
    続けてのコメントを拒否設定されているのでしょうか、名前t等を変えました。

    • 雨男 より:

      コメントありがとうございます。

      コメント表示の件、メールまで頂き恐縮です。
      スパムが多いので承認制にしているのです。

      ご指摘頂いたように子テーマの場合は「1rem」だけでなく「1em」にしても機能します。
      ただテーマの構造や各ユーザーのカスタムを全て把握しているわけではないので、出来るだけオリジナルと同じ指定にしたほうが二次災害が出にくいと判断して子テーマの場合は「1rem」のままにしたのです。
      「不特定多数に公開するならどちらかと言えば「rem」と書いておいたほうが安全かなぁ」というレベルの話です。
      今お使いのテーマで問題が出ていないならその対策でももちろんOKです。

      すこしAplosも覗いてみました。
      まずhtml{}で指定されている基準フォントサイズが違うようですね。
      TwentyTwelve 87.5%(14px)
      Aplos 62.5%(10px)

      そして同じフォントサイズ(14px)にする指定方法も違います。
      ●TwentyTwelveの場合
      body {
      font-size: 14px;
      font-size: 1rem;・・・基準フォントの1倍を指定
      }
      ●Aplosの場合
      body {
      font-size: 14px;
      font-size: 1.4rem;・・・基準フォントの1.4倍を指定
      }

      もしAplosでバグにより基準フォントサイズが10pxから16pxに戻ってしまった場合、16px×1.4remで22.4pxと極端に大きくなったのではないでしょうか。
      このようにテーマやカスタマイズによってCSSの構造が異なるので、症状や対策も変化するのだと思います。

      相手にしているバグの挙動や直る理由が今ひとつはっきりしない上にテーマも無数にありますので、やっていただいたように「font-size指定の周辺が怪しい」と睨んでいろいろ試してみる方法が正解なのではないかと考えています。

      また何か情報がありましたら是非教えて下さい。
      ありがとうございました。

  4. より:

    雨男様

    非常にわかりやすい解説をありがとうございます。
    よく分かりました。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA