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

りんご農家さんのサイトを10年ほど前に作らせていただき、その後ずっと古い外観のまま更新を続けてきたのですが、

このたび久々にリニューアルをしました。

すきがら農園さんのサイトです。

Before

After

スマホファーストな設計

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

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

Graphy

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

Graphyのデモはこちら　ダウンロードはこちら

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

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

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

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

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

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

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

４）ウィジェットが便利

サイドバーウィジェットからすべてはずせば、自動的にワンカラムになります。

（ページ作成のときに、全幅のテンプレートを選んでも良い）

フッターは４つついていたので、左から、

サイトロゴ、固定ページメニュー、カスタムメニュー、アドレスの４つに分けました。

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

５）ギャラリーが自動作成

写真を追加しようとして、「ギャラリーを作成」というメニューがあったので、何だろうって思いながら追加したら、超簡単にギャラリーが作れました。

最近のWordPressはすごい高機能なんですね（若干浦島太郎だったわたし）

素晴らしい景色の中、広いりんご園でのんびりとピクニックしてみたい方はぜひ、長野県松川町のすきがら農園に問い合わせてください。

（すみませんがメール対応ができるスタッフさんがおりませんので、すべて電話かFAXでの対応となります）

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

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