1. TOP
  2. 【保存版】WordPressのサイトをスマホ表示に対応させる4つの方法とは?

【保存版】WordPressのサイトをスマホ表示に対応させる4つの方法とは?

あなたのWordPressサイトは、スマホ表示に対応していますか?

もし「なんだか難しそうで、ついつい後回しにしちゃってるんだよなぁ・・・」
という場合は、ぜひこの記事をお読みください。思うような成果が出ていなかったあなたのWordPressサイトも、スマホ表示に対応させたら思わぬ反応が出てくるかも?

ということで今回は、Wordpressのスマホ表示対応が重要な理由と、スマホ表示に対応させるための4つの方法について、具体的にご紹介していきます。

今から新しくWordPressでサイトを作るという場合も参考になる内容となっていますので、ぜひ見てください!

WordPressのスマホ表示対応が重要な理由

WordPressのスマホ表示対応が重要な理由は、主に以下の2つです。

1. スマホユーザーの増加
2. 検索エンジン対策

順を追って、詳しくご説明します。

スマホユーザーの増加は見過ごせない!

2017年現在、スマホからのアクセスは、インターネット全体の検索数のうち、パソコンからのアクセスを上回っていると言われています。Web解析ツールなどを提供する「SimilarWeb」の調査によると、2015年時点で既に、アクセスの6割がスマホからのものという結果も出ています。

最近では、10代や20代の若い世代を中心に、パソコンを持たずにスマホだけで検索の全てを済ませているという人も、少なくありません。今や、インターネット検索というのはパソコンだけのものではなくなっていることは、あなたも実感していることでしょう。

そんな中で、あなたのWordPressサイトがスマホに対応していないと、どうなるか。スマホからあなたのWordPressサイトを見たとき、表示が崩れていたり、文字やページ全体がものすごく大きく表示されて、とても見づらいページが表示されてしまうのです。

もしあなたが、スマホで検索したときに表示が崩れているサイトを訪れたら、どのような気持ちになるでしょうか?人によっていろいろ感じ方は違うかもしれませんが、少なくとも何かサービスや商品を買おうとは思えないはずです。

スマホユーザーがこれからますます増えていく中で、この機会損失はかなり大きいものになります。ですので、Wordpressのスマホ表示対応はこれからも非常に重要になっていきます。

スマホユーザーにも親切なサイトは、検索エンジン対策にもなる

あなたのWordPressサイトがスマホ表示に対応していることは、検索エンジン対策にもると言われています。なぜなら、スマホユーザーも見やすいサイトなら、それだけスマホユーザーもあなたのサイトをじっくりと読んでくれるからです。

おそらく検索エンジンは、滞在時間などのユーザーの行動も、検索順位を決める判断材料のひとつとしていると考えられます。

つまり、あなたのWordPressサイトがスマホ表示にも対応していることで、スマホユーザーも長い時間あなたのサイトに滞在することになり、その結果として検索エンジン対策にもなってくるということです。

より身近な感覚に置き換えれば、「親切な人ほど多くの人に好かれる」ということになります。

あなたのWordPressサイトを、もっと親切なものに!

WordPressのスマホ表示対応が重要な理由は、ご理解いただけたかと思います。それでは、これからあなたのWordPressサイトをスマホ表示に対応させるために、具体的な4つの方法をご紹介していきます。

①スマホ表示に対応したWordPressのテーマを使う方法

最も簡単にWordPressサイトをスマホ表示に対応させる方法は、スマホ表示に対応したWordPressのテーマを使うことです。有料のテーマも魅力的ですが、最近は無料のテーマもスマホ表示に対応したものが多くあります。

そこで今回は、スマホ表示に対応した無料のWordPressテーマを3つずつ、ブログなどのあなたのサイトに合った4つの目的別に、ご紹介していきます。

ブログにオススメ! 人気の無料テーマ3選

1. バズ部が提供する「Xeory Base」

 

デモダウンロードページ

超有名なマーケティングメディアのバズ部さんが提供している無料テーマが「Xeory Base」です。スマホ対応はもちろんのこと、ブログを読んだ人にアクションを起こしてもらう仕組み(CTA:コール・トゥ・アクション)も標準搭載!

シンプルで読みやすいデザインですので、記事に集中してもらえます。

2. あの”寝ログ”が提供する「Simplicity2」

 

 

デモとダウンロードページ

 

有益な情報を発信し続ける寝ログの運営者である、わいらひさんが提供する「Simplicity2」は、極限にシンプルなスマホ表示対応の無料テーマ。テーマの名前や、「簡素好きな人におすすめ」という言葉の通り、非常に簡素でありながら、内部SEO対策もしっかり施されているテーマです。

非常にシンプルなため、書くことに集中できます。さらに、そのシンプルさゆえに、記事をしっかり読んでもらえるという特徴もあります。

3. ブログマーケッターが提供する「Giraffe」

 

デモダウンロード

 

ブログで人生を変えた、ブログマーケッターのJunichiさんが提供しているスマホ対応の無料テーマが「Giraffe」です。こちらのテーマは、現在配布が中止されてる「STINGER8」の前々バージョン「STINGER6」をカスタムしたものになっています。

もちろん、スマホ対応は標準装備。

しかし、前2つのテーマとは違い、こちらはデザインに特徴があります。
サイト名が動くアニメーション機能が搭載されていたり、ヘッダーの画像が横幅いっぱいに表示されるなど、「プロブロガー」のようなサイトが作れるテーマです。

ポートフォリオに最適な人気の無料テーマ3選

1. その名もまさしく「Portfolio」

 

デモダウンロードページ

大きなメイン画像が目を引く、名前からもその専門性がわかる無料テーマが「Portfolio」です。メイン画像の他にも、様々な画像をグリッドで表示できるテーマとなっています。

もちろんスマホ表示にも対応しており、スマホしか持っていない状況でも、サッとあなたのポートフォリオを見せることが可能です。ダウンロードページは英語ですが、日本語にも対応しているので、使いやすいテーマと言えるでしょう。

 

2. 動きが目を引く「onetone」

デモダウンロードページ

一番目立つ部分に動画を差し込める、珍しいポートフォリオ向けの無料テーマが「Onetone」です。デモページをご覧いただければわかるとおり、全体的に動きがあって、ひとつひとつのコンテンツが非常に目を引くデザインとなっています。

スマホ表示にも対応しており、美しく、おしゃれなWordPressサイトを作成したい場合にぴったりなテーマでしょう。こちらもダウンロードページは英語ですが、日本語に対応しています。

3. 写真家のためのテーマ「Fukasawa」

 

デモダウンロードページ

左側にメニューがあり、右画面たくさんの写真を表示させることができるので、写真家やコレクターのポートフォリオにオススメな無料テーマが「Fukasawa」です。パソコンで見た時は、テキストや画像が、適度な余白を持って並べられます。

スマホ表示にも対応しているので、スマホで見ても写真が綺麗に表示される点も高ポイントですね!一番上に表示される画像は、スマホ表示の時もスライドショーのように切り替わるので、非常におしゃれです。

自社メディアなどに最適な人気の無料テーマ3選

1. 企業向けのわかりやすいデザイン「BizVektor」

 

 

デモダウンロードページ

企業の紹介にぴったりな、わかりやすいデザインとシンプルさが特徴の無料テーマが「BizVektor」です。サイトの最上部に電話番号を表示できるので、問い合わせ先がとても見やすいのも特徴。

基本的な貴社の活動内容やお知らせもトップページに表示できますし、スタッフブログも表示できます。スマホ表示にも対応しており、企業としての情報発信には最適なテーマのひとつです。

2. 業種に合ったデザインから選べる「テンプレートキング」

 

デモダウンロードページ

美容・飲食・教育・医療などの業種に合ったデザインが選べる無料テーマが「テンプレートキング」です。サイト全体のカラーも、業種に合ったものが採用されています。

最近のアップデートではさらに、貴社のイメージカラーにも合わせられるテーマが配布されていますので、より貴社らしさが出せるテーマとなっています。もちろんスマホ表示にも対応しています!

3. 圧倒的な量だから選び放題!? 「無料ホームページテンプレート.com」

デモダウンロードページ

2017年8月時点で90種類のカラー・デザインから選べる無料テーマが「無料ホームページテンプレート.com」です。企業紹介に適したシンプルなデザインから、美容系に適した配色のデザイン、飲食系に適したおいしそうな料理の画像をふんだんに配置できるデザインまでがズラッと揃っています。

圧倒的な量があるので、選び放題な気分になる無料テーマです。もちろん全て、スマホ表示に対応しています。

 

わかりやすい! ECサイト向け人気の無料テーマ3選

1. ファッション系ECサイトに最適! 「Santa Cruz」

 

デモダウンロードページ

ズラッと並んだ画像と、マウスを乗せた時の画像の動きがインパクト大な無料のテーマが「Santa Cruz」です。スマホ表示にしても、目を引く大きな画像は健在!
商品の紹介ページでは、いくつかの別角度で撮った写真を表示できるほか、その商品の特徴もしっかりと書いていけます。無料ながらも洗練されたそのデザインと機能性は、ファッション系のECサイトとの相性バッチリです!

2. ブログも書ける洗練されたデザインの「VIRTUE」

デモダウンロードページ

取り扱っている商品の紹介だけでなく、スタッフのブログも書きやすく、かつトップページの目立つところに配置されているテーマが「VIRTUE」です。商品の紹介ページでは、画像の下に価格などの詳細も表示できるデザインとなっているので、サイトの訪問者にとっても非常にわかりやすいところがポイント。

もちろんスマホ表示にも対応しており、画像の下の価格情報などもパソコンで見た時と同じように表示されます。ブログでは店舗の最新情報実なども更新していけますので、実店舗も持つECサイトにぴったりの無料テーマです。

3. 縦長の画像でイメージをしっかりと伝えられる「Make」

デモダウンロードページ

 

多くのWordPressテーマでは、画像が正方形か横が長めの長方形で表示されます。そんな中、縦長の画像を配置できるテーマが「Make」です。

縦長なので、例えばファッション系ECサイトなどの全身写真でイメージをしっかり伝えたい時に役に立つ無料テーマです。もちろん、スマホ表示にも対応。
スマホで見ても、縦長の画像でしっかりとイメージを伝えていけます。

商品画像の右上に、「Sale」などの追加情報を伝えられる点もポイントのひとつ。オススメしたい商品をピックアップして伝えたい時にも便利な無料テーマです。

②プラグインでWordPressのサイトをスマホ表示に対応させる方法

先ほどは、WordPressのサイトをスマホ表示に対応させるために、スマホ表示に対応したテーマを使う方法をご紹介しました。

しかし、テーマを変えるとサイト自体の雰囲気がガラっと変わってしまうこともあります。
既にWordPressのサイトを持っていると、今のデザインを大きく変えたくないという場合もありますよね?そんな時に使いたいのが、WordPressの拡張機能「プラグイン」を利用する方法です。

プラグインを使えば、今のサイトをパソコンから見たデザインを変えずに、スマホ表示に対応させることができます。ここからはプラグインを使ってスマホ表示に対応させる場合の注意点と、オススメのプラグイン「WPtouch」のインストール方法や設定方法をご紹介していきます。

プラグインを使う時の注意点

まず、プラグインを使ってWordPressのサイトをスマホ表示に対応させる時の注意点をご紹介します。それは、今のWordPressの状態を、バックアップを取って保存しておくということ。

プラグインを使う場合は、サイト全体に思わぬ変更が出てくる場合があります。WordPressの仕組みは複雑なデータベースで構成されているので、単純にプラグインを消して元どおりといかない場合も、最悪の状況としてありえます。WordPressのプラグインを使う場合は、必ずバックアップを取ってからにしましょう。

また、これからご紹介するプラグイン「WPtouch」は、スマホ表示専用の形式で表示されるので、パソコンから見た表示とは大きく異なります。その点は、ご留意いただければと思います。

WPtouchプラグインのインストールと設定方法

それでは、WPtouchプラグインのインストールと設定方法をご紹介していきます。まずは、プラグインをインストールしていきましょう。

WPtouchプラグインのインストール方法

WordPressの管理画面に入り、左のメニューにある「プラグイン」から「新規追加」をクリックします。

 

画面右側にあるプラグインの検索バーに「WPtouch」と入力し、エンターキーをクリック。
すると、「WPtouch」のプラグインが表示されますので、「今すぐインストール」をクリックしていきます。

 

なお、ワードプレスのプラグイン検索昨日は厳密な作りになっており、大文字と小文字も区別してしまうので、先ほどのプラグイン名をコピーアンドペーストしていただいた方が確実です。

インストールが完了すると「有効化」というボタンが表示されますので、ここをクリックします。

 

これで「WPtouch」プラグインのインストールが完了しました。管理画面の左のメニューに「WPtouch」という項目が追加されたことを確認します。続いて、プラグインの設定をしていきましょう。

WPtouchの設定方法

管理画面の左のメニューに追加された「WPtouch」をクリックすると、英語表記の設定画面が表示されます。

 

このままではわかりづらいので、日本語表記に変更していきましょう。

設定画面を下にスクロールしていくと、一番最後に「LANGUAGE」という項目があります。その中の項目のひとつに「Theme Language」があるので、右側のメニューをクリック。開いたメニューから「日本語」を探します。

 

「日本語」が見つかったら、クリックします。
すると、自動的に画面が更新され、表記が日本語に変わります。これで、だいぶわかりやすくなりましたね。

WPtouchプラグインの基本的な設定方法は、以上です。
WPtouchプラグインの設定画面の上に戻り、画面右側にある「Preview Theme」をクリックしてみましょう。

以下のような画面が表示されたら、成功です。

 

なお、今まで使っていたWordPressのテーマが実はスマホ対応のテーマだった場合、今まで使っていたテーマのスマホ表示画面が表示されます。

WPtouchでサイトをスマホ表示対応にした場合、スマホ表示画面のカスタマイズは、WPtouchの設定画面の中の、「テーマのカスタマイズ」という項目から行えます。

 

「カスタマイザへ移動を」クリックすると、以下のようにスマホ表示画面がカスタマイズできるようになります。

 

例えば、「ヘッダ」という項目では、サイトのロゴ画像などを表示することもできます。「色」という項目では、背景の色などが変更できます。

一部英語のままのものがありますので、その解説をします。

Blog Featured Slider

おすすめの項目をスライダーで表示できます。
表示する記事の数や、表示する記事をカテゴリー別やタグ別など、任意のものを選ぶことができます。

Blog Layout

ブログのレイアウトについての変更が行えます。
先ほどご紹介した「おすすめの項目」を表示するかしないかなどの設定ができます。

Custom CSS

CSSで、見た目についてお好みのカスタマイズができます。
少し技術的な知識は必要ですが、CSSを扱えれば細かな変更がこの項目で行えます。

 

③テーマを変更せずに、カスタマイズしてスマホ表示に対応させる方法

今使っているテーマで、パソコン表示での見た目と、スマホ表示にした時の見た目を統一したいという場合もあるでしょう。
その場合は、テーマをカスタマイズしてスマホ表示に対応させるという方法もあります。

具体的には、CSSのメディアクエリという機能を使って、パソコン表示用とスマホ表示用のスタイルを分け、画面の大きさによってそのスタイルを切り替えるという方法です。

この説明でお気づきになる方も多いと思いますが、この方法は「CSS」というインターネットの知識が必要になります。パソコンの操作に自信がある場合は、挑戦してみるのも良いでしょう。

それでは、具体的な方法をご紹介していきます。

CSSの一番下に、以下のような記述を追加します。

画面サイズが480px以上(スマホ表示)の場合
@media screen and (min-width:480px) {
/* この間に、スマホ用のスタイルを記述する */
}

 

画面サイズが1024px以上(パソコン表示)の場合
@media screen and (min-width:1024px) {
/* この間に、パソコン用のスタイルを記述する */
}

専門的な知識は必要となりますが、CSSを扱えるようになるとできることの幅がグッと広がります。

「パソコン表示の時の見た目は変えたくない! でもスマホ表示の時の見た目も整えたい! 」
という場合は、CSSを学んでカスタマイズするというのも、ひとつの方法です。

 

④画面サイズにより、スマホ表示に対応したテーマに切り替える方法

最後にご紹介する方法は、画面サイズによってスマホ表示に対応したテーマに切り替えるという方法です。方法②と同じくプラグインを使いますが、こちらの方法ならスマホ表示に対応したテーマの中から、お好きなテーマを選んで切り替えることができます。

目的に応じて、方法①でご紹介したスマホ表示対応の無料テーマを使うのも良いでしょう。この方法で使うプラグインは「Multi Device Switcher」です。

方法②の場合と同じく、「プラグイン」の「新規追加」画面で、「Multi Device Switcher」を検索します。

今回のプラグイン名は特に長めなので、コピーアンドペーストで検索していただいた方が賢明です。「Multi Device Switcher」が表示されたら、「今すぐインストール」をクリックします。

インストールが完了したら、「有効化」というボタンが表示されるので、クリックして有効化します。

有効化が完了すると、WordPress管理画面の左側にあるメニューの中の「外観」という項目の中に、「マルチデバイス」という項目が追加されています。

「マルチデバイス」という項目をクリックすると、以下のような画面が表示されます。

 

「Multi Device Switcher」は日本語に対応しているので、非常にわかりやすいですね!

スマートフォン用テーマの右側にある「なし」をクリックしてみると、今インストールされているテーマが一覧で表示されます。

今回は、手順①でもご紹介した「Virtue」をスマホ表示用のテーマに設定してみます。
一覧から「Virtue」を選択し、「変更を保存」をクリックします。

 

すると、スマホでの表示画面が、先ほど選択した「Virtue」のものになっています。「Multi Device Switcher」を使用してWordPressのサイトをスマホ表示対応にした場合、画面を小さくしてもパソコンでは確認できませんので、スマホの実機でサイトにアクセスしてみましょう。

比較的簡単に、スマホで見た時だけ、別のテーマでスマホ表示対応を実現することができました。

まとめ

今回は、WordPressのサイトをスマホ表示に対応させる方法をご紹介してきましたが、いかがでしたでしょうか?はじめにもご紹介しましたが、スマホで検索するユーザーは、今後もますます増えていくでしょう。

時代の流れは、すでにスマホでの検索が主流となっています。この流れに乗り遅れて、さまざまな機会の損失をしないためにも、あなたのWordPressサイトをスマホ表示に対応させるのは、まさに今です。

難しそうで、WordPressのスマホ表示対応をついつい後回しにしちゃっていたあなた。いっちょ頑張って、あなたのサイトをもっと活躍させてあげませんか?

今回ご紹介させていただいた、いずれかの方法を使って、あなたのWordPressサイトをスマホ表示に対応していただければ、筆者としても嬉しく思います。

頑張っていきましょう!
ここまでお付き合いいただき、ありがとうございました。

\ SNSでシェアしよう! /

月刊副業の注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

月刊副業の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

ライター紹介 ライター一覧

月刊副業編集部

月刊副業編集部

月刊副業は株式会社Catch the Webが運営しています。


弊社は日本で一番有料会員数の多いアフィリエイトスクール「AMC」を運営しており、AMCの会員は現在2500名以上、1年間の会員のアフィリエイト報酬額の合計は40億円以上という実績があります。


月刊副業では、アフィリエイターの裾野を広げるという理念の元、初心者の方でも分かりやすいよう、アフィリエイトの情報を中心に副業に関する情報を発信しています。


この人が書いた記事  記事一覧

  • メルカリで取引をキャンセルしたい!依頼から返金までの方法を全紹介

  • 5分で完結!Googleアナリティクス設定方法〜初心者向け超簡単ガイド〜

  • カンペキ!メルカリで商品を転売する方法まとめ【商品選定〜発送】

  • 【2017年最新版】アフィリエイトジャンル全60選!ASP担当監修

関連記事

  • カレンダー機能をwordpressに。おすすめプラグイン12個

  • WordPressとFacebookを自動連携するための手順5ステップ

  • WordPressのSSL化のおすすめプラグイン6つと設定方法を解説

  • WordPressが重い!原因究明とすぐに高速化できる11個の対策【保存版】

  • WordPressの使い方について徹底解説

  • 【図解】WordPressのテーブル・表作成で必要な8つの手順を紹介