【至急】WordPressサイトをスマホ対応にする方法

      2015/03/02

trouble-114197_1280

なかなか衝撃なNEWSが飛び込んできましたね。

Google、「スマホ対応」をランキング要因に利用することを決定。4/21から導入。

4/21より、モバイルでの検索で「スマホ対応」してないサイトは「will have a significant impact in our search results」です。つまり、

無視すんな 順位下げるよ 大幅に

詠み人 Google

って事です。
「なんだー、スマホの方だけか。PCは大丈夫だから無問題!」なんて今時そんな発言をする人はもういませんよね?検索は今やスマホ化一色。スマホの順位下がるイコールでビジネス大打撃間違いなしです。

スポンサーリンク

ad

WordPressをスマホ対応する方法

なぜエラーが出るの?

2015-02-28_162640

上記はモバイルフレンドリーでアウトになった1サイトです。かなり前に作ったサイトなのですが現在はプロフェッショナルひしめく激戦ワードで3位以内にランクインしています。(これも4/21までに早急な対応が必要です・・・)

で、このエラー理由を見ると

  • テキストが小さすぎて読めない
  • リンク同士が近すぎる
  • モバイル用Viwportが設定されていない
  • コンテンツの幅が画面の幅を超えている

というエラーが出ています。
まったく何もしてないので返す言葉もありません。

WebMasterToolsでも確認できます。

2015-02-28_164427

2015-02-28_164512

まずはスマホで検索して「スマホ対応」が表示されているか?

IMG_7692

そしてGoogleのモバイルフレンドリーテストでOKが出るか?

2015-02-28_165058

https://www.google.com/webmasters/tools/mobile-friendly/?hl=ja

WebMasterToolsでエラーが出ていないか?を確認しましょう。

2015-02-28_164427b

スマホ化はどのようにするのが良いのか?

ただスマホ化すればいいわけじゃないビジネスサイト

というわけで早急にサイトをスマートフォン対応したいワケですが、どういう風に対応するか?

例えば僕が公開しているWordPressテーマの「Stinger3」はメディアによってCSSを切り替えています。こちらは編集がしやすいのですが、使用方法によってはキャッシュ系のサービスで上手く反映されない等の不都合もあるようです。

また次の「Stinger5」ではレスポンシブにして対応しています。こちらはキャッシュの問題はありませんが、編集は「3」に比べるとややこしいかもしれません。

どちらもモバイルフレンドリーとして認識されます。

ブログであればどちらを選択しても良いのかなと思いますが、ビジネスサイトやアフィリエイトサイトの場合はただ読ませるだけではないので難しいです。よくスマホ化を簡単に考える人がいますが多くの情報を積み込み、わかりやすく伝えるには

PCとは別物

として考え直す必要があります。
そこで僕が通常のサイトでしている事は「スマホだけレスポンシブ」です。

スマホだけレスポンシブとは字の通り、PCは今まで通り、スマホだけどんなサイズでも対応できるようにレスポンシブ(と言っても1カラムですが)にする事でだいたいの事はクリアできます。個人的にはPC含めたレスポンシブより楽だと思います。

スマホだけレスポンシブの構築方法

pcmb

スマホだけレスポンシブを構築するにはまず、現在のテーマをフォルダごと丸ごとコピーしてstyle.cssの「Theme Name」だけ変えてやれば別テーマとして利用できます。スマホ用としてこちらだけカスタマイズしていけばOKです。

2015-02-28_171336

まずは定番プラグイン

プラグイン毎にテーマを切り替えるには「WPtap Mobile Detector」と「Multi Device Switcher」等のプラグインがあります。

「WPtap Mobile Detector」を僕は好んで使用していたのですが、更新が途絶えていたり、マルチサイトでは上手く動かないなどの声もあるので、「Multi Device Switcher」の方が良いかもしれません。

2015-02-28_170902

使いかたは管理画面でデバイスに併せてテーマを選ぶだけなので簡単だと思います。よくフッターにある「PC版|スマートフォン版」みたいな切り替えも出来ます。

関連「PC表示」の実装が簡単なWordPress表示切替プラグイン、Multi Device Switcherの使い方

プラグインの「Theme Test Drive」を利用すると、ログインユーザーのみ設定テーマの表示でサイトを見る事ができるので非常に便利です。

スマートフォン用の基本設定

レイアウトは元のCSSのfloatなどを解除したり、配置を変えたりして好きなように1カラムにします。その他、スマートフォン化、レスポンシブ化は細かくやれば色々なハウツーがありますが、ここでは取り敢えず4/21目指してやっつけ最低限クリアを目指します。

ViewPortの設定

モバイルフレンドリーテストでも指摘されるようにViewPortの設定が必要です。以下のコードをスマホ用テーマのheader内に記載します。

Viewportに関しては拡大させるとかさせないとか、横向きにしたらどうとか等、他にもありますので詳しくやりたい人は調べてね。

フォントサイズの変更

ViewPortを指定するとスマホではフォントサイズの指定によっては小さく見えづらくなります。これはモバイルフリーテストで指摘される「リンクが近い」の要因になりえますので行間含め適宜変更しましょう。僕は17pxくらいにしてます。

スマホならではの悩み

child-594519_1280

スマホ化で頭が痛いのは

  • メニュー
  • 画像やテーブルの見せ方

ではないでしょうか?

スマートフォンのメニューの実装

2015-02-28_174932 メニューの見せ方も上からスライドさせる方法や横からシュッと見せる方法など様々です。ただjQueryもデバイスや旧機種によっては上手く動かなかったりすのでここはもう割り切りかなと思います。 僕はコチラのサイトを参考にさせて頂いてます。

参考 スマホサイトでよく見るパーツのコードサンプル集

【超便利!】画像の切り替え方法

画像の切り替えも頭が痛い問題です。 jQueryを利用したサイズ毎の読み込みもあるようですが僕はシンプルに各テーマのimagesフォルダから読み込みます(サイト制作の場合)。とはいえ、通常のままでは投稿から上手く読み込めないのでショートコードを利用します。

上記のコードをfunctions.phpに記載すると[ tp / ](全角空白を無しに)というショートコードでテーマ内を指定できます。つまり

※全角空白は無しで

で、テンプレ内のimagesフォルダから読み込むわけです。
これにより、管理画面から投稿した1つの記事からPCではPCのimagesフォルダから、スマホではスマホ用のテーマのimagesフォルダより画像を取得します。(もちろん、画像名は共に同じ名前にしておく必要があります。)

参考:ショートコードを使ってテーマ内の画像URLを簡単に指定する

さらに僕は毎回[ tp / ]と打つのさえ面倒なのでfunctions.phpに

と書いて、1クリックで挿入できるようにしています。

2015-02-28_180305

スマホ用の画像もiPhone5が320pxだからといって小さめの画像にすると荒く汚くなります。600pxぐらいは用意しましょう。「jpeg mini」などで画像を圧縮するのを忘れずに。

テーブルなどその他の切り替え

2015-02-28_180554

更にいろいろスマホとPCで見せ方を変えたい時はウェビメモさんの「[WordPress]ダッシュボードの使い勝手を向上させるカスタマイズTIPS 10」で紹介されている「記事内でPC用とSP用で表示を切り替えるショートコード」が凄く使えると思いますのでチェックして下さい。

その他の知っておきたいスマホTips

画像サイズの指定

スマホの画像はウインドウ幅に合わせて100%にしたい場合がほとんどだと思います。CSSを以下のように記載しましょう。

これで上手くできないよ~って時は、どこかで他のコードが邪魔をしているかもしれません。そんな時がアイツを呼びましょう。そう・・・

lion-617365_1280

!important

兄貴に任せれば安心。
全部黙らせて従わせます。

参考:これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方

[おまけ] あれおかしいぞ?と思ったら

width100%が上手くいかない時

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定

スマホの横向きについて

[備忘録]「-webkit-text-size-adjust」は指定しておこう、今のところは!

英語が改行されないぞ?

長い英単語の折り返しを指定する

まとめ

ピンチはチャンス。
しっかり対応してラッキーに変えましょう!

【お勧め本】

 - 対策