-
Notifications
You must be signed in to change notification settings - Fork 183
Home
7~11 行目の
* {
/* フォント (一部のフォントは上手く適用されない) */
font-family: "Meiryo";
font-size: 12px;
}
の 12px
の部分を他の数値に変更します。
35 行目の
background-color: transparent;
の transparent
の部分を、 rgba(0, 0, 0, 0.5)
に変更します。この場合、背景色は黒で、透明度は 0.5 になります。透明度は 0.0 (透明)~ 1.0 (不透明)の間で設定が可能です。
テーブルの見出し(Name や Job など)の文字色は、57~58行目の
color: #DED7BE;
text-shadow: -1px 0 2px #795516, 0 1px 2px #795516, 1px 0 2px #795516, 0 -1px 2px #795516;
テーブルのデータ本体の文字色は、45~46行目の
color: #E2EBF5;
text-shadow: -1px 0 3px #217AA2, 0 1px 3px #217AA2, 1px 0 3px #217AA2, 0 -1px 3px #217AA2;
を編集することで変更が可能です。文字の基本色は color
の、影の色は text-shadow
の #XXXXXX
のカラーコードの部分を編集することで変更できます。
カラーコードについては http://html-color-codes.info/japanese/ この辺りを参考にして作ってみてください。
91行目の
var encounterDefine = "{title} / Time: {duration} / DPS: {ENCDPS}";
を変更します。ダブルクォーテーションで囲われた範囲の文字列がフォーマット文字列として使用されます。
この文字列は、ACT のミニパースウィンドウで設定する文字列のフォーマットと互換性があります。
ただし、JavaScript の制約上、直接記述できない文字が存在します。それらの文字の入力方法は http://www.ajaxtower.jp/js/num/index2.html などを参考にして入力してください。
※ 単体の {
は今のところ入力できません。ごめんなさい。
表示する情報を変更するためには、93~115行目の
// ヘッダの定義
var headerDefine =
[
{ text: "Name", width: "25%", align: "left" },
{ text: "Job", width: "8%", align: "center" },
{ text: "DPS (%)", width: "18%", align: "center", span: 2 },
{ text: "HPS (%)", width: "18%", align: "center", span: 2 },
{ text: "Acc.(%)", width: "16%", align: "right" },
{ text: "Crt.(%)", width: "14%", align: "right" }
];
// 表示するデータの定義
var bodyDefine =
[
{ text: "{name}", width: "25%" },
{ text: "{Job}", width: "8%", align: "center" },
{ text: "{encdps}", width: "16%", align: "right" },
{ text: "{damage%}", width: "5%", align: "right" },
{ text: "{enchps}", width: "16%", align: "right" },
{ text: "{healed%}", width: "5%", align: "right" },
{ text: "{tohit}%", width: "16%", align: "right" },
{ text: "{crithit%}", width: "14%", align: "right" }
];
を編集します。
二つの変数がありますが、それぞれコメントにある通り、ヘッダとデータの定義をしています。
それぞれのデータは項目 {...}
をカンマ ,
で区切って配列として定義されています。
ヘッダ項目は、
- text: "文字列"
- width: "長さ"
- align: "left" または "center" または "right"
- span: 自分を含めたセルの結合数(右方向)
を設定することができます。例えば、「名前」という文字列を表示した、テーブル全体の幅の 20% を占有する、中央構えのヘッダ項目を作りたいときは、
{ text: "名前", width: "20%", align: "center" }
と指定すればいいわけです。
データ項目は、span が設定できない以外はヘッダ項目と同様です。
text にミニパースウィンドウで指定するタグ({Job}
や {encdps}
など)が使用できます。
ヘッダでセルを結合させた場合は、その場所に結合した分だけのデータを入力する必要があるので注意してください。
ヘッダとデータのカラム数は、結合した分を含めて等しい必要があります。
どちらかが多い場合、レイアウトが崩れてしまいます。