wordpress(ワードプレス) レスポンシブWebデザイン(スマホ対応)

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


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

  1. レスポンシブWebデザインに対応した「テーマ・テンプレート」の利用
  2. スマートフォン(スマホ)最適化用の「プラグイン」の利用

※「レスポンシブWebデザイン」とは・・・1つのHTMLで、PCやスマートフォン・タブレットなど、様々なデザイスの表示を最適化するデザインになります(詳しくは、後述しています)

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

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

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

Wordpressブログ スマートフォンからのアクセス

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

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

以下、目次になります。

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

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

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

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

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

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

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

  1. 【「twenty ~」:Wordpressの公式テーマ】

    Wordpress スマホ対応(レスポンシブWebデザイン) 日本語・無料のテーマ・テンプレート-1

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

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

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

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

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

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

  2. 【BizVektor】

    wordpress スマホ対応テーマ・テンプレート BizVektor

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

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

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

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

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

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

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

  3. 【STINGER】

    Wordpress スマホ対応(レスポンシブWebデザイン) 日本語・無料のテーマ・テンプレート-3

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

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

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

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

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

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

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

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

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

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

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

wordpress(ワードプレス) スマートフォン(スマホ)対応プラグイン

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

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

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

WPtouch スマートフォン(スマホ)対応プラグイン

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

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

  1. 「WordPress Mobile Pack」
  2. 「MobilePress」

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

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

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

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

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

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

aaa

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

wordpress レスポンシブWebデザインの作り方!デザイン切り替え(振り分け)方法

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

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

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

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

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

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

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

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

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

スクリーンの横幅サイズ : 320px 以下・・・スマートフォン
スクリーンの横幅サイズ : 768px 以下・・・タブレット
スクリーンの横幅サイズ : 769px 以上・・・PC

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

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

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

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

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

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

<link rel=”stylesheet” href=”●●●.css”>

以上です。

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

  1. 表示画面・切り替え(振り分け)用の、各端末に最適化したCSSの準備(一般的には、PC用、スマホ用、タブレット用の3つ)
  2. 準備したCSSを、テーマ・ディレクトリへアップする
  3. アップしたCSSファイルを読み込み処理を、テーマ・テンプレート・ファイルに記述する

以上です。

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

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

Related Posts Plugin for WordPress, Blogger...
コメントを残す

メールアドレスが公開されることはありません。