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

Sleipnir エクステンション スキン

Controlsの2回目です。

Controlsの解説予定

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


ステータスバー部

各種の情報を表示してくれる一番最下段のバーです。
そのため出来るだけシンプルに色味は少なめがいいでしょう。

ステータスバー(StatusBarSkin) ― statusbar.xxx

ステータスバー全体の背景画像です。
サイズは39x13(13x13*3)ピクセルで、それぞれ左からステータスバー全体、アイテム表示部分、ウィンドウサイズ変更用のグリップです。
アイテム表示部分は透過してある場合も多いです。
下に説明してありますが、並べ方がstrechしか使用できないため左側2種は単色(+境界線色)で塗るのをお薦めします。

ステータスバー用スキンの使用方法(StatusBarSkinType)

"ステータスバー用スキン"の並べ方を指定します。
※skin_ini_editorではtileとstretchが選択候補に出ますが実際にはstrechのみ選択可能なようです。

ステータスバーの最初のペインのフレームを描画するか(StatusBarHideFirstPaneFrame)

ステータスバーの最初のペイン(リンクなどにカーソル合わせると"http://www以下略"などと表示される部分)にフレームを描画するかどうかです。
ここはtrue/falseの2値です。
正直わかりにくいんで画像用意しました。上がfalse、下がtrueです。

プログレスバー(ProgressBarSkin) ― progressbar.xxx

ページの読み込みの進捗具合を表示する画像の枠と背景です。
サイズは15x15ピクセル。

プログレスバーの進捗(ProgressBarIndicatorSkin) ― progress_ind.xxx

ページの読み込みの進捗具合を表示する画像です。画像が読み込まれた割合分だけtile表示されていきます。
サイズは横幅が1〜7、高さが9〜14ピクセル。
見せ方がスキンによって違って面白い部分です。

プログレスバーの進捗のパディングのサイズ(横方向)(ProgressBarIndicatorPaddingX) / プログレスバーの進捗のパディングのサイズ(縦方向)(ProgressBarIndicatorPaddingY)

ProgressBarIndicatorSkinを表示する場合における縦横の余白サイズ(単位：ピクセル)。
ここもわかりにくいんで画像用意しました。上が両方0、下が両方3です。


今回のまとめ

基本的に常時表示されている部分なんで作っておいた方が良いです。
といっても、融通が利かないので簡単なものしか出来ないのが難点です。
あと、ここの部分の主役は各種アイコンなんでそことの調和も考えておくこと。


出来れば、ここも一枚絵を使えるようにして欲しいところです。