レスポンシブルWebデザインを初めて使いました

 レスポンシブWebデザインというのは、パソコン、タブレット、スマートフォンそれぞれで見たときに、それぞれにあわせたレイアウトの表示をするデザインのことです。

 メールマガジンのバックナンバーを置くページで、初めて、ワードプレスのレスポンシブWebデザインのテンプレートを使いました。私が使いましたのは、賢威6.0ヘルシー版です。 パソコン、タブレット、スマートフォンそれぞれの見え方を画像でお見せします。まずは、パソコンです。

賢威6.0ヘルシー版-パソコン

賢威6.0ヘルシー版-パソコン

次は、キンドルファイアHD 7.0インチです。    

賢威6.0ヘルシー版-キンドルファイアHD 7.0インチ横

賢威6.0ヘルシー版-キンドルファイアHD 7.0インチ横

賢威6.0ヘルシー版-キンドルファイアHD 7.0インチ たて

賢威6.0ヘルシー版-キンドルファイアHD 7.0インチ たて

 
 キンドルを横型に持つと、なぜか左右スクロールをしないと見ることができません。一応、パソコンと同じレイアウトで表示されます。キンドルを縦型に持つと、左右スクロールしなくても、きちんと見られる状態です。「このページの先頭へ」の表示が、パソコンの時とは違います。

 キンドルを縦型にした時の表示は、スマートフォンでの表示と同じレイアウトです。

 次は、スマートフォン(iphone5)です。

賢威6.0ヘルシー版-iPhone5

賢威6.0ヘルシー版-iPhone5

 このページは、2カラムですが、その右側の部分は、下側に回っています。 それから、固定ページは、どこに表示されるのかというと、赤い楕円形で囲んだところの三角形をタップすると、固定ページが出てきます。下の写真です。

賢威6.0ヘルシー版-iPhone5 固定ページを開いたところ

賢威6.0ヘルシー版-iPhone5 固定ページを開いたところ

 
 賢威6.0のレスポンシブルWebデザインは、パソコンでもスマートフォンでも、表示される内容自体はまったく同じです。スマートフォンの時には、ところどころで、上の写真のように、三角形をタップすると、表示される状態になっている部分が何箇所かあります。

 パユファンサイトの場合は、メールマガジンのバックナンバーページを含めて、10個のワードプレスを使っています。メールマガジンページ以外は、スマートフォンでの表示は、プラグイン「Wptouch pro」を使っていますので、メールマガジンのページも、レスポンシブルWebデザインをOFFにして、スマートフォン用表示は、プラグイン「Wptouch pro」を使うという選択肢もありました。

 でも、今回については、レスポンシブWebデザインのテンプレートを使いたかったので、賢威6.0のテンプレートを使ってみました。

 レスポンシブWebデザインテンプレートのいいところは、テンプレートの設定をしてしまえば、後は何もしなくても、パソコン、タブレット、スマートフォン用のページが自動的にできることです。これは、なんといっても楽で魅力です。

2013年5月5日 レスポンシブルWebデザインを初めて使いました はコメントを受け付けていません。 テンプレート