スキン製作者向け情報

スキンについて

YLunchでは画面の見栄えを変化させるためにスキンという概念を導入しています。 YLunchのスキンはかなり複雑な構成となっていますが、ゆえに自由に画面を構成できるとも言えます。 ここでは、スキンの構成について説明いたします。

スキンの構成(画面との対応)

スキンはメイン画面とポップアップメニューの2つの画面に設定できます。
Skin1.png(114780 byte)
図1 メイン画面

Skin2.png(97292 byte)
図2 ポプアップメニュー

要素のプロパティ

各要素はプロパティを持ち、プロパティを設定することで、スキン画面を変化させる事が可能となります。 ここでは、各構成要素のプロパティの意味と設定効果、規定値値について記述します。
表1 スキン設定
nameスキンの名前。他のスキンと重複しない名称とすること。省略不可。
typeファイルの種類を示す。常に"skin"とすること。省略不可。
craftmanスキン製作者名。必ずASCIIコード(半角英数)で記述。
craftmanwスキン製作者名。全角文字使用可能。
craftmanurlスキン製作者のURL。
id スキンの名前(ID)です。必ずASCIIコード(半角英数)で記述する。 他のスキンと重複しない名称とすること。省略不可。
charset"Shift_JIS","EUC"等のサポート用であるが現在は"Shift_JIS"のみの対応。デフォルト値は"Shift_JIS"。
readmeスキン選択画面から呼び出される説明ファイル。現在はスキン選択画面が未実装。
banner.filename スキン選択画面に表示するバナー画像ファイル(200×40)、"*.bmp","*.png"が指定可能。 "*.png"を強く推奨。現在はスキン選択画面が未実装。
fixedmode "true"、"false"で設定し、"true"ならフォームのサイズを縦=TopPanel+LeftPanel+bottomPanelのサイズで、 横=TopPanelのサイズで固定する。なお、既定値は"false"。
transparent.mode "true"、"false"で設定し、"true"なら"transparent.color"で設定した色を透過させる。 "fixedmode"と"transparent.mode"と"titlebar.visble"を併用すると、自分の好きな形のウィンドウを生成できる。 なお、既定値は"false"。 (この機能はWindows 2000以降で有効。)
transparent.color.r
transparent.color.g
transparent.color.b
0〜255の数値で設定し、"transparent.mode"が"true"の場合、設定した色を透過させる。 なお、既定値は(R,G,B)=(0,0,0)[黒]。また、"transparent.mode"が"false"の場合は無視される。
titlebar.visble "true"、"false"で設定し、"true"なら、タイトルバー、メニューバー、ステータスバーを非表示にする。 既定値は"true"。
system.popup.ownerdraw "true"、"false"で設定し、"true"なら、右クリックメニューで使用するポップアップメニューをランチャの ポップアップメニュー同様にスキンを使用する。 既定値は"true"。
表2 TopPanel設定
paneltop.graphic.filename TopPanelに表示する画像ファイル。"*.bmp","*.png"が指定可能。 "*.png"を強く推奨。背景色については背景色の変更方法を参照のこと。
paneltop.graphic.alignment.horizontal 画像の配置を"left"、"right"、"center"のいずれかに設定します。 既定値は"left"。
paneltop.graphic.repeat 画像を繰り返すかどうか設定します。設定値は"none"、"x"のいずれかです。 既定値は"none"。
paneltop.closebutton.left
paneltop.closebutton.top
paneltop.closebutton.right
paneltop.closebutton.bottom
YLunchを終了させるボタン画像をPanelTopに配置し、その位置を指定することで、 YLunch終了ボタンを用意する事ができます。 既定値は(left,top,right,button)=(0,0,0,0)。
表3 BottomPanel設定
panelbottom.graphic.filename BottomPanelに表示する画像ファイル。"*.bmp","*.png"が指定可能。 "*.png"を強く推奨します。背景色については背景色の変更方法を参照のこと。
panelbottom.graphic.alignment.horizontal 画像の配置を"left"、"right"、"center"のいずれかに設定します。 既定値は"left"です。
panelbottom.graphic.repeat 画像を繰り返すかどうか設定します。設定値は"none"、"x"のいずれかです。 既定値は"none"。
表4 LeftPanel設定
panelleft.graphic.filename LeftPanelに表示する画像ファイル。"*.bmp","*.png"が指定可能。 "*.png"を強く推奨します。背景色については背景色の変更方法を参照のこと。
panelleft.graphic.alignment.vertical 画像の配置を"top"、"middle"、"bottom"のいずれかに設定します。 既定値は"top"。
panelleft.graphic.repeat 画像を繰り返すかどうか設定します。設定値は"none"、"y"のいずれかです。 既定値は"none"。
表5 RightPanel設定
panelright.graphic.filename RightPanelに表示する画像ファイル。"*.bmp","*.png"が指定可能。 "*.png"を強く推奨します。背景色については背景色の変更方法を参照のこと。
panelright.graphic.alignment.vertical 画像の配置を"top"、"middle"、"bottom"のいずれかに設定します。 既定値は"top"。
panelright.graphic.repeat 画像を繰り返すかどうか設定します。設定値は"none"、"y"のいずれかです。 既定値は"none"。
表6 Splitter設定
splitter.graphic.filename Splitterに表示する画像ファイル。"*.bmp","*.png"が指定可能。 "*.png"を強く推奨します。背景色については背景色の変更方法を参照のこと。
splitter.graphic.alignment.vertical 画像の配置を"top"、"middle"、"bottom"のいずれかに設定。 既定値は"top"。
splitter.graphic.repeat 画像を繰り返すかどうか設定します。設定値は"none"、"y"のいずれかを設定。 既定値は"none"。
splitter.visble Splitterを表示するか否かを"true"、"false"で設定。既定値は"true"。
表7 InputBox設定
inputbox.label.font.name InputBox上部に表示されている"絞込み検索"、"検索"などの文字列のフォント名。 既定値は"MS Pゴシック"。
inputbox.label.font.size 同上のフォントサイズ。 既定値は12。
inputbox.label.font.bold 同上の文字列を太文字で表示するか否か。"true"、"false"で設定。 既定値は"false"。
inputbox.label.font.italic 同上の文字列をイタリックで表示するか否か。"true"、"false"で設定。 既定値は"false"。
inputbox.label.font.underline 同上の文字列を下線で修飾するか否か。"true"、"false"で設定。 既定値は"false"。
inputbox.label.font.color.r
inputbox.label.font.color.g
inputbox.label.font.color.b
同上の文字列の色を0〜255の数値で設定。既定値はウィンドウ内の文字の色。
inputbox.edit.font.name InputBoxの文字列のフォント名。 既定値は"MS Pゴシック"。
inputbox.edit.font.size InputBoxの文字列のフォントサイズ。 既定値は12。
inputbox.edit.font.bold InputBoxの文字列を太文字で表示するか否か。"true"、"false"で設定。 既定値は"false"。
inputbox.edit.font.italic InputBoxの文字列イタリックで表示するか否か。"true"、"false"で設定。 既定値は"false"。
inputbox.edit.font.underline InputBoxの文字列を下線で修飾するか否か。"true"、"false"で設定。 既定値は"false"。
inputbox.edit.font.color.r
inputbox.edit.font.color.g
inputbox.edit.font.color.b
InputBoxの文字列の色を0〜255の数値で設定。既定値はウィンドウ内の文字の色。
inputbox.color.r
inputbox.color.g
inputbox.color.b
InputBoxのBox部の背景色を0〜255の数値で設定。既定値はウィンドウの背景色。
表8 ListBox設定
listbox.foreground.font.name ListBox上の選択アイテム文字列のフォント名。 既定値は"MS Pゴシック"。
listbox.foreground.font.size 同上のフォントサイズ。 既定値は12。
listbox.foreground.font.bold 同上の文字列を太文字で表示するか否か。"true"、"false"で設定。 既定値は"false"。
listbox.foreground.font.italic 同上の文字列をイタリックで表示するか否か。"true"、"false"で設定。 既定値は"false"。
listbox.foreground.font.underline 同上の文字列を下線で修飾するか否か。"true"、"false"で設定。 既定値は"false"。
listbox.foreground.font.color.r
listbox.foreground.font.color.g
listbox.foreground.font.color.b
同上の文字列の色を0〜255の数値で設定。既定値はウィンドウ内の文字の色。
listbox.background.font.name ListBox上の非選択アイテム文字列のフォント名。 既定値は"MS Pゴシック"。
listbox.background.font.size 同上のフォントサイズ。 既定値は12。
listbox.background.font.bold 同上の文字列を太文字で表示するか否か。"true"、"false"で設定。 既定値は"false"。
listbox.background.font.italic 同上の文字列イタリックで表示するか否か。"true"、"false"で設定。 既定値は"false"。
listbox.background.font.underline 同上の文字列を下線で修飾するか否か。"true"、"false"で設定。 既定値は"false"。
listbox.background.font.color.r
listbox.background.font.color.g
listbox.background.font.color.b
同上の文字列の色を0〜255の数値で設定。既定値はウィンドウ内の文字の色。
listbox.foreground.graphic.filename ListBoxに表示する選択アイテムに表示する背景画像ファイル。"*.bmp","*.png"が指定可能。 "*.png"を強く推奨します。背景色については背景色の変更方法を参照のこと。
listbox.foreground.graphic.alignment.horizontal 同上の画像の配置を"left"、"right"、"center"のいずれかに設定します。 既定値は"left"。
listbox.foreground.graphic.alignment.vertical 同上の画像の配置を"top"、"middle"、"bottom"のいずれかに設定します。 既定値は"top"。
listbox.foreground.graphic.repeat 同上の画像を繰り返すかどうか設定します。設定値は"none"、"x"、"y"、"both"のいずれかを設定。 既定値は"none"。
listbox.background.graphic.filename ListBoxに表示する非選択アイテムに表示する背景画像ファイル。"*.bmp","*.png"が指定可能。 "*.png"を強く推奨します。背景色については背景色の変更方法を参照のこと。
listbox.background.graphic.alignment.horizontal 同上の画像の配置を"left"、"right"、"center"のいずれかに設定します。 既定値は"left"。
listbox.background.graphic.alignment.vertical 同上の画像の配置を"top"、"middle"、"bottom"のいずれかに設定します。 既定値は"top"。
listbox.background.graphic.repeat 同上の画像を繰り返すかどうか設定します。設定値は"none"、"x"、"y"、"both"のいずれかを設定。 既定値は"none"。
listbox.border ListBoxの境界線を描画するか否かを"true"、"false"で設定。 既定値は"true"。
listbox.limit ListBoxに表示するアイテム数を制限しスクロールバーの表示を抑制。設定値は"true"、"false"。 主に、黒系スキンや壁紙系のスキンを表示させる際に使用する。 既定値は"false"。
表9 TreeView設定
treeview.foreground.font.name TreeView上の選択アイテム文字列のフォント名。 既定値は"MS Pゴシック"。
treeview.foreground.font.size 同上のフォントサイズ。 既定値は12。
treeview.foreground.font.bold 同上の文字列を太文字で表示するか否か。"true"、"false"で設定。 既定値は"false"。
treeview.foreground.font.italic 同上の文字列をイタリックで表示するか否か。"true"、"false"で設定。 既定値は"false"。
treeview.foreground.font.underline 同上の文字列を下線で修飾するか否か。"true"、"false"で設定。 既定値は"false"。
treeview.foreground.font.color.r
treeview.foreground.font.color.g
treeview.foreground.font.color.b
同上の文字列の色を0〜255の数値で設定。既定値はウィンドウ内の文字の色。
treeview.background.font.name TreeView上の非選択アイテム文字列のフォント名。 既定値は"MS Pゴシック"。
treeview.background.font.size 同上のフォントサイズ。 既定値は12。
treeview.background.font.bold 同上の文字列を太文字で表示するか否か。"true"、"false"で設定。 既定値は"false"。
treeview.background.font.italic 同上の文字列イタリックで表示するか否か。"true"、"false"で設定。 既定値は"false"。
treeview.background.font.underline 同上の文字列を下線で修飾するか否か。"true"、"false"で設定。 既定値は"false"。
treeview.background.font.color.r
treeview.background.font.color.g
treeview.background.font.color.b
同上の文字列の色を0〜255の数値で設定。既定値はウィンドウ内の文字の色。
treeview.foreground.graphic.filename TreeViewに表示する選択アイテムに表示する背景画像ファイル。"*.bmp","*.png"が指定可能。 "*.png"を強く推奨します。背景色については背景色の変更方法を参照のこと。
treeview.foreground.graphic.alignment.horizontal 同上の画像の配置を"left"、"right"、"center"のいずれかに設定します。 既定値は"left"。
treeview.foreground.graphic.alignment.vertical 同上の画像の配置を"top"、"middle"、"bottom"のいずれかに設定します。 既定値は"top"。
treeview.foreground.graphic.repeat 同上の画像を繰り返すかどうか設定します。設定値は"none"、"x"、"y"、"both"のいずれかを設定。 既定値は"none"。
treeview.background.graphic.filename TreeViewに表示する非選択アイテムに表示する背景画像ファイル。"*.bmp","*.png"が指定可能。 "*.png"を強く推奨します。背景色については背景色の変更方法を参照のこと。
treeview.background.graphic.alignment.horizontal 同上の画像の配置を"left"、"right"、"center"のいずれかに設定します。 既定値は"left"。
treeview.background.graphic.alignment.vertical 同上の画像の配置を"top"、"middle"、"bottom"のいずれかに設定します。 既定値は"top"。
treeview.background.graphic.repeat 同上の画像を繰り返すかどうか設定します。設定値は"none"、"x"、"y"、"both"のいずれかを設定。 既定値は"none"。
treeview.border TreeViewの境界線を描画するか否かを"true"、"false"で設定。 既定値は"true"。
treeview.linebutton TreeViewのアイコンの右側に表示される±ボタン及びラインを表示するか否か。設定値は"true"、"false"。 主に、壁紙系のスキンを表示させる際に使用する。 ±ボタンが非表示になった場合は、 フォルダをダブルクリックすることで展開、折りたたみが可能。 既定値は"true"。
表10 PopupMenu設定
popup.foreground.font.name PopupMenu上の選択アイテム文字列のフォント名。 既定値は"MS Pゴシック"。
popup.foreground.font.size 同上のフォントサイズ。 既定値は12。
popup.foreground.font.bold 同上の文字列を太文字で表示するか否か。"true"、"false"で設定。 既定値は"false"。
popup.foreground.font.italic 同上の文字列をイタリックで表示するか否か。"true"、"false"で設定。 既定値は"false"。
popup.foreground.font.underline 同上の文字列を下線で修飾するか否か。"true"、"false"で設定。 既定値は"false"。
popup.foreground.font.color.r
popup.foreground.font.color.g
popup.foreground.font.color.b
同上の文字列の色を0〜255の数値で設定。既定値はウィンドウ内の文字の色。
popup.background.font.name PopupMenu上の非選択アイテム文字列のフォント名。 既定値は"MS Pゴシック"。
popup.background.font.size 同上のフォントサイズ。 既定値は12。
popup.background.font.bold 同上の文字列を太文字で表示するか否か。"true"、"false"で設定。 既定値は"false"。
popup.background.font.italic 同上の文字列イタリックで表示するか否か。"true"、"false"で設定。 既定値は"false"。
popup.background.font.underline 同上の文字列を下線で修飾するか否か。"true"、"false"で設定。 既定値は"false"。
popup.background.font.color.r
popup.background.font.color.g
popup.background.font.color.b
同上の文字列の色を0〜255の数値で設定。既定値はウィンドウ内の文字の色。
popup.foreground.graphic.filename PopupMenuに表示する選択アイテムに表示する背景画像ファイル。"*.bmp","*.png"が指定可能。 "*.png"を強く推奨します。背景色については背景色の変更方法を参照のこと。
popup.foreground.graphic.alignment.horizontal 同上の画像の配置を"left"、"right"、"center"のいずれかに設定します。 既定値は"left"。
popup.foreground.graphic.alignment.vertical 同上の画像の配置を"top"、"middle"、"bottom"のいずれかに設定します。 既定値は"top"。
popup.foreground.graphic.repeat 同上の画像を繰り返すかどうか設定します。設定値は"none"、"x"、"y"、"both"のいずれかを設定。 既定値は"none"。
popup.background.graphic.filename PopupMenuに表示する非選択アイテムに表示する背景画像ファイル。"*.bmp","*.png"が指定可能。 "*.png"を強く推奨します。背景色については背景色の変更方法を参照のこと。
popup.background.graphic.alignment.horizontal 同上の画像の配置を"left"、"right"、"center"のいずれかに設定します。 既定値は"left"。
popup.background.graphic.alignment.vertical 同上の画像の配置を"top"、"middle"、"bottom"のいずれかに設定します。 既定値は"top"。
popup.background.graphic.repeat 同上の画像を繰り返すかどうか設定します。設定値は"none"、"x"、"y"、"both"のいずれかを設定。 既定値は"none"。
popup.sidebar.graphic.filename PopupMenuのサイドバーに表示する画像ファイル。"*.bmp","*.png"が指定可能。 "*.png"を強く推奨します。背景色については…参照
popup.sidebar.graphic.alignment.vertical 同上の画像の配置を"top"、"middle"、"bottom"のいずれかに設定します。 既定値は"top"。
popup.sidebar.graphic.repeat 同上の画像を繰り返すかどうか設定します。設定値は"none"、"y"のいずれかを設定。 既定値は"none"。

背景色の変更方法

画像の背景色はYLunchが画像から自動的に判定します。 画像の背景色の判定方法はプロパティの"alignment.vertical"と"alignment.horizontal"から決定され、 表11の通りとなります。従って、背景色を任意の値としたい場合は画像の背景色となるピクセルを任意の色にして下さい。

表11 背景色の判定方法
alignment.verticalalignment.horizontal背景色となるピクセル
topleft 画像の右下
topcenter画像の左下
topright 画像の左下
middleleft 画像の右上
middlecenter画像の左上
middleright 画像の左上
bottomleft 画像の右上
bottomcenter画像の左上
bottomright 画像の左上