Aurelia storage : beta - log

前回の記事ではセーブ・ロード画面のデザイン変更についてまとめました。
今回はバックログ画面の整地をしてみます。

ティラノのデフォルトのバックログ、ちょっと読みにくいんですよね……。
こちらも前回同様cssを調整することである程度読みやすくすることが出来ます。

ただし！　シナリオの表現・演出によっては不向きな場合もあります。具体的には、
「本文中に変数を表示させている（主人公の名前等）」
「タグを用いてフォント変更を行っている（叫び声、小声等の表現）」
などを含めた、「テキスト内で改行・改ページ以外のタグを多用している」場合には
かえって読みにくくなってしまうかもしれません。

まずtyrano\plugins\kag\kag.tag.jsをテキストエディタなどで開きます。
これを編集していくので、万が一のためにバックアップを取っておくことをお勧めします。


「<b class='backlog_chara_name "+r+"'>"+r+"</b>：<span class='backlog_text "+r+"'>"+t+"</span>」を検索します。
backlog_chara_nameでは名前欄、backlog_textではテキストを表示しているようです。

ここを書き換えていきます。今回はすべてブロック要素として扱いたいのと、
また名前欄とテキストの間にある「：」は不要だったので、
「<div class='backlog_chara_name "+r+"'>"+r+"</div><div class='backlog_text "+r+"'>"+t+"</div>」のようにしました。

次いで、その少し先にある二つ目の「<span class='backlog_text "+r+"'>"+t+"</span>」を、
「<div class='backlog_text_noname "+r+"'>"+t+"</div>」と書き換えました。
こちらは名前欄が空欄の場合の処理が書かれています。

あとは、前回同様tyrano.cssを開き、
「.backlog_chara_name」「.backlog_text」「.backlog_text_noname」をそれぞれ指定していきます。



今回記述したCSSは以下の通りです。

.backlog_chara_name{ /* 名前欄 */
 display: block; width: 200px; /* A */
 color: #ffffff;
 background-color: #000000;
 text-align: center;
 float:left; /* 回り込み */
 margin-right: 30px; /* B */
}

.backlog_chara_name::first-letter{ /* 名前欄一文字目 */
 color:#ff0000;
}

.backlog_text{
 color: #000000;
 margin-left: 240px;
}

.backlog_text_noname{
 color: #000000;
 margin-left: 240px; /* A+B */
}

……ただし、この方法も万能ではなく……。
シナリオの演出や表現、使用するタグ次第では不向きな場合もあります。
例えば、以下のシナリオ演出ではルビが用いられていますが、
その表示が崩れてしまい非常に読みにくいです。

また、[emb]などで変数を表示するとき（変更可能な主人公の名前など）、直後に改行してしまいます。
ルビを用いない、主人公の名前が固定である……等の場合は、これで十分整えることが出来ます！

こちらもCSSリファレンスとにらめっこしながら、ぜひ整えてみてください。