初級者のSleipnirスキン作成(完全攻略編・toolbarの章)
- 前回の宣言通りtoolbarフォルダを解説します。
toolbarフォルダには4つのサブフォルダがあって、それぞれの名前はAddressBar、ConnectionBar、SearchBar、WindowBarです。
今回はそのサブフォルダごとに解説していきます。
AddressBar
「アドレスバー」部分のスキンです。
ver.2.9.2から「新アドレスバー、新検索バー」が実装されました。*1
※「新アドレスバー、新検索バー」に関しましては"ここここあ Sleipnir 2.9.2新型バースキン改造"が非常に参考になりました。
また、「default」スキンや「elegance」スキンの「skin.ini」に説明が書いてありそこも参考になりました。
※「skin.ini」の「新アドレスバー、新検索バー」部分の解説は対応スキンの「skin.ini」に詳しく書いてあるので割愛します。なお、「skin_ini_editor(執筆時ver.0.2.8.1)」は対応してないっぽい(?)のでテキストエディターで編集してください。*2
新アドレスバー
「新アドレスバー」には各部分にそれぞれ4系統ずつのスキンが設定出来るようにしてあります。
その4つとは"C、X、V、A"でファイル名の末尾に付いていて判別可能です。なお、この文字はC(クラシックスタイル)、X(XPスタイル(Luna))、V(Vista)、A(Aero)を意味し、「skin.ini」に設定をしておけばWindowsの視覚スタイルによって自動的に使用される画像が変わるらしいです。
2.9.2の新型バー部分は、Windowsがクラシックスタイルか、XPスタイル（Luna。視覚スタイル）か、Vistaか、Aeroかによって、使用画像を自動切換えできる（Windowsの状態に合わせてアドレスバー、検索バーのデザインを変えられる）っぽいです。……と言っても、その４系統のスキン画像を全部作る必要はないようで。「skin.ini」で４系統とも同じ画像に設定しておけば（あるいは、自動切換え用の指定を消しておけば）、４系統とも同じ画像が使われるみたいです。
前述の"ここここあ"より引用
ComboBox?.xxx*3 *4
「新アドレスバー」の中心部分に使用される画像です。
サイズは幅が決まっておらず(skin.iniのAddressBarBoxWidthの値*15ピクセル)、高さが26ピクセルみたいです。
画像の内訳は左からそれぞれ背景(通常)、背景(ホバー)、赤背景(通常)、赤背景(ホバー)、緑背景(通常)、緑背景(ホバー)、青背景(通常)、青背景(ホバー)、背景(フォーカス)、▼(通常)、▼(ホバー)、押下・ドロップ中(▼)とのことです。
※背景(特に赤、緑、青)の色系統は可能な限り変更しないでください。これは色にセキュリティ上で重要な意味を持たせているためです。
Left?.xxx
「新アドレスバー」の左側の現在表示されているサイトのfavicon(があれば)表示する部分です。なお、クリック時の動作が「旧アドレスバー」とは変わっています。(「Sleipnirオプション＞ツールバー＞アドレスバー≫左ボタンの動作」より変更可能です。)
サイズは幅が決まっておらず(skin.iniのAddressBarLeftButtonWidthの値*3ピクセル)、高さが26ピクセルみたいです。
画像の内訳は左からそれぞれ左端(通常)、左端(ホバー)、左端(押下)とのことです。
Right?.xxx
「新アドレスバー」の右側の現在入力されているURIに移動するボタンを表示する部分です。なお、右クリックすることで「拡張メニュー」を呼び出すことが出来ます。
サイズは幅が決まっておらず(skin.iniのAddressBarRightButtonWidthの値*6ピクセル)、高さが26ピクセルみたいです。
画像の内訳は左からそれぞれ中央(通常)、中央(ホバー)、中央(押下)、右端(通常)、右端(ホバー)、右端(押下)とのことです。
※中央ってのは表示させ方が分かりません。
RssAutoDiscoveryEnable.xxx、RssAutoDiscoveryDisable.xxx
現在表示してあるページがRSSを発行しているかどうか、およびフィードの登録をする「新アドレスバー」内のボタン用スキンです。
サイズはともに16x16ピクセルです。
RSSを発行していれば「RssAutoDiscoveryEnable」、発行していなければ「RssAutoDiscoveryDisable」が使用されます。
新型アドレスバーの「RSSリーダーに追加」ボタンですが、「plugins.ini」にて「DynamicFolder1=RssDynamicFolder.fx」を無効にしていても、「フィードの追加」ダイアログの「フィードの登録先」に「お気に入り（ダイナミックフォルダ）」が出ますね。私はRSSダイナミックフォルダを無効にしているので、ちょっとびっくりしました。
前述の"ここここあ"より引用
※RSSのアイコンはFeed Icons(日本語記事)などのものを使った方が良いかもしれません。
OpenFromClipboard.xxx
ちょっと分かりませんでした。
旧アドレスバー
ver.2.9.2以前に使用されていた「アドレスバー」です。
※現在でも「plugins.ini」の[EmbeddedToolBar]セクション、または[ToolBar]セクションの"AddressBar.fx"を"AddressBarOld.fx"に変更すれば使用できます。
Go.xxx、GoHot.xxx
「旧アドレスバー」の移動ボタン部分です。
Go.xxx、GoHot.xxxがあり、それぞれ通常時とホバー時のスキンになります。
サイズはともに16x16ピクセルです。
IE7mode.xxx、IE7modeHot.xxx、IE7modeEnabled.xxx、IE7modeEnabledHot.xxx
「旧アドレスバー」の「IE8表示、IE7互換表示」切り替え用スキンです。
「IE8表示」時がIE7mode.xxx、IE7modeHot.xxxで、それぞれ通常、ホバーです。
「IE7互換表示」時がIE7Enabledmode.xxx、IE7EnabledmodeHot.xxxで、それぞれ通常、ホバーです。
サイズはすべて16x16ピクセルです。
※「新アドレスバー」用の画像ファイルは"browser"フォルダにあります。
※デフォルトの画像(IEと同一)では現在の状態が分かりにくいので、数字の7、8を利用したデザインにすれば良いかなと思います。
SearchBar
「検索バー」部分のスキンです。
ver.2.9.2から「新アドレスバー、新検索バー」が実装されました。*5
※「新アドレスバー、新検索バー」に関しましては"ここここあ Sleipnir 2.9.2新型バースキン改造"が非常に参考になりました。
以降同じ事の繰り返しなので略。
「検索バー」は主に2つの要素に分けられます。
「検索バー」用スキン画像と「検索エンジン」用アイコンです。
新検索バー
「新検索バー」には各部分にそれぞれ4系統ずつのスキンが設定出来るようにしてあります。
「新アドレスバー」で説明したので略
ComboBox?.xxx
「新検索バー」の中心部分に使用される画像です。
サイズは幅が決まっておらず(skin.iniのSearchBarBoxWidthの値*15ピクセル)、高さが26ピクセルみたいです。
画像の内訳は左からそれぞれ背景(通常)、背景(ホバー)、赤背景(通常)、赤背景(ホバー)、緑背景(通常)、緑背景(ホバー)、青背景(通常)、青背景(ホバー)、背景(フォーカス)、▼(通常)、▼(ホバー)、押下・ドロップ中(▼)とのことです。
※こちらの背景は変えても不都合はないと思いますが、「新アドレスバー」とのデザインの統一を考えると変えない方が良いかもしれません。
Left?.xxx
「新検索バー」の左側の現在選択されている検索エンジンのfavicon(があれば)表示する部分です。
サイズは幅が決まっておらず(skin.iniのSearchBarLeftButtonWidthの値*3ピクセル)、高さが26ピクセルみたいです。
画像の内訳は左からそれぞれ左端(通常)、左端(ホバー)、左端(押下)とのことです。
Right?.xxx
「新検索バー」の右側の「カスタム検索ボタン」部分です。*6
サイズは幅が決まっておらず(skin.iniのSearchBarLeftButtonWidthの値*12ピクセル)、高さが26ピクセルみたいです。
画像の内訳は左からそれぞれ中央(通常)、中央(ホバー)、中央(押下)、右端(通常)、右端(ホバー)、右端(押下)とのことです。
「各スキンフォルダ\toolbar\SearchBar\RightC*.png」の内容は、左から順に「左端のカスタム検索ボタン背景×３」「中間の（同、略）背景×３」「右端の（同、略）背景×３」「カスタム検索ボタンが１個である場合の背景×３」のようです。
前述の"ここここあ"より引用
SearchClipboardText.xxx
ちょっと分かりませんでした。
検索エンジン用favicon
各種検索エンジンのfaviconです。「default」スキンの「toolbar\SearchBar」フォルダに入れると良いでしょう。
ファイルフォーマットは16x16ピクセルのアイコン形式です。
「ウェブ検索」用の"SleipnirSearch.ico"だけ作ってある場合が多いです。
※もちろん各スキンの「toolbar\SearchBar」フォルダに同名の入れると、それが優先して採用されます。
※配布する時は配布スキンの「toolbar\SearchBar」フォルダに自作のものだけを入れるようにしましょう。
ConnectionBar
「通信状態アニメーション」を表示する「コネクションバー」部分です。
※デフォルトでは無効になっているので、使う場合にはプラグインマネージャから有効にしてください。(「プリインストールされているプラグインを表示する」にチェックを入れて探してください)
Sleipnirのスキンの中で唯一の動画ファイル(AVIファイル)です。
動画作成ソフトで作ってください。
Sleipnirオンラインデータベースにオススメ(と思われる)ソフトが紹介されているので引用しておきます。
- Giam
- GIFアニメーションの作成ソフト。AVI動画に出力可能で通信状態アニメーション、サンプル作成に便利。
- Radish AVI Maker
- Windowsのコモンコントロールの一つであるアニメーションコントロールに使用するAVIリソースを作成するために最適化されたAVI作成ソフト。
※私は動画作ったこと無いんで、ソフトの良し悪しは分かりません。ついでに、「ConnectionBar」に使用可能なAVIファイルの仕様も分かりません。*7
WindowBar
「ウィンドウバー」部分のスキンです。
WindowBar.bmp、WindowBarHot.bmpの2つがあり、それぞれ通常時とホバー時のスキンになります。
サイズはともに32x16(16x16*2)ピクセルで、左からそれぞれ閉じる関連ボタン、表示関連ボタンです。
今回のまとめ
色々感想あったが、2度下書き飛んだんでもろとも吹っ飛んでしまったｗ
あんまり関係ないけど、Giam(というかMNGという単語)を見て、ロゴだけでいいからAPNG対応してくれたら面白そうなのにと思った。
そして、「skin_ini_editor」がバージョンアップしてるのにさっき気づいたorz
いくつか解説してないキーがあるみたいだから、今から検証して該当記事の部分に追記してきます。
(追記 2010 Feb. 20th)
キーの設定が上手くいかないんで、もう少し調べてから追記しようと思います。
