唐突ですが、よんち印刷のサイトをリニューアルしましたー!
ほんとはこれまでのコンテンツを全部リニューアルしてからって思ってたんですが、数ページ作ったところで停滞しちゃったので、とりあえず今あるページだけ新しくしましたよ。
これまでのサイトは特に目新しい技術は使わず、ちょっと複雑なCSSとSSIぐらいしか使ってなかったんですね。あんまりはりきるようなサイトじゃないしなーと思ってたのもあり。
ただここにきてhtml組みたい欲がすさまじかったので、久しぶりに色々と新しいことに挑戦してみた次第です。
まず見た目のですが、ページのセンタリングですね! CSSでやると結構クセがあるんです。この辺はサークルページでも使ってるので、それほど目新しくもないですね。
背景のグラデーションをCSSで塗ってみました。これは初めて使った。てかかなり最近に制定されたものとのこと。おー。
あと、上のリンクメニューにカーソルを合わせると点滅をするんすよ! CSSアニメーションなので指定も楽々。一昔前みたいにいちいちGIF動画を作らなくていいわけです。画期的ー。
あとあと、インデックスページでは、企業サイトとかでよく見かける画像が横にしゅーん…って流れるアレを導入。画像が横に流れていくだけでこんなにおしゃれそうに見えるなんて…! 流してまで見せたい情報が無いのが残念でなりませんね。
あとあとあと、地味だけどうちが一番ビビってるところは、ソースの二行目
<html lang=”ja” class=”B”>
この”B”のところを、”O”たとか”G”に変えるだけでオレンジ色系とか緑色系にサイトの配色を変えられるようになったことですね!! こういうのはそれぞれの要素に色毎の定義を作らないといけないと思ってたのに、1箇所いじるだけで全部変わるなんて。
背景のグラデーション、メニューの点滅アニメーションを画像を使わず作れたので、準備しないといけない画像が少なくてすみ、しかもカラーバリエーションも自在ときたら、感動も感動なのですよー。…何言ってるか分からない? 伝える気がないと片付けちゃえばそれまでのことさ。
──ってのもあまりにアレなんで、このhtmlとこのCSSをダウンロードして同じフォルダに入れて、HTMLの方の2行目のBってところをOとかGに変えて、HTMLをブラウザで開くだけでサイトの配色が変わるのでよかったら試してみてくだしゃぁ。
ただ、見出し部分については普通のゴシック体じゃ味気なかったので画像にしてます。こういう感じで使い勝手の良いwebフォントでもあればそれを使ったんだけど気に入るのがなかったのでね。
あとさりげなく看板娘もリニューアルしてます! 東堂園にいといいます。園って字にこだわりが有るわけじゃ無いけど、美章園も東堂園も大学の時に同じ学科にいた人の名字から頂いてます。
名字は割とさくっと決まったんだけど名前はなかなか難産でした。で結局キーボードを見て決めた、と。駒井まいさんはje。美章園ゆいさんは8e。東堂園にいさんはie…といった感じです。かなり雑。
てこまいギークな方はご存じかもしれないけど、以前東北某市のお祭りで危うく街を練り歩きそうになった子のリサイクルです。配色が結構ぶっ飛んでますが印刷見本とかで使いやすいようにあえてギラギラした色をたくさん使った次第です。
ちなみにこれまでのよんち印刷にいた3人目は解雇されました。さらばまた会う日まで。
などなど、まだ整備したいコンテンツはあるんだけど、なにしろまだ大事な部分がリニューアル出来てないので、その辺を整えてからまた作っていこと思います。