【WordPress】スマホで自分のブログを見ると文字サイズがバラバラ…「書式設定をクリア」であっさり解決!

ブログ運営

こんにちは、とねっこです!

今はスマホからブログを読まれることが多いので、パソコンで記事を書いた後はスマホでもきちんと表示されるか確認する方が多いと思います。

でも、パソコンではきちんと文字の大きさがそろっているのに、スマホだとところどころバラバラになりませんか?(すべて同じ文字サイズで設定済みであるにもかかわらず。)

つい先日、私も同じようなことが起こったので原因を調べてみるとこのような解決方法が出てきました。

  • プラグインが悪さをしているかもしれないので、1つずつ停止にしてみる。
  • Cocoon設定の全体タブからサイトフォントを変更する。
  • 画像サイズが大きすぎるor小さすぎる。

一通り試してみたものの解決には至りませんでした。

当ブログはWordPressの無料テーマCocoonを使用しているのでCocoonフォーラムで質問しようとしたものの、ユーザー登録がうまくいかずに行き詰まってしまいました。

しかし、「書式設定をクリア」にするだけであっさりと解決したんです!

直す前の状態

まずこちらがパソコンで表示したときの状態です。

このようにパソコンでは文章全体の文字サイズがきちんとそろっています。

しかし、レスポンシブテストやスマホで表示すると、赤枠で囲った部分だけ大きくなってしまいます。

実際にその画面をご覧ください。

まずレスポンシブテストで表示

 

次にスマホで表示

両方とも赤枠で囲った部分が前後の文章の文字サイズに比べて大きいのが分かりますか?

これを同じ文字サイズにそろえていきます。

手順はたった2つ

1.「投稿記事一覧」から記事を開き、該当部分を「ドラッグ反転」します。

 

2.赤枠で囲った「書式設定をクリア」をクリックします。太字やマーカーなどの装飾をしていない場合はこれで終了です。

 

3.もし太字やマーカーなどの装飾をしている場合はそれらも一緒にリセットされます。

ちょっと面倒ですがもう一度設定をします。

4.更新前に、変更をプレビュー>レスポンシブテストから確認してみます。

↓   ↓   ↓


↓   ↓   ↓


きちんとそろっています。更新してからスマホでも見てみましょう。

↓   ↓   ↓


バッチリです。無事解決してよかった!

最後に

解決はしましたが、結局何が原因なのか分からないので若干モヤモヤが残っています。

私は文章の一部を強調したいときは、基本的に太字やマーカーを引いたり枠で囲うようにしていて一部の文字を大きくすることはほとんどありません。

何度も入力したり消したりを繰り返して、知らないうちに文字サイズを設定する何かに影響を与えてしまったのかも??

その原因やもっと簡単に直せる方法が分かり次第、記事にしていきたいと思います。

タイトルとURLをコピーしました