2014年4月11日
WordPress・ブログ更新

Wordpress blog smartphone title
WordPress iPhone / @cdharrison

最近、ますます高まっているスマートフォン(モバイル)対応の重要性。

徐々にスマートフォンからWebへのアクセス割合は増加しており、当ブログでも以前は3〜4割だったモバイル端末からのアクセスが、最近では5割ほどになっています。
サイト/ブログによってはもっと高い割合のところもたくさんあるでしょう。

ただ、いくらモバイル対策が重要だ、レスポンシブがいいんだなどと言われても、実際に何をしていいかわからないという方も多いのではないでしょうか。

というわけで、今回はWordPressの当ブログで行っているマルチスクリーン(スマートフォン)対応についてご紹介したいと思います。
WordPress初心者の方へ、何かの参考になれば。

パソコン/モバイルで、関連記事や広告の位置などデザインが異なる

例えば、当ブログではパソコン版ではサイドバー、フッターに関連記事を表示しています。

Wordpress blog smartphone 1

ですがモバイル版ではそれほどの画面サイズがないので、フッターのみに表示させたい。

他にも、広告位置やヘッダーのデザインなどなど、デバイスによって変えたい部分はたくさんあります。


最近話題となっているのは「レスポンシブデザイン」。

表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する。複数のファイルを用意する場合に比べ、デザインや機能の自由度は下がるが、すべての機器に同じ内容を表示でき、更新作業の簡略化や更新漏れの防止が期待できる。
レスポンシブデザインとは 【 responsive design 】 〔 レスポンシブWebデザイン 〕 – 意味/解説/説明/定義 : IT用語辞典より)

要するに、機器や画面サイズによって画像やテキストサイズ、ウィジェットの配置などを適切に変化してくれるデザイン(テーマ)のことです。

単一ファイルで管理できる、中途半端な画面サイズにも柔軟に対応できるなどのメリットはあるものの、PC/モバイルで表示させたい内容がだいぶ異なってくると記述がけっこう難しい。(個人的には)

ある程度知識のある人なら全然そんなことないのかもですが、基本WordPress(PHP)素人の私としては混乱しそうなのでレスポンシブは止め、別テーマで管理することに。

初心者はWPtouchがお手軽、だが制約も

初心者の方、あまり時間をかけたくない方は「WPtouch」プラグインを使うのが簡単でしょう。

モバイルテーマを自動的に生成し、スマートフォンからアクセスしてきたユーザーをそちらへ飛ばしてくれます。
ある程度のカスタマイズも可能。

※なお、WPtouchを導入する場合Google Analyticsの2重貼りが起きやすいので注意


但し、「ある程度」と書いたように、テーマと同じように自由にカスタマイズできるかというとそれはちょっと難しい。あくまで初心者用、モバイルをあまり重視しない人用かなという感じです。

プラグインで別テーマに振り分けるのがおすすめ

レスポンシブは難しい、WPtouchでは自由度が低くて不満という方におすすめしたいのが、プラグインによってPC/モバイルで別のテーマに振り分けること。

私が使っているのは、「WPtap Mobile Detector」というプラグインです。

iPhoneなどのスマートフォンに最適化されたWordpressテーマを、WPtouch無しで適用できるプラグイン「WPtap Mobile Detector」

ただ、このプラグインは長い間更新が止まっている様子。もし不安な方は、「Multi Device Switcher」など同種の別のプラグインを使うとよいでしょう。

モバイルテーマのベースにしたのは、かちびと.netさんで公開されている「Shotoku」というレスポンシブテーマ。ベースがシンプルなのでカスタマイズしやすいです。
(レスポンシブですがモバイル専用で使用中)

WordPressのモバイルテーマを、かちびと.netさんの「Shotoku(レスポンシブ対応テーマ)」に変更しました!

これらを使い、現在PCとモバイルでは以下のように全然違うテーマとなっています。

Wordpress blog smartphone 2

2テーマを管理する必要があるため共通のコードなどを貼る場合は漏れないよう注意ですが、はっきり別テーマで分かれている方が個人的にはそれでも管理しやすいです。
広告のA/Bテストなどもやりやすいですしね。

あとがき

WordPressのPC/モバイルのマルチスクリーン対応に悩んでいる方は、参考にしてみてください。

また、「もっとこんな方法があるよ!」的なこともあればコメント等で教えてくれると嬉しいです!

今からWordPressでブログを始めたい人に贈るエントリーまとめ。ドメイン取得からインストール、プラグインまで!

⇒もっと 「WordPress・ブログ更新」に関する記事をチェックする!

フォローして更新情報をチェック