2017年02月23日

2017年2月の館山

2017年2月版の写真日記をお届けしましょう( ^^)/

近所の小道を見ると、電柱の陰になにかいます・・・
IMG_9697.jpg

近づいてみると、ネコが隠れていました。陰にかくれて獲物を狙っているのでしょうか?
IMG_9698.jpg

さらに近づくと行ってしまいました・・・
IMG_9699.jpg

「ち!人間がきたから獲物が逃げちまったじゃんか」
IMG_9700.jpg

お花の時期となってきました。
富士山と菜の花
IMG_9742.jpg

IMG_9749.jpg


IMG_9713.jpg

おいしいものの写真もどうぞ(^.^)

大きな海鮮海苔巻き。
IMG_9702.jpg

IMG_9705.jpg

トリプルチーズバーガー!
IMG_9717.jpg

まあ、こんなものでしょう。
IMG_9718.jpg

宇治金時ケーキ
IMG_9805.jpg

栗ケーキ
IMG_9806.jpg

酢豚定食!!
IMG_9871.jpg

IMG_9872.jpg
posted by ピーコロ at 23:23| 千葉 ☁| 館山日記 | このブログの読者になる | 更新情報をチェックする

2017年01月23日

真冬の館山−2017年1月

この冬は館山でも何度か雪が降りました(^.^)

寒いある夜の雪。車にまとわりつきました。
IMG_9620.jpg

IMG_9623.jpg

寒い別の日の雪。雪国になったようです。
IMG_9627.jpg

雪というかあられのようです。
IMG_9626.jpg

寒い日はあったかいもの、ということで、久しぶりにチャーシュー麺を食べます。ラーメンはめったに食べないのですが。
IMG_9666.jpg

うまそうなチャーシュー(^O^)
IMG_9668.jpg

IMG_9669.jpg

こちらはほかの寒い日に食べたきくらげと卵定食。
IMG_9553.jpg

IMG_9555.jpg

寒い中猫も元気に日向ぼっこしています。
IMG_9650.jpg

IMG_9651.jpg

IMG_9651s.jpg

寒くても、春が近づいています。
IMG_9653.jpg

寒い日陰にもお花が咲いていました。
IMG_9538.jpg

IMG_9540.jpg

さて、この記事で「寒い」という言葉は何回出てきたでしょう
(^-^;)?
posted by ピーコロ at 11:26| 千葉 ☀| 館山日記 | このブログの読者になる | 更新情報をチェックする

2017年01月04日

とある喫茶店のホームページ作成

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

こちらです↓↓↓
「海の見える喫茶店−タイムアウトカフェ」
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^)/
posted by ピーコロ at 17:04| 千葉 ☀| 仕事 | このブログの読者になる | 更新情報をチェックする