XeoryBaseでスマホ表示にならない!たった一つの簡単な直し方!?

XeoryBaseでスマホ表示にならない!たった一つの簡単な直し方!?

スポンサーリンク

これを見つけた皆さんは、WordPressでXeoryBaseをテーマとして使っておられることでしょう。

XeoryBaseは自動でPC表示とスマホ表示に対応してくれるので、とても使い勝手の良いテーマです。

しかし、ブログをやっていて、デザイン的にぶち当たる壁はいくつもあります。

先日、私がブログ更新をしている時、あることをきっかけにスマホやタブレットで見たときに
PC表示になってしまうという現象が生じました。

そのきっかけとなったあることは公表しませんが、有料ブログをしている人なら
ほぼやったことがあるか、これからしようとしていることだと思います。

この時、どのようにして解決したのでしょうか。
解決方法をシェアしますので、どうぞご参考になさってください。

 

「モバイルフレンドリーではありません」との表示

みなさんも、自分のブログサイトがクロールされたかどうかを確かめるために、
次のような文字を入れて検索することがあるかもしれません。

site:comfort-blog.com

こうすると、クロールされ、インデックスされたページが一覧で表示されますよね。

この時、私のトップページのサイト名の下に、

「このページはモバイルフレンドリーではありません」

の表示が出るようになりました。

なんだろう、これ?と考えて、モバイルフレンドリーテストを実行してみました。

すると、やはりモバイルフレンドリーではありませんと出てきました。

そして、下に、「テキストが小さすぎて読めません」とか、
「クリック可能な要素同士が近すぎます」とか、
「ビューポートが設定されていません」とか
出てくるんですね。

ビューポートって何?ワカラナイ((泣))

このまま放置しておいたらペナルティを食らうかもしれない!と焦り、
3日間いろいろ調べまくりました。

必死で検索して、プラグインを使う方法とかが出てくるのですが、
どれも根本問題を解決してくれる方法が出てこないのです。

googleの説明も見るのですが、どれも難しく、ちんぷんかんぷんで、
なかなか解決できませんでしたね。

スポンサーリンク

それでも解決できた

もう絶望的な気持ちでgoogleの説明書きを必死に読むのですが、
なかなかわかりません。

でも、一つの方法を見つけました。
あるタグをヘッダーに貼り付けるという文章があったのです。

これならわかるかもしれないと思い、試してみました。

以下に、その説明文への到達の仕方を書いておきます。

モバイルフレンドリーテスト 結果画面

モバイルフレンドリーページの詳細

左メニュー内 モバイル向けウェブサイトの中のモバイルSEOの各種設定の右三角をクリック

レスポンシブ ウェブ デザイン

「meta name=”viewport”を使用する」の見出し

ここに、メタタグが表示されていました。

これかも!とひらめいた瞬間でした。

早速、これを貼り付けてみました。

貼り付けたら直った!

それをヘッダーに追加するということでしたので、

WordPressの編集画面において、

左メニューの外観

テーマの編集

右の「テーマファイル」の中のテーマヘッダー

この中からheadタグを探す

次の行に先ほどコピーしたメタタグを貼り付ける

「ファイルの更新」をクリック

これで、恐る恐るスマホを開いてみました。

すると!

なんとスマホ表示に戻っているではありませんか!

これでgoogleに叱られずにすみます。

モバイルフレンドリーテストを受けても、大丈夫になりました。

まとめ

いやー、色んな所に問い合わせしたんですが、満足の行く答えは得られず、
CSSやHTMLの知識0なので絶望にも似た気持ちを抱いたんですが、

調べていくと答えって見つかるもんですね。

もしXeoryBaseで同じ症状で困っている方がおられたら、
ぜひとも参考になさってください。

スポンサーリンク

無駄なペナルティを受けることがありませんよう、
願っております。

テキストのコピーはできません。