最近、とある喫茶店のホームページをボケ防止の頭の体操で作ってみました(^.^)
こちらです↓↓↓
「海の見える喫茶店－タイムアウトカフェ」
今回のホームページの特長をいくつかご紹介しましょう！
1.レスポンシブデザイン対応。
レスポンシブデザインとは、『ウェブデザインの手法の一つで、様々な種類の機器や画面サイズに、単一のファイルで対応すること』ですが、
つまりは、幅の広いパソコンで見ても、幅の狭いスマホで見ても自動的にレイアウトや文字の大きさが変化して見やすくなるようにホームページをプログラムするということです。
今回のサイトもそのように出来上がりました！
まず、パソコンで見るとこんな感じです ↓↓↓
幅を縮めて、iPadのタテで見るくらいになると ↓↓↓
上のメニューが2段になり、
さらに縮めていき、アイフォーンで見るくらいにすると↓↓↓
上のメニューが一段になり、押すとメニューが広がる形式になります。また、右の写真の列が下に行き、レイアウトが縦1列になります。
2.写真の拡大ポップアップ機能。
多くの写真をクリックすると大きく表示されます。また押すと元に戻ります。
右上の小さい写真をクリックすると・・・
ひゅっと大きく表示されます。
こういうのによく使われるのはlightBoxというプログラムセットですが、今回は別のを使いました。
3.スマホのPC表示機能。
アイフォーンなどのスマホで見ると、下の方にPCサイトとSPサイトの切り替えボタンが表示されます。
パソコンで見るように見たい場合はPCサイトを押すと、幅が1024ピクセルに強制的に設定され、幅の広い画面で見るのと同じレイアウトで見ることができます。
4.手書き風文字の表示。
観光案内と日記のページには親しみ感のある手書き風文字が表示されるようにしてみました。
一般的にホームページに表示できるフォントは、見る側のパソコンに入っているフォントになりますので、手書き風フォントもパソコンに入ってなければ表示できません。
そこで、ウェブフォントという方法で、サーバーにフォントを置いてそこから引っ張ってきて表示させています。
5.メールフォームの設置。
お問合せページには、フォームに入力してメール送信できる機能を設置しました。
今回は、「メールフォームプロ」を使用しました。なかなか高機能なプログラム群で、郵便番号を入力するだけで、自動的にそれ以降の住所が入力されます。
6.日記機能の設置。
喫茶店日記ページを作り、新着情報やお知らせを書けるようにしました。
一般的に日記やブログは、ワードプレスなど、CMSプログラム群を使うのですが、それですとデータｰベースを使用したり、膨大な数のファイルを入れたりしないといけないので、今回はもっと簡略的な日記プログラム群を使いました。
その他、トップページを近年はやりの「パララックス」つまり視差効果を取り入れた目を引くものにしたり、グーグル地図が表示されるようにしたり、メモ風の背景をCSSの設定で少し回転させて斜めに配置してみたりなど、いろいろと遊んでみました。
作成期間は12月22日ころから時間あるときにぼちぼち作り始めて、1/2にだいたい完成できましたので意外と短期間でできたかな？と。
（＾ｖ＾）/
