クリエイティブライフハック

写真とオンラインメディアの話をしよう。ブログ、ソーシャルメディア、オウンドメディア、ホームページ、ハンドメイドマーケット、Etsy、minne、Creema、iichi…

オンラインメディア

WordPressのスマホ対応があっという間に解決する方法。

投稿日:2014/04/01 更新日:

スマホ対応はレスポンシブが最適

最近は、モバイル対応、スマホ対応の必要性からレスポンシブなサイトが増えてきました。

レスポンシブとは、PC用サイト、モバイル用サイト、スマホ用サイトを別々にファイルを作って振り分けるのではなく、単一のファイルを画面幅で判断し、最適な表示をする方法です。

つまり...

スポンサーリンク

非レスポンシブの端末別表示

PCで閲覧 → PC用ファイルを表示
スマホで閲覧 → スマホ用ファイルを表示
タブレットで閲覧 → タブレット用ファイルを表示

複数のファイルを作成、管理することになるのでとても大変。

レスポンシブの端末別表示

PCでもスマホでもタブレットでも → レスポンシブな単一ファイルを画面幅に合わせて表示

レスポンシブのメリット

1つのファイルだけなので完成後の修正も管理も容易。ミスのリスクも減らすことができる。
そしてそして、もっと重要なメリットがある!

GoogleはレスポンシブなWebサイトを推奨

参照 → 携帯端末に最適化されたウェブサイトの構築方法

こちらの、「Google の推奨事項の概要」の箇所にこんなこと ↓ が書かれています。

Google では、ウェブマスターが、レスポンシブ ウェブ デザインを使用する、つまりすべてのデバイスに同じ HTML を配信し、CSS メディア クエリのみを使って各デバイスでのレンダリングを決定する、という業界のベスト プラクティスに従うことをおすすめしています。

サイトやブログを運営しているあなたなら「Googleさんが推奨してるということは、レスポンシブなスマホ対応を急がなければいけなさそう...」ということは理解できると思います。

【緊急】スマホ対応が推奨レベル以上の必須レベルになりそうです。

icon-arrow-circle-right WordPressのスマホ対応テーマはどれにする? 4月21日までに対応しよう!

icon-arrow-circle-right もうスマホ対応でモバイルフレンドリーでなきゃダメなの?

icon-arrow-circle-right モバイルフレンドリーを知らない? あなたの検索順位落ちるかも!?

レスポンシブなサイトがどんなものかイメージできるように動画を作りましたのでご覧ください。

PCで画面幅を変えたときの表示

音あり:36秒

ブラウザの幅を変えても、それに合わせて画像の幅さえも最適化してくれる様子がご覧いただけると思います。

スマホでの表示

音なし:53秒

レスポンシブのデメリット

デメリットがないわけではありません。
デメリットは「簡単に作ることができない」ということでしょうか?
外注となると高額な制作費が必要になることが想像できます。

しかし、諦めることはありません!

WordPressの公式テーマである「Twenty Fourteen」はレスポンシブなテーマなんです。
始めっからレスポンシブなサイトやブログを作ることができます。

当サイトもその「Twenty Fourteen」を使ってレスポンシブなスマホ対応になりました。現在は別のレスポンシブスマホ対応テーマを使っています。

今日も元気に楽しく♪

 

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

最新情報をお届けします

Twitter で畑本伸一|CreativeLifeHackをフォローしよう!

-オンラインメディア
-, ,

運営者プロフィール

畑本伸一

icon-maleSINTO Hatamoto (畑本伸一)
写真とオンラインメディアの話が大好きです。ワードプレス、インスタグラム、ピンタレストの活用方法、初心者ハンドメイド作家さん向けの商品写真の撮り方、編集方法、オンラインメディア活用などをセミナー講師としてお伝えしています。 I Love Fujifilm X-E2
icon-arrow-circle-right 詳しいプロフィール

共著

Facebookページ「Creative Life Hack」TwitterGoogle+ページ「自分メディアの育て方」instagramPinterestFeedly RSS

Copyright© クリエイティブライフハック , 2016 AllRights Reserved.