2014年11月14日金曜日

WordPressで1カラムのスマホファーストなサイト

りんご農家さんのサイトを10年ほど前に作らせていただき、その後ずっと古い外観のまま更新を続けてきたのですが、
このたび久々にリニューアルをしました。
すきがら農園さんのサイトです。

Before

After

スマホファーストな設計

このサイトはオーナーさんがブログをしたいとか、フォームメールで販売したいとかのご希望がなく、ただ毎年、りんごの時期に営業案内を更新していくだけなので、特にリニューアルをして欲しいというご希望はなかったのですが、やはり今の時代、スマホ対応してないのはまずいですよね・・・ということで提案させていただきました。

ページ数も少なく、ブログなどのコンテンツもないシンプルなサイトです。
特にWordPressでやらなくても、静的に作っても問題なかったのですが、スマホ対策を考え、レスポンシブ・ウェブデザインがやりやすいということで、WordPressを入れて、ワンカラムのシンプルなテーマをインストールしました。

Graphy

使わせていただいたのは、Themegraphyで紹介されていた、WordPress.orgテンプレート、Graphyです。

とてもシンプルな美しいテンプレートで、ちょっとだけスタイルシートを追加しただけで出来ちゃいました。

ブラウザ、いろんな幅に対応しているので、どんどん縮めていくと、外観がくるくる変わっていきます。

iPhoneのようなサイズになるとこんな感じです↓

レスポンシブ・ウェブデザインで気をつけること

1)写真の横並びはリストを使うと良い





2)写真の幅は基本コンテンツの横幅いっぱいで作っておいて、あとの表示はスタイルシートにお任せする


たとえば、コンテンツの横幅を960pxって決めたら、すべての写真は原則そのサイズでアップしておいて、あとはスタイルシートにお任せすれば、ブラウザの幅に合わせて縮小してくれるので便利です。




4)ウィジェットが便利


サイドバーウィジェットからすべてはずせば、自動的にワンカラムになります。
(ページ作成のときに、全幅のテンプレートを選んでも良い)
フッターは4つついていたので、左から、
サイトロゴ、固定ページメニュー、カスタムメニュー、アドレスの4つに分けました。

ブラウザの幅が小さいときは、これがタテ並びになります。





5)ギャラリーが自動作成


写真を追加しようとして、「ギャラリーを作成」というメニューがあったので、何だろうって思いながら追加したら、超簡単にギャラリーが作れました。
最近のWordPressはすごい高機能なんですね(若干浦島太郎だったわたし)



素晴らしい景色の中、広いりんご園でのんびりとピクニックしてみたい方はぜひ、長野県松川町のすきがら農園に問い合わせてください。
(すみませんがメール対応ができるスタッフさんがおりませんので、すべて電話かFAXでの対応となります)

長野県中央自動車道松川インターから車で5分、車いす可能、ペット可能、お弁当持ち込み可能、(園内に椅子や、直売所の2Fに休憩室あり) おつけものやお茶のサービスあります。

毎年りんご狩りが出来る期間が区切られていて、その時期しか開園していませんので注意ください。



0 件のコメント:

webの森のFBページへも来て下さい