本日「博多ラーメン会（仮）」に参加するヒゲ店長の宮本です。
はい。
salon_theme01 についてのご紹介です。
今回作ったテーマは『レスポンシブWEBデザイン』という手法をとってます。
レスポンシブwebデザインってのは、ざっくり言うと、「色んな幅の端末に対応したサイトデザイン」ってことです。
具体的には、もっと詳しく説明されているサイトがあると思うのでそちらを見て頂きたいのですが、
心やさしいヒゲは、そんな手間を煩わせてはいかん(/_;) と考え、少しだけ説明します。
今はスマートフォンやタブレット（ipadなど）も普及して、パソコンも含めると画面のサイズって様々ですよね？
でも全く同じデザインのページを、ＰＣとスマートフォンそれぞれで閲覧したとき、
当然スマートフォンは小さくなるので見にくくなります。
あるいは、指で動かしながら画面全体を移動しないといけません。
これって結構なストレスだったりするわけです(-_-メ)
折角アクセスして頂いたのに申し訳ないし、 機会損失に繋がってしまうこともあります。
（※ 蓮の華Ｒｅｌａの店舗ＨＰもスマートフォンには対応していないので、当店のＨＰをスマートフォンでご覧になられるとわかるかと思います。 ⇒ 蓮の華Ｒｅｌａ整骨院 ）
さあ、スマートフォンが普及してきた今。
使う人のことを想うと心苦しくて夜も眠れません。
じゃあどうすんの？ってことで、
多くの場合は、ＰＣ用のサイトとは別に、スマートフォン用サイトを作るなどして対応するわけです。
しかしこれだと、
○ 別のＨＴＭＬが必要になる。（つまり複数のサイト作成）
○ コストが増える。
○ 管理がメンドイ。
などなどの事情もあって、うちみたいな小粒店舗では眉間にシワが寄ってしまう。
それならば、一つのＨＴＭＬソース（サイトの記述）で色んな端末に対応できれば解決じゃない？って考えの手法が、レスポンシブwebデザインです。
つまり画面サイズに合わせてレイアウトも変化していきます。
説明が下手ですみません(-_-;)
グダグダ言わなくても以下の画像が一発でわかります。。。
このように、見てる人の端末幅に合わせてレイアウトを変更してあげれば、
わざわざスマートフォンサイトを構築しなくても、それに応じた見やすさを維持できるわけです。
ちなみにレスポンシブはＧｏｏｌｇｅ先生も推奨してるやり方でもあります。
前置きが長くなってしまいました。
本題の「salon_theme01」 はどうなってるかってことですが、色んな端末でアクセスして頂くとレイアウトの違いがお分かり頂けるかと思います。
今回切り替えポイントは主に3つとしました。
① 横幅 320px以上 （スマートフォン）
② 横幅 481ｐｘ以上 （タブレット）
③ 横幅 961ｐｘ以上 （デスクトップ）
指で操作すると想定されるサイズはアイコンにしてみました。
このブログの左のものを改造して。
① 例えばiphoneの画面サイズだと、ナビゲーションは４個＋４個に変わります。
② 例えばタブレットサイズのナビゲーションもアイコンタイプで1段。
サイドバーは下に落ちて、横並びです。
③ 例えばＰＣは右にサイドバーがある2カラム（列）
メインのナビゲーションは文字の横並び。
※ 少し画像が乱れてますが。
（赤色がコンテンツ 青色がサイドバー）
大きく分けて ① ② ③ の3パターンです。
これらは全て一つのＨＴＭＬで作っているので、「同じサイト」の「同じページ」ってことです。
ただし、androidなんか色んな幅があるので、ナビゲーションの４＋４が６＋２とかもあるかも。。
主に指で操作するであろう横幅と、マウスでするであろう横幅で、
他にも変えてるところはありますが、詳しくは省略します。
パソコンで観ている方も、横幅をドラッグして縮小すると変化がお分かり頂けるかと思います。
デモサイト
ちなみに、最大幅は２０４８pxまで対応させました。
携帯電話（いわゆるガラケー）も対応したので、（プラグインで対応可能）
「ガラケー」から「iphone」「Android」「ipad」「ネットブック」「デスクトップＰＣ」まで、
これらすべて、それぞれに最適化したレイアウトを反映します。
もちろんレスポンシブデザインもデメリットはあります。
それでも、スマートフォンには絶対対応したかったのでレスポンシブにしました。
あと、「レスポンシブウェブデザイン」って響きがオシャレでかっこいいやろ？
で、仮にこのテーマを使用する人が、レスポンシブに対応するためにやることは、
当たり前ですが特にありません。
画像も最適化されます。（・・・のはず。）
「アクセス」のページに作ってある（仮）ＧｏｏgleＭａｐも画面サイズに合わせて縮小されます。
なので、通常のページもブログも普通に作っていけばそれぞれの画面内で収まります。
これからサイトを作成する人やテーマを選ぶ人も、レスポンシブを取り入れるのも選択肢の一つだと思います。
また、後で知りましたが、レスポンシブにしなくても、自動でスマホ用に最適化してくれるプラグインもあります・・・(ToT)/~~~
それでは。