パソコンで作ったサイトがスマホ表示にならない!|原因と方法

ホームページを作ったはいいけどスマホで見てもそのまんま。

勝手にスマホ対応になるのもあるみたいだけど設定とかあるの?

と思ったりしますよね。

先日初めて知りました!

使うテーマ(テンプレート)によって自然とスマホ対応になる!

それは「レスポンシブレイアウト」のテーマの時!

だそうです。

レシポンシブレイアウトとは見る物(パソコン、スマホ、タブレット)などに合わせて勝手に見やすいように位置を並べ替えてデザインを変えてくれるテーマです。

それ以外の時はwptouchなどのプラグインを使ってスマホ専用の表示にするようにします。

CSSで表示設定する方法もあると思いますが私は分かりません・・・。

 

≪目次≫

1.スマホ表示にするには(2通り紹介・利点欠点)

2.実際のやり方(方法1、方法2)

 

スポンサードリンク

1.スマホ専用の表示にするには

 方法は次の2通りありますがそれぞれ利点欠点があります。

 

方法1 :レシポンシブレイアウトのテーマ(テンプレート)を選ぶ

≪利点≫

レシポンシブレイアウトで自然にスマホ表示にしてくれる場合はサイドバーやヘッダーに入れたのもそのまま上や下に入る。
≪欠点≫

大きいサイズの広告を選択していると、スマホで見た時に切れたりレイアウトが崩れたりします。

画面に入っても、アドセンスの場合は規定より大きいのを使うと違反になります。

レクタングル大が違反のようです(画面には入りますが)。
広告もレシポンシブの物にしておくと勝手にサイズを変えて表示してくれます。

 

方法2 :プラグインのwptouchを入れてスマホ用表示専用のページも作る。

≪欠点≫

記事や固定ページ中に入れた広告はスマホでも表示されますが、それ以外のところ(サイドバーやフッター)に入れたアドセンス広告などはスマホでは載ってこないので、スマホ用に別に設定しなければいけません。
いちいちスマホ用に別に設定しなければいけないので面倒です。

≪利点≫

けれどよく言えば、パソコンでは大きいサイズを使って、スマホでは小さいサイズを使うなど分けることができるので大きいサイズの広告が使うことができます。

 

⇒wptouchでスマホ専用のアドセンス広告を入れる方法はこちら

(WPtouchをインストールするところまでは現在のページの方法2を参照)

 

2、実際のやり方

方法1:レシポンシブレイアウトの選び方

(wordpress)

①外観⇒テーマ⇒新規作成をクリック

②その中の「注目」「人気」「最新」のどれかを選択し特徴フィルターをクリック
2015-03-02_09h17_10

 

③レイアウトの中のレシポンシブレイアウトにチェックを入れ「フィルター適用」をクリック。

そこに出てきたテーマの中から選べばスマホで自然にレイアウトが変わります。

このサイトは 『Smartline Lite』 というテーマでレシポンシブレイアウトです。
2015-03-02_09h17_23

⇒テーマの変え方の手順を詳しく知りたい方はこちらのページを参照

方法2:プラグインwptouchを入れる

スマホで見た時にパソコン用の配置ではなくスマホ用専用の配置に変えてみやすくするプラグインです。

①プラグインの新規追加をクリック

2015-04-09_22h50_47

②右の方の検索欄に「Wptouch」と入れてエンターキーを押す

2015-04-09_22h51_45

③WPtouch Mobile Pluginのいますぐインストールをクリック

2015-04-09_22h51_53

④メッセージが出るのでOKをクリック

2015-04-09_22h52_05

⑤プラグインを有効化をクリック

2015-04-09_22h52_25

⑥これでプラグインのところに入ったはずです。

停止のボタンがあるということは有効化されているということです。

スマホ専用表示になっているか確認してみてください。

2015-04-09_22h52_58

 

私が参考にさせていただいたのがこちらの方(WEBビジネス館)のサイトです。

詳しい設定をしたい場合はこちらのサイトを参考にしてください。

バージョンが違ったりすると若干操作方法が違ったりします。

特に設定を変えなくてもそのままでも大丈夫でした。

 

 

関連記事:

・フッターの作り方が分からない|元からフッター・サイドバー付きのテンプレートに
・WordPressへのGoogleアドセンス広告の貼り方|いろいろな方法
・googleアドセンス広告の貼り方(フッターやサイドバーへ)|wordpress
・固定ページ・投稿内の記事上・記事下へのgoogleアドセンス広告を貼り方|wordpress

 


スポンサードリンク