Aurelia storage : beta - log

最近セーブ・ロード画面のデザインを変える機会があって、
これはメモとして残しておいた方が後々便利かな……と思ったのでこの記事を書いています。

基本的にはtyrano.cssを弄っていきます。
何らかのミスで大変なことになってしまった！というときのために、
編集前のtyrano.cssや各.htmlは残しておいてくださいね。

---

セーブ・ロード画面のデザインを変える

どんなテキストエディタでも構わないので、tyrano.cssを開きます。
あノこはAtomを使っています。以前はmiを使用していました。シンタックスハイライトがあると便利。

セーブ・ロード画面のデザインが記述されているのは、180行目～304行目です。
ここを編集していくことでデフォルトのデザインから変更していくことができます。
CSSのリファレンス等を参考にしながら、理想のデザインになるように記述していきましょう。

（それぞれのクラスが指定しているもの）

・.area_save_list
セーブデータの表示領域の設定。スクロールする部分（赤枠）
.area_save_list::-webkit-scrollbarはスクロールバーの設定。

・save_list
.area_save_listの中身をまるごとまとめている。（黄色枠）

・.save_list_item
セーブリストに表示されている１スロット。（灰色）

・.save_list_item_thumb
スロットのサムネイル部分。（黄緑）

・.save_list_item_area
日付とゲーム内のテキスト、テキストとして表示されている部分（水色）

・save_list_item_date
スロットの日付部分。（マゼンダ）

・save_list_item_text
スロットのテキスト部分（青）。

今回は、試しに緑を基調としてセーブ・ロード画面を作成してみました。
だいぶ印象が変わりますね。

.save_list_itemを以下のような記述にして、マウスホーバー時に色味が変わるようにしています。

.save_list_item {
 filter: sepia(70%); /* セピアフィルター */
 transition: 0.5s; /* マウスホーバー時にアニメーションさせる */
 display:table-row;
 width: 800px;
 height: 120px;
 margin: 0;
 padding: 0;
 cursor: pointer;
}

.save_list_item:hover{
 filter: sepia(0%); /* セピアフィルターの解除 */
}

ゲームの雰囲気に合わせて調整するとイイ感じ……なので、

CSSリファレンスやシンタックスとにらめっこしながら編集してみると楽しい……かも！