仕事

最近、とある喫茶店のホームページをボケ防止の頭の体操で作ってみました(^.^)

こちらです↓↓↓
「海の見える喫茶店-タイムアウトカフェ」
http://umi-kissa.2-d.jp/

今回のホームページの特長をいくつかご紹介しましょう!

1.レスポンシブデザイン対応。

レスポンシブデザインとは、『ウェブデザインの手法の一つで、様々な種類の機器や画面サイズに、単一のファイルで対応すること』ですが、
つまりは、幅の広いパソコンで見ても、幅の狭いスマホで見ても自動的にレイアウトや文字の大きさが変化して見やすくなるようにホームページをプログラムするということです。
今回のサイトもそのように出来上がりました!

まず、パソコンで見るとこんな感じです ↓↓↓
WS000100.jpg
幅を縮めて、iPadのタテで見るくらいになると ↓↓↓
上のメニューが2段になり、
WS000101.jpg
さらに縮めていき、アイフォーンで見るくらいにすると↓↓↓
WS000102.jpg
上のメニューが一段になり、押すとメニューが広がる形式になります。また、右の写真の列が下に行き、レイアウトが縦1列になります。
WS000101 (2).jpg

2.写真の拡大ポップアップ機能。

多くの写真をクリックすると大きく表示されます。また押すと元に戻ります。

右上の小さい写真をクリックすると・・・
WS000104.jpg
ひゅっと大きく表示されます。
WS000103.jpg
こういうのによく使われるのはlightBoxというプログラムセットですが、今回は別のを使いました。

3.スマホのPC表示機能。

アイフォーンなどのスマホで見ると、下の方にPCサイトとSPサイトの切り替えボタンが表示されます。
IMG_9531.jpg
パソコンで見るように見たい場合はPCサイトを押すと、幅が1024ピクセルに強制的に設定され、幅の広い画面で見るのと同じレイアウトで見ることができます。
IMG_9532.jpg

4.手書き風文字の表示。

観光案内と日記のページには親しみ感のある手書き風文字が表示されるようにしてみました。

一般的にホームページに表示できるフォントは、見る側のパソコンに入っているフォントになりますので、手書き風フォントもパソコンに入ってなければ表示できません。

そこで、ウェブフォントという方法で、サーバーにフォントを置いてそこから引っ張ってきて表示させています。

5.メールフォームの設置。

お問合せページには、フォームに入力してメール送信できる機能を設置しました。

今回は、「メールフォームプロ」を使用しました。なかなか高機能なプログラム群で、郵便番号を入力するだけで、自動的にそれ以降の住所が入力されます。
WS000105.jpg

6.日記機能の設置。

喫茶店日記ページを作り、新着情報やお知らせを書けるようにしました。
WS000200.jpg
一般的に日記やブログは、ワードプレスなど、CMSプログラム群を使うのですが、それですとデーターベースを使用したり、膨大な数のファイルを入れたりしないといけないので、今回はもっと簡略的な日記プログラム群を使いました。

その他、トップページを近年はやりの「パララックス」つまり視差効果を取り入れた目を引くものにしたり、グーグル地図が表示されるようにしたり、メモ風の背景をCSSの設定で少し回転させて斜めに配置してみたりなど、いろいろと遊んでみました。

作成期間は12月22日ころから時間あるときにぼちぼち作り始めて、1/2にだいたい完成できましたので意外と短期間でできたかな?と。
(^v^)/

館山日記

館山の海岸道路沿いに毎年咲く黄色いお花。
いつも車で通り過ぎながら見るだけでしたが、ついに写真に収めることができました ^^)
DSC01930b.jpg
結構たくさん咲いています。
DSC01934b.jpg
ところどころに誌的な言葉が。
DSC01940.jpg
道の向かいには喫茶店があります。
DSC01933.jpg
DSC01937.jpg
↑↑↑上の写真の一部分をパソコン上で切り取ってみましょう。高解像度カメラなので、細かく写っています♪
DSC01937b.jpg
DSC01937s.jpg
DSC01943.jpg

館山日記

今年の冬は暖かいようで、ここ館山の菜の花も今が見ごろという感じです。暖かいと、菜の花の背がすぐに高くなって倒れてしまい、見栄えが悪くならないか心配です。
さて、最近の写真などをご披露しましょう(^^)/
こちらは海沿いに最近できた喫茶店屋さん。「Ocean Gate 103」
IMG_20160102_144156b.jpg
情報によると、駅前の人気喫茶店カフェダルマが移転してきたとのこと。
http://cafedelmar-tateyama.com/info/1035208
こちらは布良(めら)漁港を歩いた時のもの。釣りをしている人も少なからずいました。
IMG_20151218_111215.jpg
遠くには富士山が見えます。
IMG_20151218_111215s.jpg
こちらはめがね橋のあたり。神社の近くからの風景。
IMG_6438.jpg
こちらは夕焼け。イオンの駐車場から。
IMG_20151209_165535.jpg
冬でもいろいろなお花が咲いています。なんていう名前でしょう?
IMG_6433s.jpg
IMG_6435s.jpg
カロリーブロック30日分をまたまた買ってきました。これでしばらく食には困らないかと(^.^)
IMG_6429b.jpg
また、地震と津波が来た時の非常食にもなりますし。

館山日記

イオンでお買い物したらムーミン70年記念キャンペーンなるものをしていて、シールを集めてついにゲットしたものが↓↓↓です。!(^^)!
ムーミンマグカップ春夏版!
IMG_6362.jpg
秋冬版もあったのですが、春夏のほうがカラフルでしたのでこちらにしました。
IMG_6363.jpg
最近行きつけの洲崎の喫茶店タイムアウトで飲んだコーヒー。
やはりキリマンジャロが適度な酸味がありおいしいです。
IMG_20151102_134524.jpg
コーヒーにはお代わりとチョコがついてきます(^.^)
IMG_20151102_134738.jpg
ついでに手作り焼きたてのマッシュポテトもいただきました(^^)/
IMG_20151102_135916.jpg
皮ごといただきます。
IMG_20151102_140147.jpg
↓↓↓こちらは最近イオンのフードコードでたべたもの。
カレー+から揚げ+カボ天
IMG_20151022_180637.jpg
五目チャーハン
IMG_20151026_180804.jpg
↑↑↑この中華屋さんはスープが日によってちがうようで、あるとき食べたらおもしろい味のスープだな(・・?
と思ってみたら、トマトの角切りが入っていました。
白浜のほうを歩いていましたら、いました、~>゜)~~~ ヘビ(^O^)
IMG_20151024_102506.jpg
写真撮ろうとしたら、なかなか素早くて、顔を隠して尻隠さずになってしまいました。ヘビは目が丸くてなかなかかわいいです。もちろん毒蛇ならすぐ逃げてきますが(^-^;

館山日記

こちらは館山のとあるフランス料理オーベルジュ。
名物のわんこがお出迎え。
DSC01068.jpg
そのお庭に咲いていたお花。
DSC01076.jpg
DSC01078.jpg
こちらはたてやま漁師料理で食べたおいしいお寿司。
たてやま海鮮丼。
IMG_2661.jpg
たてやま握りずし
IMG_2725.jpg
いつの間にか誕生していた千葉県のキャラクター「ぴーにゃっつ」なるもの。
IMG_2731.jpg
城山公園のクジャク園に行きましたら、
最初はみんなオリの中にいて、羽も閉じていたのですが、
我々人間が見ていると、次から次へと羽を開いてみせてくれました。
名物の白いクジャク。これが先に羽を大きく広げて見せてくれました。
IMG_2675.jpg
小さいのも頑張って羽開いています。
IMG_2709.jpg
少し開いて毛づくろい。
IMG_2712.jpg
IMG_2700.jpg
こちらはティータイムに立ち寄った洲崎のタイムアウトという喫茶店のコーヒー。
IMG_2735.jpg

旅行記

2010年の夏も山梨へ行きました。
お盆休みは渋滞するので、いつも休みの後の16日ころから行きます。
清里の牧場公園。羊などと遊ぶことができます。ソフトクリームもそれなりに美味しかった。
IMG_2369.jpg
ハナという、去年の秋にできたばかりの喫茶店。
ここではカレーライスを食べました。ふかし物料理が得意のようで、ショウロンポウや肉まんや、ふかしご飯などもおいしかった。
IMG_2378b.jpg
このようなたたずまい。
IMG_2379.jpg
テーブルのわきの花瓶の花にミツハチが来ていました。
IMG_2391b.jpg
IMG_2391c.jpg