セーブ＆ロードUIの調整 byティラノスクリプト

今回は、上の画像のようにセーブとロード画面のUI調整を行います。

デフォルトをどう変更するか

何も変更しないとこんな感じなのですが、
個人的に気になったポイントは下の4点です。

・線は白なのに文字は黒なので統一したい
・文字のサイズが小さい
・白い線に対して、文字が中央に来てない感がある
・横長感があるので左右を開けたい

修正するファイル

tyrano\tyrano.css
今回の場合は、cssの変更だけで済みました。

tyrano\html\save.html
tyrano\html\load.html
もっと大きく変えたい場合は、htmlも合わせて修正すると良いです。

htmlのタグの中に、{{:save_date}}
があったので、CSSからsave_list_item_dateを検索します。

とりあえず、下記のように設定すれば、一番上の画像のように表示されます。

/* セーブ時の画面の設定
--------------------------*/
/* セーブデータリスト全体の設定 */
.save_list {
  background-color: rgba( 0, 0, 0, 0.65 );
  display: table;
  table-layout: fixed;
  width: 80%;
  border-top: 1px solid #ccc;
  font-size: 14px;
  font-weight: normal;
}
/* セーブデータの設定 */
.save_list_item {
  display: table-row;
  cursor: pointer;
}
/* セーブデータのサムネイル部分の設定 */
.save_list_item_thumb {
  display: table-cell;
  vertical-align: middle;
  width: 96px;
  border-bottom: 1px solid #ccc;
}
.save_list_item_thumb img {
  width: 100px;
  height: 80px;
}
/* セーブデータのテキスト部文の設定 */
.save_list_item_area {
  display: table-cell;
  vertical-align: middle;
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
}
/* セーブデータの日付の設定 */
.save_list_item_date {
  font-size: 15px;
  color: #ddd;
  display: block;
  padding: 5px 0;
  line-height: 1;
  text-shadow:
		-1px -1px #000,
		1px -1px #000,
		-1px 1px #000,
		1px 1px #000;
}
/* セーブデータのテキストの設定 */
.save_list_item_text {
  padding: 7px 0 0 0;
  font-size: 20px;
  color: #ddd;
  display: block;
  line-height: 1.3;
  height: 40px;
  overflow: hidden;
  text-shadow:
		-1px -1px #000,
		1px -1px #000,
		-1px 1px #000,
		1px 1px #000;
}

もうちょい詳細

background-color: rgba( 0, 0, 0, 0.65 );

背景に0.65(35%透明)の半透明黒色を置きます。
これによって、白い文字を見えやすくします。

  width: 100px;
  height: 80px;

サムネイルのサイズ設定ですが、
画面サイズに合わせ、微調整をかけています。

width: 80%;

.save_listはwidth: 100%;で設定されていますが、
これでは左右に余白ができないため、80%に設定。

font-size: 15px;
font-size: 20px;
color: #ddd;

text-shadow:
	-1px -1px #000,
	1px -1px #000,
	-1px 1px #000,
	1px 1px #000;

文字サイズはfont-size
文字色はcolor: #ddd;（ほとんど白色）
文字の縁はtext-shadow:で上下左右に影をつけることで表現しています。

padding: 7px 0 0 0;

CSSの場合、上下の中央寄せはちょっとややこしそうだったので、
paddingで上の部分に余白を作って対応しました。

こんな感じで、ちょっとひと手間加えるだけで、
ゲームにあった色合いとか、雰囲気になるので手軽ですね！