サイト改装しました サイト改装しました

Posted on

以前にも地味に構造を変更した作業を行っていたと思いますが、テーマごっそり替えました。

リニューアルまでの経緯

WordPress がバージョンアップするごとに様々な機能が実装されているので、それらを上手く取り入れて投稿を楽にしたいがために根本的に変更。ただしデザインは大きく変えない。

おおまかにはこんなのを運営的に希望してました。

まだ制作物一覧ページが用意されていない(そもそも多くの経歴がない)ので、これについては夏コミ以降に引き続き制作していこうと考えています。

ブラウザ対応状況

Windows
  • Firefox 4
  • Google Chrome Beta 11
  • Opera 11
  • Safari 5
  • Internet Explorer 9/8/7
Mac
  • Safari 5
  • Firefox 4
  • Google Chrome

基本最新ブラウザ推奨。個人のイラストサイトだからレガシーブラウザのことはあまり考えていません。あとMac に関しては公開した後で確認したようなものなので、気付かぬところでバグが残っているかもしれないです。

こだわってみたところ

jQuery や CSS3 らしい視覚的効果は乱用しない

アニメーションとか text-shadow とかは一切使わない、アニメーションは Twitter の投稿を表示する部分のみにとどめています(けど border-radius は使う)。上手く実装出来ればリッチなデザインに見えても、若干動作が重くなるので余計なものは排除の方向で。

display: table-cell

IE8 から対応した テーブルっぽい動作をする display プロパティを各所に使用しています。必要に応じて幅を可変したかったり、要素を左右に寄せたいけどテキストの回り込みはしたくないレイアウトに重宝します。サポートしていないブラウザだと見え方が若干違います。

変更した箇所

Gallery にオリジナルサイズ画像専用ページを復活させた

イラストのサイズをブラウザサイズに応じて可変させる機能は deviantArt 、かつて存在したオリジナルサイズ画像専用のページ( WordPress の添付ファイル用ページ)は Flickr を真似ていました。前回のリニューアルで後者を廃止して、個別ページ上で画像を切り替えれるようにしていましたが、別途画像を見るためだけのシンプルなページを用意した方が便利だろうと判断して戻しました。

グローバルナビゲーションの配置変更 / サイドバー廃止、中の項目を移動

今まで一番上に横並びに配置してましたが、これだとページジャンプを行った際にナビゲーションと飛んだ先が被ってしまうことがあるので、ナビゲーションを左端に固定して被らないように変更。グローバルナビゲーションは引き続き座標固定でスクロールに影響しないようにしてあります。

それに伴って、サイドバーに配置していた内容を場所変更ないし廃止しました。そこまで見てほしい情報もないですし、だったら潔くなくしてしまえと。これまで配置していた Twitter の最新投稿と委託販売情報はページ下に移動しました。けど実質廃止になったのは最新投稿一覧のみ。

最新参加イベントの表示方法を変更

これまでサイドバーに表示していたサークルカットなどは、必要に応じてフロントページの Gallery の一部をずらして表示するようにしました。この部分の表示のためにサイドバーが重要だったので、そのジレンマから離れられただけでも進歩。

Blog では先頭に該当する投稿を固定して表示するようにしています。レイアウトからして大きな画像がないとしまりがない構造ですが(過去の投稿を見ると分かります)、要は毎回用意するってことです。

関連投稿を表示

だいぶ投稿数も増えてきたのでそろそろ付けようかと。

Before / After

フロントページ

Before

After

投稿ページ

Before

After

比較してみると、以前よりサイドバーがすっきりしたことが分かります。何か追加で置きたいところですが、ナビゲーションを固定している以上高さを考慮しなければならないため、これより下に何かを配置するつもりはないです。

だいたいこんな感じです。

どうせやるならフロントページから何から何まで構造を変えてしまうのもありかもしれませんが、イラストがいくつも溜まってサムネイルが羅列する姿を見届けたいのでしばらくはこのレイアウトが基本のままかと思います。

それではしばらくイラスト制作に集中していきます。