Skip to content
RainbowMage edited this page Nov 29, 2014 · 5 revisions

default.html の編集の仕方

フォントの大きさを変える

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} など)が使用できます。

ヘッダでセルを結合させた場合は、その場所に結合した分だけのデータを入力する必要があるので注意してください。

注意

ヘッダとデータのカラム数は、結合した分を含めて等しい必要があります。

どちらかが多い場合、レイアウトが崩れてしまいます。

Clone this wiki locally