現在の持っているhtml、ｊｓ、ｃｓｓの知識を元に遊戯王☆SELF-DISINTEGRATIONのトップページを1から作りなおしたらどうなるのか？ということを念頭に、公開から3代目となるトップページへリメイクを行いました。情報量は以前より多いんだけど、スタイリッシュに。言うなれば00セブンソードから00クアンタのような進化を目指しています(おかげで一部意匠やカラーリングがクアンタっぽい・・・)。

トップページである以上、そこがサイトのフォームポジションである必要があります。そのためには各コンテンツへのアクセスということはもちろんなのですが、やっぱり展開して落ち着ける画面であるということが大前提。そういった思惑もあって、ワリと自分が使いやすいように配置し直してます。
また、それまで縦に伸びていったコンテンツを内側へと落としこむように作ることで間延びせず今後の展開が可能です。そういえば中心のあれは一体何なんでしょう？自分でも気になります。

そうそう、Flashからjavascriptに移行したので、ヘッダーの画像交換なんかも楽になります。全体の統一感を出すために素材全部作ったので結構大変でした( ´∀｀)
死ぬ前の身辺整理？のような気がしないでもないですが、何はともあれ改めてお付き合いくださいませ。

どうも、自分です。S-Dも含め更新がマチマチになってますが一応色々やってますので、今回はそのまとめをば。
　

掲示板

　

最近更新が滞ってた一番の理由。こっち側はコンタクト取る手段がなくて不便だったので、掲示板作ってみました。
画像とか全部準備してたので大変だったけど、いい感じで作れたと思う。やっぱりインフラは自前で準備してナンボだよねぇ。 元ネタはデュラララ？残念、AKIBA'S TRIPだよ！！
S-Dの方も同システムに差し替えます。これであのレンタル掲示板とオサラバできます。

　

S-D考察項目

1ヶ月ぐらいかけて、個別ページデザインの見直しを図っています。
まず、ヘッダーとフッター再構成して、ページ全体がまとまるようにしました。ついでにコンテナでパンくずリストが表示できるようにとか、今後の拡充がしやすいように。
そして、カード情報の横に追加したサイドバー。遠くからページ見てたらどうもスペースが気になったので、カジュアルな？コンテンツフレームを作ってみました。ソーシャルボタンとか公式へのリンクとか、機能的にあると便利なものを重点的に。

ついでにカード情報の枠もリニューアル。雰囲気は出せたかな？背景に新生S-Dロゴも入れてみました。 現在はモンスターのみですが、魔法や罠には別の背景を挿す予定。

ページ自体の書換量がかなり複雑なのでサイト全体への反映には時間がかかりますが、暇なときに差し替えていきます。

ここ数カ月で修正した本家サイトの変更点を書き記してみる．

トップ

デザインはそのままに，htmlのおかしな部分を修正．半透明の拡張コンテンツも利用してみた．
ブラウザごとの差も極力なくなっているはず．

考察ページ

間違いないくウチのメインコンテンツになりえてるわけだけど，最近は限界を感じていたり．特に物量的な意味では時間もマンパワーも足りないんだよ…．
本来はカードの充実なんて考えてなかったけど，今のスタイルだとどうしてもそっちに目が行ってしまう．
とはいえ，どう足掻いてもWiki以上の物量は作れないし，それをやってるとその他のコンテンツが全然更新できない．おまけにページが増えれば増えるほどリペアにも時間をとられてしまう．ここら辺が個人サイトの限界になるんだろうなぁ．

考察トップページ

全体的なデザインをスタイリッシュに．javascriptを使った選択ウィンドウがお気に入り．

各シリーズ別ページ

ページの縦の長さがが半端なかったので，右端にトップとボトム，トップページへのリンクボタンを付けてみた．ウインドウと一緒に動くので使いやすいかなぁと．スマートフォンで見たときも案外使いやすかったり．
後，CSSで整理したら，ページサイズが30%減ってワロタｗｗ

スマートフォン用ページ

専用モジュールを使って作ってみた．HTML5の記述だけで作成できるので結構作りやすい．ただ，β版にも届いてないα版なので動作の不安定感が半端ないという結論に・・・．

個別考察

今になってやっとテーブルデザインを変更．最近は大型ディスプレイで見ることが多くて，サイトの幅がすっごい気になってたので，それも調整．それが×1600なので鬱になりかけてますガガガ．

デッキサンプルページ

ボリュームが気になってきたので，ページの分割&格納モジュールを使って全体的にスタイリッシュに．
ちなみにこの格納技術は個別考察ページにも使ってます．