このサイトをスマホ対応にしてみた。(プラグイン情報)

Date:2012/09/18 | Category:便利でおすすめなWPプラグイン紹介
スマホ対応プラグインのイメージ画像

さて、現在通っているスクールで、jQuery mobileを使ったスマホサイトの制作を学んでいます。

で、このサイトもスマホ対応をした方が良いなと感じ、スマホ対応用のプラグインを導入しましたので紹介しようと思います。

導入にかかった時間は15分くらいでしたので、実に手軽です。

スマホ、タブレット、PCなど閲覧者のデバイスごとにテーマを切り替えるプラグイン「WPtap Mobile Detector」

とりあえず、実装した結果です。 スマホから このサイトを見ると以下のように表示されます。

スマホでこのサイトを表示させたときの画像

使い方も簡単でプラグインのインストール後、次のような操作を行うと閲覧者のデバイスによって、どのテーマを表示させるのかを設定することができます。

WPtap Mobile Directorの使い方1

WPtap Mobile Directorの使い方2

ただ、WPtap Mobile Directorは、あくまでテーマを自動で切り替えるプラグインですので、スマホ用のテーマを用意する必要があります。

スマホ・タブレット・PCによってレイアウトが変わるレスポンシブルなテーマ

今回、WPtap Mobile Directorでスマホ用に設定したのは「iTheme2」というレスポンシブルWEBデザインなテーマ。 以下の画像からiTheme2のデモサイトにいけますので、そこでウィンドウのサイズを変えてみていただくとレスポンシブルWEBデザインを実感いただけると思います。

http://themify.me/demo/#theme=itheme2
Apple社の製品やサイトを思わせるようなデザインです。

テーマの無料ダウンロードは→http://themify.me/themes/itheme2

今後スマホページ用のテーマは、カスタマイズしたりいろいろ変えると思いますが、このプラグインにはしばらくお世話になりそうです。

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags


Trackbacks & Comments

Trackback URL for this post:

Trackback(s)

  1. […] 先日、ワードプレスをスマートフォンやタブレットに対応するプラグイン「WPtap Mobile Director」を紹介しました。 […]

Comment(s)


Leave a Reply