スマホでブログを見た時にデザインが崩れていた!その解決方法と予防策について

ブログ

 

どーも、okuma(@okuma03)です。

このブログを始めて間もなくのこと。ある時スマホで自分のブログを確認した時にPCで見た時とデザインが違う事に気が付きました。

ブログをアップする時にはデバイス毎にどう見えるのか確認していたはずなのですが、どうもおかしい。。
調べまくってある原因にたどり着いたので今回はその事について記事にしました。

同じような事でお困りの方はぜひ一度チェックして見てください。

 

 

恐怖!ブログのデザインが突如崩れていた!

ある時、スマホで自身のブログを確認しようとツイッターからアクセスすると下記の写真のようになっていました。

 

 

 

下にスクロールすると、こんな感じ。

 

 

okuma

な、何じゃこりゃー!!((((;゚Д゚)))))))

トップページからして全く違うデザインになっとる・・。なぜにこうなった?

写真2枚目の「フルサイズ表示」というところをクリックすると、パソコンで見た時の画面となんら変わりない。。

しかし、このまま放っておく訳にはいきません!

 

ブログのデザインを解決する方法

色々調べまくってたら遂に原因を突き止めました。何やらJetpackが関係している様子。

ワードプレスを使っている方ならJetpackについて既にご存知かと思います。
※Jetpackとは、SNSへ自動共有などもしてくれるワードプレスで非常に便利なプラグインです。

どうやらこのJetpackの設定で、「モバイルテーマを有効化」していた事がデザインが崩れていた原因でした。

すかさず無効化して事なきを得ました。

下記の写真が無効化した状態です。 icon-hand-o-down

 

 

その後すぐにスマホでブログを確認して見ると、

 

 

okuma

お!いい感じ!!

 

念のため、下までスクロールして確認。

 

okuma

直ってるーーー!!!(*^◯^*)

おそらくJetpackをインストールした時に設定をいじくってしまったのが要因かもしれません。

 

今すぐチェック!ブログの見え方を確認しよう

今回は割とすぐ気が付いたので良かったのですが、このまま気付かずに放置していたらと思うと恐ろしいですね。。

皆さんにもすぐにブログの見え方を確認出来るやり方として2つご紹介します!
※説明いらないという方は下記クリックするとそのサイトに飛びます。

  1. モバイルフレンドリーテスト
  2. RESIZER(リサイザー)

 

モバイルフレンドリーテスト

まず、Googleが提供しているモバイルフレンドリーテストでご自身のブログがモバイル端末での使いやすさに適しているか確認してみましょう。

やり方はすごく簡単で、テストするウェブページの URL全体を入力するだけです!

テストして「このページはモバイルフレンドリーです」と表記されれば問題ありません。

icon-check-circle モバイルフレンドリーテストをやってみる

より詳しく知りたい方はこちら。

 

RESIZER(リサイザー)

2つ目はリサイザーです。

これは何とPC・タブレット・スマホでのブログの見え方を一括で確認できる優れもの!

やり方はこれまた簡単で、ブログのURLを入力するだけ。

icon-check-circle RESIZER(リサイザー)で確認してみる

記事をアップしたらこれで確認しましょう。

リサイザーはアップした記事でないと確認出来ないので注意!

まとめ

冷や汗出まくりましたが無事解決出来て良かったです。

しかし、私のようにリサイザーではきちんと見えていても、いざスマホで確認するとあれ?!と思う事もあるという事をお忘れなきよう。。

ブログの見え方が大事なのは皆さんご存知の通り。

知らぬ間にデザインが崩れていた・・なんて事にならないように、マメにチェックしましょうね。

 

最後までお読みいただき、ありがとうございました!

ご質問等ございましたらお気軽にお問い合わせください(^^)