こんにちは。橋尾渡(@hashio_wataru)です。
つい最近、Simplicityというワードプレスで有名な多機能且つ無料のテーマ(最新版)がでていたのでダウンロードをしたんですよね。
ダッシュボードを開き、テーマの更新をするまでは順調に進んでいたのですが、テーマの更新をした後からとある異変に気づいてしまいました。
スマートフォンから自分のサイト(わたろぐ)を見てみると…、レスポンシブ対応テーマなのに、なんとPC表示になっていたんですよ!
何故レスポンシブ対応テーマなのに、スマホでPC表示になってしまうのか…。
いろいろ悩んだ末、あることをしたら一瞬で直ってしまいました(笑)
なので今から、スマートフォンのPC表示をどうやって直したのかについて説明していきたいと思います。
レスポンシブ対応とは何か
そもそも、レスポンシブ対応とは何なのか分からないという人もいますので、こちらのWikipedia引用文を一度ご覧になってください。
レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。
この説明じゃ、ちょっとわかりにくいですかね(笑)
要するにレスポンシブ対応というのは、各端末の画面サイズに合わせてウェブサイトの配置やサイズを変えてくれる機能のことを言います。
通常レスポンシブ対応のテーマを使えば、スマートフォンからはスマートフォン用のサイズに合わせて画面が構築されます。
ですが、今回私がSimplicityのアップデートをした際にこのレスポンシブ対応が機能しなくなってしまい、パソコン用の画面サイズになってしまったんですね。
その原因は、なんなのか…。
以前までのSimplicityではなんともなかったのに、アップデートにより何か仕様が変わってしまったのか不安になり、色々検索して調べました。
その結果、どうやらキャッシュ関係の問題でスマートフォンからウェブサイトを見た時、PC表示になっていたようです。
なので、キャッシュの問題を解決しないことにはスマホのPC表示は一生直らないのです。
キャッシュとは?
キャッシュの問題を解決しろって言われても、なんのことだかさっぱりですよね。
とりあえず、キャッシュについて少し学んでみましょう。
キャッシュ (英: cache) は、CPUのバスやネットワークなど様々な情報伝達経路において、ある領域から他の領域へ情報を転送する際、その転送遅延を極力隠蔽し転送効率を向上するために考案された記憶階層の実現手段である。実装するシステムに応じてハードウェア・ソフトウェア双方の形態がある(今後コンピュータのプログラムなども含め全ての転送すべき情報をデータと表す)。
Wikipediaの文章ではちょっと難しいですね。噛み砕いてわかりやすく説明していきましょう。
インターネットエクスプローラーなどのウェブブラウザは、表示をしたことがあるウェブサイトのデータを一時的に保存するように設計されています。
一時的に保存したデータのことを「キャッシュファイル」と呼ぶそうです。そして、同じページをもう一度表示するときには、保存されたデータが読みこまれるようになるので、前より表示速度がはやくなるんですね。
そのほかに、パソコンの脳味噌であるCPUや記憶装置のメモリーなど、データを一時的に保存する場所のことをキャッシュというようです。よく使われるデータをいちはやく取り出す目的で、キャッシュは利用されます。
キャッシュを利用することで、パソコンのデータ処理や表示速度などがはやくなっているということなんです。
キャッシュにも色々と種類があり、上記で説明したキャッシュはブラウザキャッシュと言います。そして、今回問題になっているキャッシュが、ページキャッシュと呼ばれるものです。
まぁ要するにキャッシュとは、データを一時的に保存して、それをまた利用することによってデータ処理や表示速度などを上げる機能のことを言うんですね。
Simplicityはキャッシュプラグインと相性が悪い
そして今回、キャッシュに問題があるということなのでキャッシュについて検索してみたところ、ファイルを生成するキャッシュプラグインが悪さをしているという記事を見つけました。
Simplicityテーマの作者である「~」さんのブログ記事です。そこには、こう書かれてありました…。
ファイル生成キャッシュプラグインと相性が悪いわけ
それは、パソコンとモバイルで、それぞれスタイルを分けているからです。完全レスポンシブではなくスタイルを分けている(モバイルの時はmobile.cssが適用される)から、「ファイルを生成するキャッシュプラグイン」を使用していると、そのページのファーストビューの端末のキャッシュファイルが作成され、次からはそれが表示されてしまいます。
どうやら、ファイルを生成するキャッシュプラグインを使用すると、最初にウェブサイトを表示した端末のキャッシュファイルが作られてしまうので、次からどの端末を使っても表示が固定されてしまうようです。
これでようやく謎が解けました。
つまり、パソコンから自分のサイト(ブログ)を見てしまうと、スマートフォンにもパソコンのキャッシュファイルが残ってしまうので、PC表示になっていたという事なんですね。
謎が解けたのは良いのですが、問題はそこではなくスマートフォンのPC表示を直す方法についてですよね。
わかっています。なので今から、PC表示を直す方法についてご説明致しましょう。
スマホのPC表示を直す方法
ズバリ、答えは簡単です。
今使っている、ファイル生成キャッシュプラグインの機能をOFFにしてあげるだけなんです!
とっても簡単でしょう?たったこれだけの作業で、今まで困っていたスマートフォンがPC表示になってしまう問題を一発で解決できてしまったのです(笑)
プラグイン機能をOFFにするやり方がわからない人のために、詳しく説明しておきましょう。
まずは、ワードプレスのホーム画面を開いてください。
ワードプレスのホーム画面を開けましたら、左側のメニュー内にある「プラグイン」をクリックしてください。
そして、インストールしたプラグインの中からファイルを生成するキャッシュプラグインを探し出してください。
私の場合は「WP Fastest Cache」という、簡易型キャッシュプラグインを使用していました。
あなたがインストールしたキャッシュプラグインを見つけましたら、プラグイン名の下にある「停止」ボタンをクリックしましょう。
ここまでの工程を終えたら、一度スマートフォンからあなたのウェブサイト(ブログ等)を確認してみてください。
スマートフォンから見たときパソコン表示ではなく、ちゃんとスマートフォン用のレスポンシブ表示になっていれば問題解決です。
終わりに
以上で、スマートフォンのPC表示を直す方法についての説明は終わりです。
キャッシュプラグインの機能をONにしたままだと、スマートフォンからブログに来てくれた人達にパソコン用の画面を表示させることになります。
スマートフォンからパソコンの大きな画面を見るのは、かなり見辛くストレスが溜まりますよね。
しかも、GoogleのSEO的にも評価が悪くなるため、絶対にスマートフォンからはスマホ用の表示、パソコンからはパソコン用の表示にしておくべきです。
なので、キャッシュプラグインが原因で表示がおかしくなってしまった方は、キャッシュプラグインの機能をOFFにしましょう!
それでは、そろそろ【Simplicity】スマホでPC表示になってしまう原因はこれだった!についての記事を終わりたいと思います。ぐっばい!
コメント
はじめまして。せっかく作成した記事が、スマホ表示で崩れて原因をあちこち探ったけど解決せず・・へこんでいました。
やっとこちらの記事で、しかもとっても簡単に!!レスポンシブ表示され、めちゃくちゃ嬉しいです。本当にありがとうございました!!