【初級講座】 テンプレートの改造方法（１）
この記事ではテンプレートの改造を説明する例として、
文字化け対応で行なったフォント指定の削除について書きます。
フォントの設定を変える場合には専門知識が必要ですが、
理解されている場合は変えてみても面白いと思います。
１．ＸＭＬファイルの可視化
メニューテンプレートは「ＸＸＸＸ．ＤＶＤＴ」と言う名前のファイルに記述されていて、
その内容はＸＭＬファイルなのでテキストエディタ（メモ帳など）では内容が把握出来ません。
ワードパッドなら閲覧（表示）は可能なのですが、
正しく保存する方法が無いので編集できません。
ＸＭＬファイルを扱えるエディタが有れば、それを使えば問題はないのですが、
無い場合は以下の手順でメモ帳で扱える形に変換する必要があります。
編集の方法はまずメモ帳（テキストエディタ）で開きます。
上向きの矢印の場所（ＸＭＬの改行場所）で改行をして行くだけですが、
タブの調整（空白と入れ替え）も行なうと見易くなります。
メモ帳でこの様に構造化されていれば成功です。拡大した画像も載せておきます。
この状態で上書きをすると改造できるファイルになります。
ただし文字コードがＵＴＦ－８である事はチェックして下さい。
後は必ず上書きする事を注意すれば問題ありません。
追加（2019/01/27）
ここまで書いて置いてから言うのも何ですが、これってかなり面倒ですよね。
気付いていない人がいるとマズイのでヒントを書いてみましょう。
あなたはこんな面倒な事をすでに行なっている人を一人だけ知っているハズです。
その人にコピーさせて貰えば楽ですよね。
近くにいなくても、公開していてダウンロード出来れば済む話だと思いませんか？
２．大まかな構成を覚えましょう
メニューテンプレートのＤＶＤＴファイルの構成は、
大まかに言うと２つのメニューの定義です。
ＶＭＧＭメニューが上部に在り、下部がタイトルメニューの原型になります。
各々のメニューに背景画像や、ボタンやオブジェクトが定義される形になります。
メニューの始めに制御情報（ＰＡＬの指定など）が在り、
次に続いて背景画像の定義が在り、ボタンやオブジェクトの定義と続いて行きます。
標準的なＶＭＧＭメニュー（タイトルとボタン２つ）の構成は以下の形になります。
ボタンやオブジェクトの定義は、まず表示する内容が設定され、
次に位置や大きさの情報、続いてパラメーターの定義となっています。
これらのブロック内にボタンやオブジェクトがまとめて入る形なので、
各ボタンの設定は３箇所に分かれる事になります。
３．不要なフォントを除いてしまいましょう
此処まで来れば後は簡単で、メモ帳の機能説明みたいなものです。
メモ帳の検索機能を使って必要なワード（予約語）をサーチして修正するだけです。
今回の場合は項目の削除なので、キーワードになる“font-family“で検索して、
“font-family“とそれに続くフォント名を消すだけです。
つまり文字（Text）の表示の設定の、
style=“dominant-baseline:middle;font-family:MS Shell Dlg 2;font-size:26;...“の、
“font-family:MS Shell Dlg 2;“の部分を消すだけです。
（ＶＭＧＭメニューのタイトルとボタンの３ヵ所の削除になります。）
余談ですが日本以外の２バイト系の文字を使う国で、
同様の問題でお困りならば、この方法でクリア出来ると思います。
お試しになられた方は、結果をお知らせ頂ければ嬉しいのですが…。
【初級講座】 テンプレートの改造方法（２）
この記事からは実際の改造手順の説明です。 技術情報のみになりますので、
上記のテンプレートの改造方法（１）を参考にして下さい。
１．背景画像を変えてみましょう
上記のテンプレートの改造方法（１）に書いてある背景画像の位置を参考にして、
画像のファイル名を探してみて下さい。
見付からない場合はＪＰＥＧやＰＮＧ等の画像の拡張子名で検索しても構いません。
後はファイル名を書き換えればＯＫですが、二箇所在る事をお忘れなく。
（例） “<image width="720" height="540"
id="background" xlink:href="90_Sakura1a.png"/>“
の" xlink:href="以降のファイル名を変更します。
２．ボタンの位置を動かしてみましょう
上記のテンプレートの改造方法（１）に書いてある、
ボタンの位置や大きさの定義の位置を参考にして定義情報を探してみて下さい。
後はそのボタンの座標（“x“と“y“）の値を変更して下さい。
（例） “<use x="128" y="312" width="118" height="33"
id="button01" xlink:href="#s_button01"/>“
の" x="や" y="以降の数値を変更します。
３．ボタンの大きさを変えてみましょう
上記のテンプレートの改造方法（１）に書いてある、
ボタンの位置や大きさの定義の位置を参考にして定義情報を探してみて下さい。
後はそのボタンのサイズ（“width“と“height“）の値を変更して下さい。
（例） “<use x="128" y="312" width="118" height="33"
id="button01" xlink:href="#s_button01"/>“
の" width="や"height="以降の数値を変更します。
４．通常・選択・実行の色を変えてみましょう
上記のテンプレートの改造方法（１）に書いてある、
ボタンのパラメーター設定の位置を参考にして設定ブロックを探してみて下さい。
ファイル名（filename）や項目名（parameter name）は、
ボタンの内容が理解出来ないと変更出来ませんが、
初期値の部分なら書き換えが可能です。
通常（normal）、選択時（highlighted）、実行時（selected）の値を、
お好きな色に変えてみて下さい。
初期値がパラメーターで設定出来る可変部分の特性を利用した方法です。
ここまでが簡単な部類の（初級の）改造手順になります。
これ以降、ボタンやオブジェクトの知識が必要な改造について、
章立て（つまり別記事に）して簡単な説明を行なう事にします。
【初級講座】 テンプレートの改造方法（３）
この記事は「ボタンやオブジェクトの初期値を変えてみよう」と題して、
使用しているボタンやオブジェクトの初期値（デフォルト）の変更の説明です。
技術情報なので、個々の事例の簡単な説明だけになります。
ＸＭＬの構造や表示要素の詳細等は上記のテンプレートの改造方法（１）や、
別のページのボタンやオブジェクトの改造方法を参考にして下さい。
１．ボタンの文字の色を変更してみましょう
まず、文字の表示を行なう要素は「TEXT」なので、
ボタン１の場合ならボタン１の表示内容と書かれたブロックで「text」を探します。
次に「塗り潰す色」を指定する属性は「FILL」なので、そのタグ内で「fill」を探して下さい。
後はその後に続く値を書き換えるだけです。
存在しない場合もありますが、その場合はこの要素を追加して下さい。
「black」や「red」等の予約語で指定されている場合もあります。
＃の１６進数の場合はＲＧＢ（赤、緑、青の順番）で指定されています。
２．ボタンの文字に影を付けてみましょう
まず、影の表示を行なう要素は文字、長方形、円、楕円と複数存在しますが、
その固有の属性は「ＳＨＡＤＯＷＦＩＬＴＥＲ」なので、
表示内容の書かれたブロックで「shadowFilter」を指定しているものを探します。
次に「表示するかどうか」を指定する属性が「ＶＩＳＩＢＩＬＩＴＹ」なので、
そのタグ内で「visibility」を探して下さい。
この属性のデフォルトは「表示する（値は不明）」なので、
この属性が指定されていない場合は表示されます。
表示したくない場合は、この属性の値を「hidden」にすると表示されなくなります。
（普通は存在しないので、この属性を追加して下さい。）
３．フレームの枠線の色を変えてみましょう
まず、長方形（枠）の表示を行なう要素は「ＲＥＣＴ」なので、
表示内容と書かれたブロックで該当する「rect」を探します。
次に枠線の色」を指定する属性は「ＳＴＲＯＫＥ」なので、
そのタグ内で「stroke」を探して下さい。
後はその後に続く値を書き換えるだけです。
４．フレームの枠線の太さを変えてみましょう
まず、長方形（枠）の表示を行なう要素は「ＲＥＣＴ」なので、
表示内容と書かれたブロックで該当する「rect」を探します。
次に枠線の色」を指定する属性は「ＳＴＲＯＫＥ－ＷＩＤＴＨ」なので、
そのタグ内で「stroke-width」を探して下さい。
後はその後に続く値を書き換えるだけです。
【初級講座】 テンプレートの改造方法（４）
この記事では「オブジェクトを追加してみよう」と題して、
ＶＭＧＭメニューに写真等を貼り付けるための画像用のフレームを追加してみます。
１．追加の手順を確認しておきましょう
テンプレートに使用する事が可能なのは、
「DvdStyler」フォルダ直下の「buttons」や「objects」フォルダに格納されている、
既に作成されているボタンやオブジェクトだけです。
従って先ず行なうべきなのは、使用するボタンやオブジェクトの、
ＸＭＬファイルの可視化です。
この可視化されたファイルの必要な部分をテンプレートにコピーして、
それを修正（改造）する形になります。
追加の手順は以下のようになります。
１．事前定義に表示要素をＳＶＧブロックごと取り込む。
２．実際に表示する為の呼び出しコマンド（ＵＳＥ）で位置とサイズを指定する。
３．テンプレートと、ボタンやオブジェクトをリンクする部分で、
選択時の色などの特殊な値を設定する。
この手順に添って説明して行きます。
解り難いので、説明の為に、ここにも構造の説明図を貼りますね。
２．表示要素の組み込み（事前定義）
最初の「<svg>」から最後の「</svg>」までがメニュー画面の表示の定義で、
「<def>」から「</def>」までが事前定義のブロックです。
このブロック内にボタンやオブジェクトの表示内容を、
「<svg>」と「</svg>」で挟んで定義します。
このブロック内に定義されたものは表示されないので、
後に「use」タグを使用して呼び出す必要がありますが、
同じものを何度も使う場合は便利です。
基本的には、ボタンやオブジェクトのＸＭＬファイルの、
最初の「<svg>」から最後の「</svg>」までを追加する事になります。
挿入する場所はブロック内であれば何処でも良いのですが、
オブジェクト同士まとめた方が後々判り易いので、
今回はボタン１の前にフレームのＳＶＧブロックを挿入します。
３．位置とサイズの指定
「<g>」と「</g>」で挟むのはグループとしてまとめるためです。
従って今回は特に意識する必要はありません。
ボタンやオブジェクトの種類別のブロック内の「use」タグで、
前述の事前定義されたものを呼び出して表示させるのですが、
この時に位置やサイズを指定する事になります。
今回はフレームのオブジェクトですから、
オブジェクトのグループ内に「use」タグを作成する事になります。
基本的にはＩＤと座標とサイズ、
後は参照先なのでコピペして弄れば問題ないと思います。
４．パラメーターの設定
「button」や「object」のタグはプロパティ画面や動作などを指定するものですが、
選択時の色もこの部分で指定します。
オブジェクトの場合は基本的に、使用するオブジェクトのファイル名を、
「<filename>」と「</filename>」で挟んで指定するだけです。
従って今回は新しい「object」タグを作成し、「filename」タグを追加するだけです。
ボタンの場合は、動作を定義する「action」タグと、
選択色を定義する「parameter」タグの指定が必要となります。
「action」タグには「pgci」属性で動作を指定するのですが、詳細は不明です。
０（ＶＭＧＭメニューに戻る）や１（タイトル１にジャンプ）等を指定して下さい。
「parameter」タグは変数名を使って入力をコントロールするもので、
基本的には選択時の色の変更にしか使いません。
（他のボタンのタグをコピペして、変数名を変更して使用して下さい。）