CALENDAR
S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      
<< June 2019 >>
ARCHIVES
CATEGORIES
Amazon左








マウスコンピューター/G-Tune






MOBILE
qrcode
<< 「日本全国泊まっていい宿」ホームページをフルリニューアル | main | 第69回(2018)NHK紅白歌合戦 出場順・曲名・ゲスト審査員・出演者一覧 >>
「旅行情報-Travelinfo-」ホームページをフルリニューアル
今日は年末恒例の墓参と、10月に買った新車のプリウスの初めての洗車のあと、「旅行情報-Travelinfo-」という、私の旅行系ホームページのTOP画面に相当するページを、レスポンシブデザインで作り直した。たったの1ページです。前は表紙と、国内旅行、海外旅行の3ページを作っていました。

travel-4.jpg

このデザインは昨日作った「日本全国泊まっていい宿」と同様、「HTML5 & CSS3デザインブック」のサンプルデザインのほぼそのままの応用である。ありがとうございます。
飛行機の写真は成田空港を飛び立つ、ANAのニューヨーク行きです。こういう写真はいくらでもあるが、この日は天気がよくなかった。

レスポンシブデザインのため、スマホでもタブレットでもきれいに見える。

IMG_8501.jpg

これが"設計図"というか、サムネイルです。



以前のデザインはこちら。
このホームページだけで国内旅行も海外旅行もすべてが手配できるという意気込みで作ったホームページで、実際に私の個人的な旅行や出張も、このページを入り口としてすべてまかなえていた。

travel 1.jpg

しかし、ほかの人から閲覧されることはほとんどなかった。あまりに稚拙なデザインである。趣味として、いろんなホームページ制作技術を試したかったのだ。
今回、SSLの導入とモバイルフレンドリーにしたので、Googleの検索結果はどうなるだろうか。中味がないのでGoogleから価値がないとみなされそうで、あまり期待しないほうがいいと思う。

今回、font icon(フォントアイコン)というワザを使っている。これもデザインブックの受け売りだ。しかし簡単にはいかなかった。

フォントアイコンは、アイコンが文字同様にフォント状になっているもので、拡大や色付けが自由に出来て、パソコンとスマホでも同じように見える。
右上のトグルボタンのみたいのも、スーツケースや地球のアイコンもフォントアイコンだ。

travel-5.jpg

デザインブックで紹介されていたFont Awesomeを利用したのだが、本とフォントアイコンのバージョンが違っていて、これに気づくのにだいぶ時間を要した。CSSのタグのどこかをヘンにいじったのではないかと、スタイルシートも何度も見直してしまった。

スマホ対応でぜひともやりたかったのが、上部にある、パソコンでは横に並んだメニューが、スマホでは右上の赤丸のトグルボタンになって、それをクリックすると下に縦並びにせり出して表示される動作である。

travel-6.jpg

サンプルコードのままでやれば動くのに、こちらが一部を書き換えたらまったく動作しなくなった。
散々試行錯誤を繰り返したが、フォントアイコンのバージョンを最新にしたので、それを動かすjQueryも最新バージョンにしなければならなかった。これに気づくのにかなりの時間を要した。

結果的にちゃんと動いたのでよかったし、こういう失敗の経験を積み上げて学んでいくものなのだと思う。

それにしても、ベースのホームページは今から12年前の2006年から作っており、このころは子供たちも学校だったし、仕事も遊びもそれなりにやっており、よくもこんなことをしている時間があったのだと感心する。でも、要は時間の使い方と能力の問題だと思う。

これで旅行系ホームページの改修は一段落。次はクイズ系のホームページの改修をするけど、これは来年からにする。

  
| パソコン・インターネット | 20:18 | comments(0) | - |


コメント
コメントする