wordpress（ワードプレス）のスマホ最適化！レスポンシブWebデザインでスマートフォン対応するテーマ・テンプレート

wordpress（ワードプレス）をスマートフォン（スマホ）対応させる方法は、大きく下記２つになります。

スマートフォン（スマホ）の利用が当たり前となった昨今、Webサイトをスマホ用に最適化することは、いわば必須事項と言えます。

Webサイトによっては、PCよりもスマートフォンからのアクセスが多いということもあるでしょう。

当ブログも、「４割」ものアクセスがスマートフォンから来ています（下図）

そこで、今回の記事では、レスポンシブWebデザイン対応の、おすすめテーマ・テンプレートと、スマホ最適化プラグインの紹介。

また、wordpressの「レスポンシブWebデザイン」の作り方についても、順に解説していきます。

以下、目次になります。

• wordpressのレスポンシブWebデザインを実現する、日本語・無料のテーマ・テンプレート
• ワードプレスのスマートフォン（スマホ）対応を実現するプラグイン
• wordpressレスポンシブWebデザインの作り方！PC・スマホ、それぞれのデザイン切り替え（振り分け）方法

※Wordpressの基本的な使い方やインストール手順については、こちらでまとめています→WordPressとは？ワードプレスのインストール方法・使い方と、オススメの無料テーマ（テンプレート）・プラグイン紹介

wordpressのレスポンシブWebデザインを実現する、日本語・無料のテーマ・テンプレート：ワードプレスのスマホ対応

当章では、レスポンシブWebデザインに対応した、日本語かつ無料のWordpressテーマ・テンプレートを、紹介していきます。

スマートフォン（スマホ）利用が一般化した昨今、Wordpressでも、スマホ対応（レスポンシブWebデザイン）したテーマ・テンプレートが、増えてきています。

むしろ、スマホ対応していないほうが、今後は珍しくなっていくでしょう。

そこで、今回は、レスポンシブWebデザインに対応した、おすすめのテーマ・テンプレートを３つに絞って紹介していきます（以下）

1. 【「twenty　～」：Wordpressの公式テーマ】

   

   「twenty　～」は、Wordpressの公式テーマになります。

   レスポンシブWebデザインは、もちろんのこと、

   公式で配布されているものなので、機能・セキュリティともに安心して使え、定期的にバージョンアップもおこなわれています。

   当ブログでも、この公式テーマ（Twenty Tweleve）を利用しています。

   ネット上のソース（情報）も多いですし、最もオススメする「テーマ・テンプレート」です。

   ※「twenty eleven」から、レスポンシブWebデザインとなっています。

2. 【BizVektor】

   

   「BizVektor」は、企業・事業・店舗など、ビジネス用途のホームページに最適化されたWordpressテーマ・テンプレートになります。

   通常、Wordpressは、ブログCMSなので、テーマも「ブログとしてのデザイン」がほとんどです。

   ですが、「BizVektor」は、ビジネス用途のホームページに最適化されているテーマで、利用者も非常に多いです。

   特徴としては、htmlやcssの知識が無くても、管理画面からの設定だけで簡単に「ビジネス向けホームページ」が作れる事です。

   当然、レスポンシブWebデザインにも対応しています。

   公式ページには、デモサイトも触れるので、一度見てみると良いでしょう。かなり、クオリティ高いです。

   ・BizVektor「ビズベクトル」：公式サイト

3. 【STINGER】

   

   「STINGER」は、SEOやアフィリエイトに特化した「テーマ・テンプレート」として、日本では非常に有名なモノで、

   ENJILOGというブログの運営者が作成したテーマ・テンプレートになります。

   当然、スマホ対応もしています。

   利用者も非常に多く、ネット上の「ソース（情報）」も豊富に存在しているため、SEOやアフィリエイトをおこなう場合は、おすすめのテーマになります。

   ※「SEO」については、こちらで解説しています　→　SEO対策とは

以上、レスポンシブWebデザインに対応した、おすすめのテーマ・テンプレートでした。

これらの「テーマ・テンプレート」を利用すれば、何もしなくとも「スマホ対応」されています。

また、「テーマ・テンプレート」を選定するさいは、「スマホ対応」の他にも、いくつかチェックすべき要件があります。

その要件の説明や、それらを満たすオススメのテーマ・テンプレートについて、下記記事にてまとめているので、ぜひ見ておいてください。

・WordPress（ワードプレス）テーマ・テンプレート（デザイン）の無料・日本語版でおすすめなモノと、作り方（作成手順）

wordpressのスマートフォン（スマホ）対応を実現するプラグイン

WordPressのスマホ対応は、レスポンシブWebデザインのテーマ・テンプレートじゃなくても、プラグインを利用することで実現することができます。

そこで当章では、スマホ対応におすすめのプラグインを紹介していきます。

スマホ対応プラグインは、なんといっても「WPtouch」です。

「WPtouch」は、Wordpressにデフォルトでインストールされているプラグインで、利用者も非常に多く、有名なプラグインになります。

スマホ対応プラグインは、他にも

などがありますが、正直「WPTouch」を使っておけば良いと思います。

利用者が多いということは、それだけ信頼性が高いということですし、ネット上にも多数のソース（情報）があります。

ソースが多いということは、何かしら困った事やカスタマイズしたい時などに、解決しやすい。ということですからね。

これらの事から、プラグインにて「スマホ対応」するなら、「WPTouch」を推奨します。

使い方についても簡単で、プラグインを有効化するだけで、基本的な設定はされ「スマホ対応」されます。

詳しい使い方については、下記記事にてまとめているので、参考にしてください。

・WPTouch MobilePlugin（Wordpressプラグイン）の使い方（設定）・カスタマイズと、Pro版の紹介

wordpressレスポンシブWebデザインの作り方！PC・スマートフォン（スマホ）、それぞれのデザイン切り替え（振り分け）方法

レスポンシブWebデザインとは・・・上述しているとおり、１つのHTMLで、PCやスマートフォン・タブレットなど、様々な端末の表示を最適化させるデザインのことです。

１章　：　「wordpressのレスポンシブWebデザインを実現する、日本語・無料のテーマ・テンプレート」でも紹介しているように、

スマートフォン（スマホ）がこれだけ一般的に浸透した昨今では、スマホ対応されたテーマ・テンプレートがデフォルトになっています。

ただ、レスポンシブWebデザインに対応していないWordpressのテーマ・テンプレートを利用している場合、自力で対応させなければなりません。

そこで、当章では、wordpressのレスポンシブWebデザインの作り方について、おおまかにまとめてみました。

まず、レスポンシブWebデザインは、各端末によって表示画面を切り替え（振り分け）る際に、各端末のスクリーンサイズ（横幅）を見ています。

• 「●●px」よりも大きい場合は、「１.css」を。
• 「●●px」よりも小さい場合は、「２.css」を。

といったように、スクリーンの横幅サイズ（単位：ピクセル）によって、読み込む「CSS」を切り替えているんですね。

一般的な、切り替え（振り分け）の指標は、下記のようになっています。

なので、これら３つに最適化した「CSS」を用意しておく必要があるんですね。

次に、作成したそれぞれの「CSS」を、利用しているテーマ・ディレクトリ配下に、FTPツール（FFFTPなど）でアップします。

テーマ・ディレクトリ配下　：　「例」　wordpress/wp-content/themes/twenty●●●/

最後に、利用しているテーマ・テンプレートのファイルを編集して、アップしたCSSファイルを読み込みます。

※編集ファイルは、「ヘッダーテンプレート：wordpress/wp-content/themes/twenty●●●/header.php」などが、良いでしょう。

CSSファイルの読み込み処理は、下記のように、HTMLタグのlinkタグでおこなえます。

以上です。

まとめると、下記のような流れになります。

以上です。

各端末に最適化したCSSの作成手順については、下記記事にて分かりやすく解説されているので、参考にしてください。

・LIG：必読！5分でわかる流行のレスポンシブWebデザインまとめ 制作編