トリムデザインのWEBサイトをプチリニューアルしました
- WORKS-housesのインデックス化
- WORKS-othersのインデックス化
- worksに『土佐山田の家』を追加
- worksに『北長瀬の家』を追加
- worksに『高須の家』を追加
どうぞこれからも宜しくお願いします。
WEBサイトリニューアル奮闘記【技術編】は続きに！
〈一般の方にはちっとも面白くない内容ですが😅〉
今回は、見た目のデザインはそんなに変わっていませんが、実は大きくサイト全体を変更しています。以前のブログにも紹介しましたが、当所のサイトはすべて自分たちで手がけています。建築士の私たちが、自分たちの設計した建築と同じような気持ちで、サイトのデザインにも取り組んでいます。しかし、なんせ専門外…
技術的に悩みながらも、今回の大幅なリニューアルに挑んだ奮闘記を紹介します。
トリムデザインのWEBサイトを作成したのが2007年のちょうど今頃…テーブルレイアウトから、徐々にCSSレイアウトに移行しつつある世の中の流れに、乗り遅れそうな焦りを感じていながらも、従来通りのテーブルレイアウトで作成しました
あれから４年…
ろくにWEBデザインの勉強もせず、「いつかテーブルを使わないサイトを作りたいなぁ」「もっと簡単に更新作業ができるようにしたいなぁ」と思うばかり…
世の中が「HTML5＋CSS3」という新しい技術へと移行しようとしている中、時代の潮流に乗り遅れながらも、なんとかついていこうと、今更ながらにCSSレイアウトに着手する気になりました〈遅いぞ！〉
ちょうど新しいMacとADOBEのCS5が事務所にやってきたので、やる気が出たというのが、一番の理由です
最初はCSSのマルチカラムで５段組に挑戦し、「あら？意外に簡単」と着々と進んでいきました。最終的に悩んだのが、
- WORKS-housesのインデックス化
- WORKS-othersのインデックス化
CSSでサムネイルをロールオーバーさせる所までは良かったのですが、下部のリストにマウスオーバーしたときに、上部のサムネイルが差し替わるか、上部のボックスごと他の写真に差し替わるようにしたかった…いつまでも、サイトリニューアルにかかっている時間はないぞ！とタイムリミットを迎え、結局ポップアップで処理をしました。
WEB上でよく見かけたCSSのリモートロールオーバーは殆どがbackgroundの差し替え…上部のボックスにもう一つボックスを重ねてそのbackgroundを差し替えすれば出来るような…どなたか教えてください
次に、flashに対応していない場合に、静止画が代替えされるようにもしました。No flashサイトにしようかと思ったのですが、建築作品を紹介する「写真ギャラリー」のflashは、効率よく更新できるように既に作っていたので、まぁ代替画像が出るならflashでもいっかぁと、No flash化をあきらめました。今度は、スクリプトなしCSSのみで、写真のスライドショーを作ることに挑戦したいと思います。当所の「写真ギャラリー」の体裁でCSSスライドショーを実現する方法も、どなたか教えてください
その他ちょこちょこと細かな部分も変更し、思ったより早くリニューアル作業が完了
これからは、作業が楽になったので、こまめに手を入れてあげましょう…建築同様、こまめな手入れは大切ですね