徒然脱出日記
つまらない日々にサヨナラだ!!

徒然脱出日記



【WordPress】「モバイルフレンドリー計画」第一弾 PCとモバイルでテーマを切り替える 【Multi Device Switcher】  

【WordPress】「モバイルフレンドリー計画」第一弾 PCとモバイルでテーマを切り替える 【Multi Device Switcher】  


こんばんは!「しょん」です!

 

前回の記事では、

このサイトがモバイルフレンドリーではないことをご紹介しました。(紹介?w

 

あれから、いろいろ考えました。

 

「クリックできる要素が近いからって、

離すとPCで見たとき変だし・・・」

 

「コンテンツがはみ出るからといって狭めてしまったら、

PCで見たときにサイドバーあたりが空いちゃうじゃん・・・」とか、

 

 

ほかの人はどうしてるのかなと検索したところ、

PCとモバイル兼用のサイトも多かったのですが、

 

どうやらPC用に作ったテーマとモバイル用に作ったテーマを

WordPressのプラグインで切り替える

ことができるらしい!

 

 

今回はこのサイトの問題点を解決するための第一弾として、

 

テーマを切り替えるためのプラグインの紹介と導入を書いていきたいと思います。

 

 


モバイル用のテーマを作成


 

まず、PC用とモバイル用でテーマを切り替えるために、

モバイル用のテーマを作成します。

 

Googleからの指摘では、ぼくのサイトは画面の横幅が広すぎるらしいので、

自分のスマホの幅に合わせてテーマを作成したいと思います。

 

 

サイドバーをなくして、中央を少し広げてみました。

かなりすっきりしましたね!

 

Googleから評価してもらいましょう!

 

 

おぉ!

 

4つだった問題点が、

幅の問題点がなくなることで3つになっていますね!

 

では、これをモバイル用テーマにしましょう。

 

 

 

 


Multi Device Switcher


 

「Multi Device Switcher」で検索して、インストールしましょう。

 

 

先頭にヒットすると思います。

 

 

インストールしたら、マルチデバイスって名前で一覧に載るので、

設定を表示してみましょう。

 

 

表示するテーマの設定ですね。

スマートフォン用テーマ:

これはスマートフォンで参照した際に表示されるテーマです。

 

タブレット端末用テーマ:

これはスマホより少し大きめの、

タブレット端末で参照した際に表示されるテーマです。

 

携帯モバイル端末用テーマ:

これは携帯モバイル端末用・・・

ぇ? ぇ?w これスマートフォンと何が違うんww

 

ゲームプラットフォーム用テーマ:

これはゲームプラットフォームで・・・

なにそれ(; ・`д・´)

 

 

どの機器で参照されたら、どのテーマが出るかよくわからんなー

っと思ってたら。

 

「ユーザーエージェント」タブがその紐づけでした。

 

 

例えば、iPhoneでブログを参照したら、スマートフォン用に設定したテーマで表示しますよ ってことですね。

 

これは最初から設定してあるので、特別な理由がなければいじらなくていいかな?

 

 

とりあえず、全部の選択に新しく作ったモバイル用テーマを入れましたw

 

 

これで、保存したらもう完了です!

 

 

どうです? ぼくのブログ、PCで見たときとスマホで見たときで、見え方が違うでしょ?

 

 

 


最後に


今回は、Multi Device Switherを用いることで、モバイル端末の画面の幅を超えてしまう問題を解決することができました!

 

残る問題は3つ!

これらも一つずつ解決していきたいと思います。

 

それじゃ またノシ

 

 




コメント


コメント投稿