WordPressサイトをスマートフォン・モバイルに対応させる

WordPressを導入すればiPhoneやiPad、Androidなどのスマートフォンや従来の携帯電話・モバイルケータイに簡単に対応させることが可能です。モバイルに対応させる方法は

  • プラグインを使う方法
  • レスポンシブ・デザインを採用する方法
  • cssスタイルシートで簡易対応する

の3種類があります。

スマホ・モバイルに対応するプラグインを使う

代表的なのはktai-style、wptouchの2つです。

ktai-style・wptouch共に、サイト高速化プラグイン「WP Super Cache」と併用して使うとPCからアクセスがあってもキャッシュしたモバイルページを見せてしまう不具合が存在します。併用する場合は注意しましょう。

WP Super CacheとWPtouchやKtai Styleを併用するためのカスタマイズ

ktai-style

WordPressブログを日本の携帯電話5キャリアに対応させるプラグイン。携帯電話で閲覧すると軽量化したサイトを表示させることができます。

  • Ktai Style配布サイトからzipファイルをダウンロードして解凍
  • wp-content/plugins/以下にアップロード
  • プラグインを有効化

ダッシュボード ≫ 「携帯表示」 ≫ 【テーマ】
をクリック。

ktai-styleテーマ画面

5つのデフォルトテーマを選び有効化すればオッケー。

/wp-content/ktai-themes/themes1〜5
までのフォルダの中のファイルを編集することでデザインや表示機能のカスタマイズが可能になります。

WPtouch

WPtouch

iPhoneやAndroidなどのスマートフォンに最適化させるプラグイン。
デフォルトのテンプレートでは、上の画像のようなレイアウトになります。WordPressでのスマートフォン対策には欠かせないプラグインですね。

  • ダウンロード:WPtouch
  • インストール
  • プラグインを有効化

/wp-content/plugins/wptouch/theme/default/
以下のファイルを編集することで、デフォルトのテーマをカスタマイズすることができます。

レスポンシブ・デザインを導入する

レスポンシブ・デザイン

レスポンシブ・デザインとはウィンドウサイズに合わせて自動的にページのデザインを最適化する技術のことです。
iPhone/iPad/Android・PCブラウザなど多様なブラウザ環境になるにつれ、全てのデザインを統一することが難しくなっています。

しかしレスポンシブ・デザインを導入することによって全ての環境に対応することが可能になりました。
Wordpressではレスポンシブ・デザインが施された無料テーマが数多く登場しています。

スマホ・モバイル対応をプラグインで解決するのではなく、テーマを編集することで解決できるようになったのです。
無料のレスポンシブ・デザインについては別の機会に触れることにします。

CSSスタイルシートで対応する

iPhoneやiPadなど、デバイスを判別してそれ専用のCSSスタイルシートを書く方法です。
簡易的な調節を行う場合に使用しましょう。

以下は iPhone/Android にだけ反映するCSSの書き方です。

@media screen and (min-device-width: 320px) and (max-device-width: 480px){
  ...
}

以下はiPadにだけ反映するCSSの書き方です。
「iPadはパソコンでみる画面と同じでいいです」っていう人は、スタイルシートで幅だけ調節してあげたらいいとおもいます。

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
  ...
}

ページトップへ戻る

対応エリア

大阪府、神戸・宝塚、京都府
東京都を中心に世界中どこでも対応!!

業務内容例

WordPressでの企業ホームページ作成
サイトのリニューアル
サーバー移転
ECサイト構築/決済システム導入
多言語化
スマホ対応
WEBシステム開発
SEO対策

チュートリアル

お問い合わせ・資料請求
テーマ開発やプラグインのちょっとしたカスタマイズ、SEO内部対策など単発からのご依頼を承ります。WordPressサイトを運営されている事業オーナー様!お気軽にお問合せください。
お問い合わせ