Aokashi Homeをリニューアルしました
夏季期間に向けて、Aokashi Homeをリニューアルしました。
- 新しいテンプレート「Aokashi Base」を採用
- 資料集を復活
- MODXのバージョンアップ
それぞれ説明します
新テンプレート「Aokashi Base」
リニューアルしたAokashi Homeのテンプレート「Aokashi Base」は現代にふさわしいデザインとjQueryの実装により、見た目から中身まで強化しました。
- 以前のテンプレートには異なる閲覧環境でも正常に見れるように初期化用のCSSファイルを用意していたが、今回からはメインのCSSファイルへ統合し初期化も簡易的に仕上げた
- 複雑に、必要以上にタグ(要素)を設けていた構造を、出来る限りシンプルに設計した
- これまで背景は初代ウェブサイト「Coden City」としてシルバーを採用していたが、見やすさを重視して白に変更
その代わりに、ヘッダーメニューやサイドバー、フッターの背景にシルバーを採用 - 「トップ」「サイドバーへ移動」ボタンを右下に固定
jQueryにより、スクロールで履歴に残らない他、アニメーションも実装しました - ヘッダーに背景を導入し、ページごとに変わるようになった
例えば、WWAのページだとWWAに適した背景になります - ヘッダーメニューはページが多くても支障がないように幅が可変になった
スマートフォンといった幅の狭い環境になるとメニューボタンが付き、jQueryで開閉を実現しています - サイドバーはメニューだけになった
もともとサイドバーに配置していた注意や情報などは内容に配置しました - フッターにウェブサイトに関する簡単な情報を配置した
フッター内の内容はどのページも同じです
注意や情報などは以下の欄を使うことで表現を豊かにすることができます。
- 「注意」のサンプルです
- 「情報」のサンプルです
- 「警告」のサンプルです
また、以下はリッチエディタの仕様で実装できなかった点です。
- 上記3つのasideタグの使用
- sectionタグの使用
仕様の変更
- トップページのタイトルをサイト名だけにした
- トップページ、WWAトップのヘッダーを大きくした
- サイドバーの幅に余裕が出たため、わかりづらかったメニュー内のタイトルをタイトルそのまま表示するようにした
項目の追加、移動
- 資料集を復活しました
主に管理人に関する資料を資料集に用意しています - 障害情報をフッターに配置しました
フッターに配置しているため、どのページでも見れるようにしています。
項目の修正
- 見出しを1ランク下げた
テンプレートの仕様によるものです - olタグやulタグが重なっている場合、liタグを必ず挟むように変更した
今まではリッチエディタの仕様でliタグを挟まないようにしていましたが、文法エラーが起きたため、変更しました - 当サイトのご利用についてを修正
仕様上、推奨環境をInternet Exololer 9以降から10以降に変更しました
システム
- MODXを1.0.14J-r8から1.0.14J-r9へバージョンアップ
Aokashi Home公開後に新しいMODXが公開されたようなので、遅れてここもバージョンアップしました
なんだか運が無い
MODX Revoltionの変更も予定していましたが、使えるはずの機能が使えなかったり、記述したコードが動作してくれなかったため、見送りました
今後の予定
- WWAをMODXのリソースに埋め込む
テンプレート変数の活用により、WWA作品の一覧表示の自動化が実現できます - お知らせ(つまりここ)のテンプレートを簡易化
お知らせのページはウェブサイトの更新が進む度に増えていきますが、ページ数が多いとテンプレートの更新に時間がかかりメンテナンスに支障が出るため、内容とメニュー程度に抑えたテンプレートにするつもりです - FS TOWNの夏季期間復活
恐らく、FS TOWN最後の限定公開になります