初級者のSleipnirスキン作成(完全攻略編・controlsの章・其之5)

Controlsの5回目です。

Controlsの解説予定

  1. ツールバー
  2. ステータスバー
  3. タブ、エクスプローラバー
  4. Dock、Panel
  5. メニュー項目、マネージャ、情報バー(当ページ)
  6. タイトルバー、フレームスキン
  7. アドレスバー、検索バー、分類不明、書き漏らし



メニュー項目部

各種メニュー部分へのスキンです。
skin.iniの[Colors]セクションに類似の設定が存在するのでグラデーションなどを考えていないなら使う必要はありません。

メニュー項目の背景1(MenuItem1) ― MenuItem1.xxx / メニュー項目の背景2(MenuItem2) ― MenuItem2.xxx

メニュー項目の背景部分のスキンです。メニュー項目の背景で"メニュー項目の背景1"が奇数番目、"メニュー項目の背景2"が偶数番目です。
サイズは100x23ピクセルです。
※背景色を相互に使うことが無いのならファイル名を"MenuItem.xxx"などにして両方に設定すれば良いと思います。

メニュー選択項目の背景(MenuItemHighlight) ― MenuItemHighlight.xxx

メニューの項目にホバーした時のスキンです。
サイズは100x23ピクセルです。

メニュー無効項目の背景(MenuItemDisabled) ― MenuItemDisabled.xxx *1

メニューの項目のうち無効の項目にホバーした時のスキンです。
サイズは100x23ピクセルです。
※手持ちのスキンのうち、自作のスキン以外ではこの項目を設定されてるものが無さそうです。

メニュー項目スキンの使用方法(MenuItemSkinType)

skin_ini_editorではtile/strechの選択肢が表示されますが、実際にはtileのみ選択が可能みたいです。

メニュー項目のセパレータ(MenuItemSeparator) ― MenuItemSeparator.xxx

そのままメニュー項目のセパレータです。
サイズは100x3ピクセルです。

メニュー項目のセパレータの使用方法(MenuItemSeparatorSkinType)

skin_ini_editorではtile/strechの選択肢が表示されますが、実際にはtileのみ選択が可能みたいです。

メニュー項目のチェックマーク(MenuItemChecked) ― MenuItemChecked.xxx

文字通りメニュー項目のチェックマークです。
サイズは確認した限りでは横幅が18〜22ピクセル、高さが18〜20ピクセルの間のようです。

メニュー項目のラジオボタン(MenuItemRadio) ― MenuItemRadio.xxx

文字通りメニュー項目のラジオボタンです。
サイズは確認した限りでは横幅が18〜22ピクセル、高さが18〜20ピクセルの間のようです。
※この項目はどこに使われてるのかわかりませんでした。

メニュー選択項目のチェックマーク(MenuItemHighlightChecked) ― MenuItemHighlightChecked.xxx

メニュー項目のうちチェックマークがある項目にホバーした時のです。
サイズは確認した限りでは横幅が18〜22ピクセル、高さが18〜20ピクセルの間のようです。

メニュー選択項目のラジオボタン(MenuItemHighlightRadio) ― MenuItemHighlightRadio.xxx

メニュー項目のうちチェックマークがある項目にホバーした時のラジオボタンです。
サイズは確認した限りでは横幅が18〜22ピクセル、高さが18〜20ピクセルの間のようです。
※この項目はメニュー項目のラジオボタン(MenuItemRadio)同様にどこに使われてるのかわかりませんでした。

メニュー項目のアイコン部分の背景(MenuItemIconBkgnd) ― MenuItemIconBkgnd.xxx

メニュー項目の中でアイコン、チェックボックスラジオボタン部分の背景です。
サイズは確認した限りでは横幅が22ピクセル、高さが18〜20ピクセルの間のようです。

メニュー選択項目がアイコンを持っているときの背景(MenuItemIconEnable) ― MenuItemIconEnable.xxx

文字通りメニュー選択項目がアイコンを持っているときの背景です。
サイズは確認した限りでは横幅が22ピクセル、高さが18〜20ピクセルの間のようです。
まぁ、私にはどんな状況で使われるのかが調べきれなかったんですがねw

メニュー項目のフォント名(MenuItemFontName)

そのままメニュー項目のフォント名です。
フォント名を指定してください。
※同時に"メニュー項目のフォントサイズ"を指定しないといけないようです。
※この項目は配布の予定がない自分だけで使うスキンでだけ設定するべきだと思います。

メニュー項目のフォントサイズ(MenuItemFontSize)

そのままメニュー項目のフォントサイズです。
フォントのサイズを数値で指定してください。
※同時に"メニュー項目のフォント名"を指定しないといけないようです。
※この項目は目が悪く見えにくい場合に指定する感じかもしれません。この項目を設定する場合には"メニュー項目の高さ(MenuItemHeight)"も調整しましょう。

メニュー項目のフォント種別(MenuItemFontCharSet)(省略時は日本語(1=SHIFT_JIS))

設定値は数値ですがこの設定自体がよく分かりませんw
もしかすると"メニュー項目のフォント名"、"メニュー項目のフォントサイズ"と関係してるのかも。

メニュー項目の高さ(MenuItemHeight)

そのままメニュー項目の高さです。
数値(単位:ピクセル)で設定してください。

メニュー項目のセパレータの高さ(MenuItemSeparatorHeight)

そのままメニュー項目のセパレータの高さです。
数値(単位:ピクセル)で設定してください。

メニュー項目のアイコン部分の幅(MenuItemIconWidth)

メニュー項目のアイコン部分の幅です。
数値(単位:ピクセル)で設定してください。

左が設定無し、右が32(ピクセル)です。

メニュー項目のテキスト描画開始位置(MenuItemTextOffset)

メニュー項目のテキスト描画開始位置です。
数値(単位:ピクセル)で設定してください。

画像では50(ピクセル)を指定してあります。
画像には分かりやすいように50ピクセル分の赤線を引いてあります。

メニュー項目のセパレータ描画開始位置(MenuItemSeparatorOffset)

メニュー項目のセパレータ描画開始位置です。
数値(単位:ピクセル)で設定してください。

画像では25(ピクセル)を指定してあります。
画像には分かりやすいように25ピクセル分の赤線を引いてあります。

メニュー項目のセパレータ描画開始位置をテキスト部分の位置を基準にするか(MenuItemSeparatorBeginsWithText)

セパレータの描画開始位置の設定です。
true/falseの2値でfalseの場合はメニュー項目の左端からです。デフォルトはfalseです。

※"メニュー項目のセパレータ描画開始位置(MenuItemSeparatorOffset)"と併用すると画像の状態からさらに指定ピクセル分ずれます。

Vista のときメニュー選択項目で Vista 標準の色使い(グラデーション背景)を使用するか(MenuItemUseVistaHighlight)

※当方はXP環境のみでVista環境が無いのでよく分かりません。



マネージャ部

Sleipnirオプションや一部マネージャのボタン関連の設定です。
マネージャって何だろうって人はSleipnirオンラインDB - 各種マネージャの使い方でも見てください。

ボタン(ButtonSkin) ― button.xxx

Sleipnirオプションや一部マネージャのボタンのスキンです。
サイズは95x19(19x19*5)ピクセルで、左からそれぞれ通常、フォーカス、押下、無効、ホバーです。

ボタンにフォーカスを描画するか(ButtonDrawFocus)

選択したボタンにアウトラインを描画するかどうかの設定です。
true/falseの2値です。デフォルトはtrueです。
分かりにくいので画像を用意しました。

上がtrue、下がfalseです。
※どうやら、"ボタン(ButtonSkin)"を設定してないと有効にならないようです。

ボタンにアイコンを描画するか(ButtonDrawIcon)

ボタンにアイコンを描画するかの設定です。
true/falseの2値です。デフォルトはtrueです。
分かりにくいので画像を用意しました。

上がfalse、下がtrueです。
なお、アイコンの画像は"<スキン>\icons.xxx"が使われます。


情報バー部

情報バー関連のスキンです。私はここの部分をよく分かっていません。
2ちゃんねるで公開されるtest版では簡単に出せるんですけど、正式版の系統での出し方がよく分からないです。
一応画像は用意しました。

上がスキン未適応、下がスキン適応です。

情報バー背景(InformationDockSkin) ― InformationDock.xxx *2 *3

サイズは決まっていません。

情報バー背景の使用方法(InformationDockSkinType)

skin_ini_editorではtile/strechの選択肢が表示されますが、実際にはtileのみ選択が可能みたいです。

情報バーのボタン(InformationDockButtonSkin) ― InformationDockButton.xxx *4

情報バーのボタンのスキンです。
サイズは95x19(19x19*5)ピクセルで、左からそれぞれ通常、フォーカス、押下、無効、ホバーです。
※設定していない場合はボタン(ButtonSkin)が自動的に呼ばれ流用されます。

情報バーのボタンにフォーカスを描画するか(InformationDockButtonDrawFocus)

ボタンにアウトラインを描画するかどうかの設定です。
true/falseの2値です。デフォルトはtrueです。

情報バーの閉じるボタン(InformationDockCloseSkin) ― InformationDockClose.xxx *5

情報バーの閉じるボタンです。
サイズは45x15(15x15*3)ピクセルで、左からそれぞれ通常、ホバー、押下です。
※設定していない場合は閉じるボタン(BackgroundCloseSkin)が自動的に呼ばれ流用されます。



今回のまとめ

正直、controlsの他の部分に比べてあまり目立たない場所です。
よって、これらを設定していないスキンも多くあります。

*1:標準的な名称は不明だが、メニューまわりのスキン名から類推

*2:情報バー関連のスキンは標準的な名称が不明なため、すべて適当に命名

*3:数少ない実装のSSSさんのスキンではidok.xxxになっています

*4:数少ない実装のSSSさんのスキンではidocbutton.xxxになっています

*5:数少ない実装のSSSさんのスキンではidoc_close.xxxになっています