WordPress個別サポート

「モバイルフレンドリー」が流行語になりそうな今日この頃ですが、あなたのサイト、モバイルフレンドリーですか?

WordPressで最近のテーマを使って普通にサイトを作成していれば、だいたいモバイルフレンドリーだと思いますが、何のことだかピンとこない方は自分のサイトをチェックしてみてください。

▼Googleモバイルフレンドリーテスト
https://www.google.com/webmasters/tools/mobile-friendly/?hl=ja

万が一、「モバイル フレンドリーではありません」(モバイル端末では快適に閲覧できない)と表示されてしまったら対策が必要かもしれません。

「モバイル フレンドリーではありません」と表示されてしまったら…

あなたのサイトが「モバイル フレンドリーではありません」と表示されてしまったら…

このようなメッセージが表示される場合があります。

  • モバイル用 viewport が設定されていません --- 画面表示がモバイル画面を想定していません。
  • テキストが小さすぎて読めません --- PC用の画面を縮小して見るのでモバイルでは辛いです。
  • リンク同士が近すぎます --- 上記と同じです。
  • コンテンツの幅が画面の幅を超えています --- 幅の大きいテーブルや画像がないかチェックしてください。

モバイル対応させるには使用中のテーマを加工するのが基本とはいえ、これらの抜本的な対策には何時間、何日、何ヶ月、、、

それまで「モバイル フレンドリーではありません」なのかと思うと夜も眠れません。

そこで、逃げではありますが、3分で終わる対策を紹介します。

それは、WPtouchプラグインをインストールすることです。

WPtouchプラグインをインストール

WPtouchプラグインをインストール

「プラグイン」‐「新規追加」メニューからインストール、有効化すると、モバイルからのアクセスにはモバイル用のテーマが適用されます。

モバイル用のテーマが適用される

モバイル用のテーマが適用される

WPtouchプラグインは設定メニューもありますが、ここでは説明しません。

PC用の画面は元のまま(元のテーマ)なので、既存のPC表示には影響を与えず安心です。

PC用のデザインは元のまま

PC用のデザインは元のまま

これで、PC画面は変更せずモバイル向けの画面だけを変更できました。

モバイルフレンドリーテストでも「このページはモバイル フレンドリーです。」と表示されるようになるはずです。

簡単な対策でサイトが「モバイルフレンドリー」に

簡単な対策でサイトが「モバイルフレンドリー」に

言うまでもありませんが、WPtouchプラグインをインストールしても「モバイルフレンドリーではありません」の警告が消えないこともあります。その場合は別の対策が必要です。

逃げの対策ではありますが、悪い方法ではありません。Googleの「ウェブマスター向けモバイルガイド」で「サイトにモバイル フレンドリー機能を追加できる方法」として紹介されています。

Google:WordPressウェブマスター向けモバイルガイド
(2.2 PC 向けのサイトはそのまま保持し、モバイル ユーザーにはモバイル フレンドリー バージョンを提供する)

WPtouchでスマホ表示をチェックするときの注意

WPtouchプラグインをインストールして、スマホ表示を確認しようとブラウザの幅を狭くした方。使用中のテーマがスマホ対応になったわけではないので、その方法ではスマホ表示になりません。PC用の画面が表示されます。注意してください。

実際にスマホからアクセスするか、スマホからのアクセスを模倣できる機能(たとえば、FireFoxのUser Agent Switcherアドオン)を使う必要があります。

抜本的な対策ではないので必要に応じて、スマホ用テーマの選択とカスタマイズが必要になりますが、「モバイル フレンドリーではありません」が気になる方、一時しのぎでも良いので一刻も早く対策したい方は、とりあえずの対策としてお試しください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート