sitebbiw' memo

岡崎京子ファンサイト「BIG BOREDOM in WWW」のイケダのブログ。

今回のリニューアルの覚書

きっかけは何だったか、2月の下旬に突如思い立ったリニューアル。実質10日〜2週間くらいの作業期間で公開に至りました。


動きのある部分にフラッシュを使用している部分のを代替方法に移行することとcss3の積極使用で画像パーツ数を減らすこと、その辺りがメインテーマでした。あとはまあ「飽きてきた」っていうのと。技術的なまとめとしては、jqueryとcss3導入ってことになるんでしょうか。


トップページ。構成はそう変わってないんですが、段組をfloatからcolumnに変えた点は大きいです。IE8では段組されなくなりましたから。あとページめくりのエフェクトを備えた画像化…イメージのswfをやめにして、その代りにページ背景全面にランダム表示するようにしました。トップページだけのつもりでいましたが、結局全ページで行うことにしました。読みやすさを全然考慮しなかったわけではないですが、それでもまあキツい背景の時もあるので、ページ上部「岡崎京子ファンサイト・BIG BOREDOM in WWW」の書いてある黒いバーをクリックすると、背景画像の読み込みなおしが行えるようにしています。


ページめくりswfの時はデータアクセスにxmlファイルを使ってたんですが、今回の背景画像ではjson使用に変更しました。背景画像全画面は「jquery.anystretch.min.js」というjqueryプラグインを使わせてもらいました。


映像化インデクス。概ね見た目の変更は行わずに、ActionScriptからJavaScriptへ移行した感じです。いちばんのメリットはフラッシュではステージサイズが固定されていましたが、その縛りから開放されたこと。気持ち的な部分ですけど。ここでもリストデータはxmlからjsonへ移行を行いました。各ポラロイドイメージの傾きは、ループ中に個別にインラインでスタイル振り、その中でランダム値を渡してます。「-3〜+3の範囲で0は除く」なので、6までのランダム値作った後3を引き、渡す際に0だった場合は1足してやってます。(0じゃなきゃいい程度のものなので…)


大きい内容はそんな辺りでしょうか。W3C validaorはトップページだけは通すよう心がけましたが、他ページは案外いい加減です。志低くてすみません。


ちっちゃい部分では、以前トップのtwitter、jsで取得表示していて、twitterapiの仕様変更から表示されなくなったのでオフィシャル提供のiframe表示にしていたんですが、またapi使用のものに書き換えました。この辺りは「twitter api jquery」辺りで検索して出てくるページを参考にさせてもらいました。最終的にいい形になったと思います。