タブブラウザ Sleipnir オンラインデータベース
A5-B9-A5-AD-A5-F3-A4-CE-BA-EE-C0-AE-.html

  [ トップ | ヘルプ ]

Version 2.xx スキンの作製 †

2006/12/25テストリリースのNext Sleipnir Alpha1(テクノロジープレビュー版)よりBMPファイル、ICOファイルに代わってPNGファイルが使用可能になってゆきました。しかしPNGを使用したスキンでは、一部画像が透過しない、一部表示が乱れるなど問題も起きているようです(Sleipnir 2.5.12現在)。使用できる部位の拡大、不具合の修正が後のバージョンで行われていますが、PNGファイルの使用は実際の動作確認をよく行った上で判断した方がよいでしょう。

2006/03/08テストリリースのSleipnir version2.40 beta test1より起動高速化のためスキンに使用されている画像をboostフォルダにキャッシュするようになりました。
2006/03/11テストリリースのtest2ではboostフォルダの場所が変更され、キャッシュされる画像の色数は24bitまでという制限があることが明らかになりました。
従いまして各種画像(アイコンファイルも含む)を作製されるときにはご注意下さい。
WindowsXPでサポートされる32bitアイコン等はそのままで使用すると表示に不具合が発生する場合があります。

2006/02/24リリースのSleipnir version2.40 beta1よりSmartInstallerが実装され、スキンの切り替えはツールメニューにあるスキンマネージャ?から行うようになりました。
スキンの仕様に変更は無いようなのでここのコンテンツはそのまま参考にすることができます。

コンテンツ †

参考ページ †

スキン
スキンの概要解説があり、スキンファイルのダウンロードが出来ます。
skin.iniの編集方法
FAQのページにある旧スキンファイルの利用法
Sleipnir Resource Center
スクリーンショットやスキンファイルのアップロードと公開が出来ます。
スクリーンショットギャラリー
スキンの公開はしないけど、スクリーンショットだけでも公開したいという場合はこちらにどうぞ。
スキンパーツセンター
スキン職人さんが提供されたパーツがあるはず...
(通信状態アニメーションはこちらのページへ移動しました)
Fenrir & Co. Extension Center - スキン
ここで提供されているスキンはSmartInstallerを使ってインストールすることができます。
Sleipnir Unofficial Extensions Center
スキン・プラグインの代理公開所。

スキンの作成に便利なツール(フリーソフト) †

画像の編集 †

PictBear Second Edition
言わずと知れたSleipnirと同じ作者の画像加工ソフト。MDIやレイヤーにも対応している。
PhotoshopのPSD形式も一応読み込み可能(レイヤーのエフェクトに関する情報は失われます)
JTrim
レイヤー、アルファチャンネル透過は扱えないが多機能。リサイズやフィルタが強力で、GUIが分かりやすい。
Gimp
もともとUNIX向けに開発されただけあり、すこし扱いに慣れが必要だがPhotoshop並みの操作ができる超多機能なソフト。
EDGE
256色専用のドット絵エディタ。多機能かつ扱いやすい。ドット絵師さん向け。

画像の変換 †

@icon変換
PNGやビットマップなどをWindowsのアイコン形式に変換するソフト。アルファチャンネル透過、マルチアイコンやアイコンライブラリに保存など、機能が多彩でアイコンの作成に便利。*1

動画の作成 †

Giam
GIFアニメーションの作成ソフト。AVI動画に出力可能で通信状態アニメーション、サンプル作成に便利。
Radish AVI Maker
Windowsのコモンコントロールの一つであるアニメーションコントロールに使用するAVIリソースを作成するために最適化されたAVI作成ソフト。

slin.iniの編集 †

skin_ini_editor
skin.ini をGUIで簡単に編集できるツール。スキン作成者にはもちろんのこと、既存スキンの改造調整を行いたい人にも便利。

スキンの作製について †

  • すべてを一から作るのであれば、スキンのフォルダ構造を遵守し、下に説明している通りのフォーマットで画像を用意すればいいのですが、通常はすでにあるリソースを利用するのがもっとも手軽で確実な方法でしょう。
  • スキンフォルダの中にあるcontrolフォルダに画像が入っていない場合、OS標準のcontrolが使用されます。
    • WindowsXPでVisualStyleを使用している場合、controlのスキンもそれに準拠します。
  • スキンフォルダの中にあるactionフォルダに画像が入っていない場合、defaultフォルダにあるaction画像が使用されます。

  • 一例を紹介しましょう
  • どの程度の作り込みをするのかでアプローチも違ってきますが、もっとも一般的と思われる方法を以下に記します。
  1. まず、適当な作業フォルダを作り(デスクトップでも可)/resources/skins以下にあるdefaultフォルダをそこへコピーします。
  2. 次にコピーしたdefaultフォルダの名前を変更します。Sleipnirのスキン選択メニューに現れるのはこのフォルダの名前なので適当なスキン名をつけておきましょう。
  3. 以下、このフォルダに対して作業を行います。
  1. 背景のみを変更したい、あるいはコントロールのボタン画像を変更したい場合にはcontrolフォルダに画像を用意しなくてはなりません
  2. 元々defaultにあったcontrolフォルダにはナニも画像が入っていませんので、再度Sleipnirのスキンフォルダにあるsleipnirフォルダを開いてここからcontrolフォルダをコピーしてきて作業フォルダにある空のcontrolフォルダに上書きしちゃいましょう。
  3. メニューバー、ツールバー、アドレスバー、検索バー、エクスプローラバー、あとロボフォームバー(インストールしていた場合)の背景画像はcontrolフォルダにあるrebar.bmpと言うファイルを変更することで色を変えることが出来ます。
  4. 試しにこのファイルをWindowsのアクセサリにあるペイントで開いて適当に色を塗り、上書き保存しちゃいます。
  5. あとは作業フォルダにある名前を変更した(元default)フォルダをSleipnirのスキンフォルダにコピーします。
  6. Sleipnirが起動中だった場合はメニューに反映されませんので、いったん終了し再度立ち上げるとメニューに新しいスキンの名前が登録されているはずです。
  7. あとはソレを選択すると先ほど変更した色が背景に適用されます。
  • 同様にして他のファイルも好みのスタイルになるように変更していくわけですが、ペイントだけでは作り込むのに限界がありますので上で紹介した透過やレイヤーを扱えるソフトウエアを使うのがベストです。
  • ツールバーのボタンアイコンを変更する場合も、actionフォルダを開いて同じように加工していきます。
  • 詳細は以下に解説してありますので、試行錯誤しながらカッコイイスキンにトライしてみてください。

スキンのフォルダ構造 (Ver.2.5.12) †

*編集人より**2
/resources説明
/skins
/<スキン名>#お気に入りツリー用アイコン,スキン設定ファイルほか
/actions#標準ツールバー用アイコン画像
/browser#ステータスバー左のブラウザ切り替え表示用アイコン
/controls#画像用[ Rebar背景,Tab,入力欄,プログレスバーほか ]
/dock#Dock用アイコンディレクトリ
/InformationDock#情報バーアイコン
/SearchDock#ページ検索バー用アイコン群
/dynfolder#DynmicFolder用
/extensionsその他のプラグイン用?
/MouseExtension#SmartSearchアイコン
/headlinereader#Headline-Readerアイコン,概要表示HTMLテンプレート
/mixchain#MixChain用背景画像
/options#Sleipnirオプション用アイコン
/panel#エクスプローラバー用アイコン
/spx#[ エクスプローラバー ]Tab用アイコン群
/statusbar#ステータスバー用アイコンディレクトリ
/AddonControl#[ ステータスバー ]アドオンコントロールアイコン
/PopupBlock#[ ステータスバー ]ポップアップブロックアイコン
/PrivacyReport#[ ステータスバー ]プライバシーリポートアイコン
/QucickSecurity#[ ステータスバー ]クイックセキュリティアイコン
/RssAutoDiscovery#[ ステータスバー ]RSSボタンアイコン
/SecurityZone#[ ステータスバー ]セキュリティゾーンアイコン
/SslState#[ ステータスバー ]SSL状態表示アイコン
/SwitchSecurity#[ ステータスバー ]スイッチセキュリティアイコン
/ZoomControl#[ ステータスバー ]ズームコントロールアイコン
/skypalette#SkyPalette用画像
/tab#新規タブ追加アイコン,及びタブプログレスバー画像
/toolbar#ツールバー用画像ディレクトリ
/AddressBar#アドレスバー横の"移動"ボタン用アイコン
/ConnectionBar#通信中アニメーションの動画
/SearchBar#検索バー,及びカスタム検索ボタン用アイコン群
/WindowBar#ウィンドウバーボタン用アイコン

解説 †

  • インストールの仕方によってディレクトリの表記が変わってきますので、上記ではresourceフォルダ以降のファイルを記しています
    通常、Sleipnirインストール先のUnicodeフォルダ直下にresourceフォルダがあるはずです
  • 注意事項(ページ内リンク)

skin.iniの各項目 (Ver.2.5.11) †

*編集人より**4
書式説明
[General]スキン全体に関する情報
Author=<str>スキン制作者
Version=<0.00>バージョン
ClientMinVersion=<0.00>スキンの動作が保証される最小バージョン
Description=<str>スキンの説明
ButtonWidth=<num>ツールバーアイコンの幅
ButtonHeight=<num>ツールバーアイコンの高さ
ButtonText=<true/false>アイコンのテキスト表示の可否:再起動後に反映
ButtonDropDown=<true/false>ドロップダウンの▼表示の可否:再起動後に反映
 
[Colors]#コントロールの描画に使用する色を指定します<#RRGGBB>
BackgroundBorderLight=<#ffffff>背景のボーダー
BackgroundBorderShadow=<#ffffff>背景のボーダーの影
BackgroundText=<#ffffff>背景のテキスト
ExplorerBarActiveTitle=<#ffffff>エクスプローラバーにフォーカスがあるときのタイトル文字
ExplorerBarBottomShadow=<#ffffff>エクスプローラバー下部の影
ExplorerBarDeactiveTitle=<#ffffff>エクスプローラバーにフォーカスがないときのタイトル文字
InformationDockText=<#ffffff>情報バーの文字
MenuHighlightText=<#ffffff>メニューが選択されたとき
MenuItemBkgnd1=<#ffffff>メニュー項目の背景1
MenuItemBkgnd2=<#ffffff>メニュー項目の背景2
MenuItemDisabledText=<#ffffff>メニュー無効項目の文字
MenuItemHighlightBkgnd=<#ffffff>メニュー選択項目の背景
MenuItemHighlightText=<#ffffff>メニュー選択項目の文字
MenuItemSeparatorLight=<#ffffff>メニュー内セパレータの明るい部分
MenuItemSeparatorShadow=<#ffffff>メニュー内セパレータの暗い部分
MenuItemText1=<#ffffff>メニュー項目の文字1
MenuItemText2=<#ffffff>メニュー項目の文字2
MenuText=<#ffffff>メニューの通常時
ReBarBorderLight=<#ffffff>Rebarのボーダー
ReBarBorderShadow=<#ffffff>Rebarのボーダーの影
ReBarBottomSpace=<#ffffff>Rebarの下部のスペース
ReBarText=<#ffffff>Rebarのテキスト
StatusBarText=<#ffffff>ステータスバーの文字
ScrollTabBar=<#ffffff>スクロールタブ時のスクロールバー(スクロール位置表示)
ScrollTabBkgnd=<#ffffff>スクロールタブ時のスクロールバー(背景)
TabActiveText=<#ffffff>アクティブなタブの文字
TabBottomShadow=<#ffffff>タブの下部の影
TabDeactiveText=<#ffffff>アクティブではないタブの文字
TabUnreadText=<#ffffff>未読(一度もアクティブにしていない)タブの文字
ToolBarDisabledText=<#ffffff>ツールバー無効時の文字
ToolBarHighlightText=<#ffffff>ツールバーの選択状態の文字
ToolBarText=<#ffffff>ツールバーの通常時の文字
 
[Controls]#コントロールに割り当てるビットマップ、及びオプションを指定します
BackgroundCloseSkin=<*.bmp>ページ検索バー,アウトプットバーの閉じるボタン
BackgroundSkin=<*.bmp>ページ検索バー,アウトプットバーの背景
BottomTabBgSkin=<*.bmp>タブバー下側表示時の背景
BottomTabSkin=<*.bmp>タブバー下側表示時のタブ
ButtonDrawFocus=<true/false>ボタンにフォーカスがある時の挙動の可否
ButtonDrawIcon=<true/false>オプションダイアログのボタン内アイコン表示可否
ButtonSkin=<*.bmp>オプションダイアログのボタンに適用する画像
ComboBoxHoverBoth=<true/false>コンボボックスにマウスオーバーした時の挙動の可否
ComboBoxSkin=<*.bmp>アドレスバー,検索バーなどのコンボボックス
EditSkin=<*.bmp>エディットボックス
ExplorerBarCloseSkin=<*.bmp>エクスプローラバーを閉じるボタン
ExplorerBarReBarSkin=<*.bmp>エクスプローラバー上部の背景
ExplorerBarReBarSkinType=<stretch/tile>エクスプローラバー上部背景の描画方法
ExplorerBarSplitterSkin=<*.bmp>メインウインドウとエクスプローラバーの境界
ExplorerBarTabSideBarGripSkin=<*.bmp>エクスプローラバーとビューの境界
ExplorerBarTabSideBarSkin=<*.bmp>サイドバーの背景
ExplorerBarTabSideBarSkinType=<stretch/tile>サイドバーの描画方法
ExplorerBarTabTabBgSkinType=<stretch/tile>エクスプローラバータブ背景の描画方法
ExplorerBarTab_ActiveTabBold=<auto/?><不明>*3
ExplorerBarTab_LeftTabBgSkin=<*.bmp>エクスプローラバータブ左側表示時の背景
ExplorerBarTab_LeftTabSkin=<*.bmp>エクスプローラバータブ左側表示時のタブ
ExplorerBarTab_RightTabBgSkin=<*.bmp>エクスプローラバータブ右側表示時の背景
ExplorerBarTab_RightTabSkin=<*.bmp>エクスプローラバータブ右側表示時のタブ
ExplorerBarTitleSkin=<*.bmp>エクスプローラバーのタイトルの背景
FlatButtonSkin=<*.bmp>フラットボタン(タブバー内のボタンにマウスオーバーした時)
InformationDockButtonSkin=<*.bmp>情報バーのボタン
InformationDockButtonDrawFocus=<true/false>情報バー内ボタンにフォーカスした時の挙動可否
InformationDockCloseSkin=<*.bmp>情報バーの閉じるボタン
InformationDockSkin=<*.bmp>情報バーの背景
InformationDockSkinType=<true/false>情報バー背景の描画方法
LeftTabBgSkin=<*.bmp>タブバー左側表示時の背景
LeftTabSkin=<*.bmp>タブバー左側表示時のタブ
LogoSkin=<*.bmp>Rebar右上に表示される画像
MenuItem1=<*.bmp>メニュー項目の背景1
MenuItem2=<*.bmp>メニュー項目の背景2
MenuItemChecked=<*.bmp>メニュー項目のチェックマーク
MenuItemHeight=<num>メニュー項目の高さ
MenuItemHighlight=<*.bmp>メニュー選択項目の背景
MenuItemHighlightChecked=<*.bmp>メニュー選択項目のチェックマーク
MenuItemHighlightRadio=<*.bmp>メニュー選択項目のラジオボタン
MenuItemIconBkgnd=<*.bmp>メニュー項目アイコン部分の背景
MenuItemIconEnable=<*.bmp>メニュー選択項目がアイコンを持っている時の背景
MenuItemIconWidth=<num>メニュー左端アイコン部分の幅
MenuItemRadio=<*.bmp>メニュー項目のラジオボタン
MenuItemSeparator=<*.bmp>メニューのセパレータ
MenuItemSeparatorBeginsWithText=<true/false>メニュー内セパレータの描画開始位置
(テキスト部分の位置を基準にするか。false の時はメニュー項目の左端を基準にする)
MenuItemSeparatorHeight=<num>メニュー内セパレータの高さ
MenuItemSeparatorOffset=<num>メニュー内セパレータの描画開始位置
MenuItemSeparatorSkinType=<stretch/tile>メニュー内セパレータの描画方法
MenuItemSkinType=<stretch/tile>メニュー項目の描画方法
MenuItemTextOffset=<num>メニュー項目のテキスト描画開始位置
MenuSkin=<*.bmp>メインメニュー選択時
ProgressBarIndicatorPaddingX=<num>プログレスバーインジケータのX軸方向のパディング
ProgressBarIndicatorPaddingY=<num>プログレスバーインジケータのY軸方向のパディング
ProgressBarIndicatorSkin=<*.bmp>プログレスバーインジケータ
ProgressBarSkin=<*.bmp>プログレスバーインジケータの背景
ReBarChevronSkin=<*.bmp>シェブロン → [>>]
ReBarDrawHorzBorder=<true/false>Rebarの水平ボーダー描画可否
ReBarDrawVertBorder=<true/false>Rebarの垂直ボーダー描画可否
ReBarGripSkin=<*.bmp>Rebarのグリップ
ReBarGripSkinType=<stretch/tile>Rebarのグリップの描画方法
ReBarSkin=<*.bmp>Rebar背景
ReBarSkinType=<stretch/tile/bar/right-tile>Rebar背景の描画方法
(right-tile では右上を起点に tile 配置される)
RightTabBgSkin=<*.bmp>タブバー左側表示時の背景
RightTabSkin=<*.bmp>タブバー左側表示時のタブ
SearchBarDropdownMark=<*.bmp>検索バーの検索エンジンアイコン▼マーク
SelectTabCloseSkin=<*.bmp>タブにマウスオーバーした時の閉じるボタン
StatusBarSkin=<*.bmp>ステータスバー背景
StatusBarSkinType=<stretch/tile>ステータスバーの描画方法
TabBgSkin=<*.bmp>タブバー上側表示時の背景
TabBgSkinType=<stretch/tile>タブの背景の描画方法
TabCloseSkin=<*.bmp>タブの背景上に表示する閉じるボタン
TabScrollSkin=<*.bmp>タブの背景上に表示するタブスクロールボタン
TabSkin=<*.bmp>タブバー上側表示時のタブ
ToolBarShiftHovered=<true/false>ツールバー上でのマウスオーバー時の挙動の可否
ToolBarShiftPressed=<true/false>ツールバー上でのマウスクリック時の挙動の可否
ToolBarSkin=<*.bmp>ツールバーのエフェクト用
 
[Settings]#一部のオプション設定をスキン側で強制的に規定する
ActiveTabBold=<enable/disable/auto>アクティブタブを強調表示する

解説 &dagger;

str
Strings:文字列
num
Number:数値
true
True:多くのプログラム言語で使用される表記で、実行結果に対し真の値を返す。
ここでの場合、“使用する”
false
False:上記の反対で、実行結果に対して偽の値を返します。ここでは“使用しない”
auto
Auto:Sleipnirオプションの設定に従う、もしくはデフォルトの設定に従う、ということのようです(詳細不明)
#FFFFFF
16進数表記の色の指定:RGBの順番で指定する。各色に対して00~FFの値をセットします
10進数だとFFFFFFは(255,255,255)=白色となる
ようワカランって人はこれ*5をつかってみそ
stretch
Stretch(ストレッチ):画像を引き延ばします
tile
Tile(タイル):画像をタイル状に並べていきます
bar
Bar(バー):画像をバーの中でのみ引き延ばします
  • 2ch Skin/Plugin作製スレッドPart1_654から転載
    stretch:標準ツールバー、メニューバー、検索バー、、、全てを合わせた範囲内でrebarを引き伸ばしたもの。
    bar:標準ツールバー、メニューバー、検索バー、、、各々のバー内でrebarを引き伸ばしたもの。
    tile:そのまんま。並べるだけ。
    引き伸ばすとは、バーの縁から4ピクセルはrebar9ピクセル四方から上下左右4ピクセルずつを抜き出し、内側はrebarの中心1ピクセルで埋めるということ。やれば分かる。
    だから、グラデーションする時にstretchとbarは使えない。
    例えば縦方向のただのグラデーションなら縦長の画像(横数ピクセル、縦は必要なだけ、150くらい?)をtile指定する。
    横方向の場合、画面内にグラデーションを1ローテーション(?用語が分からん)しかさせたくない場合、rebarの横サイズ=画面サイズ分必要になる。
    ま、あんまり融通は利かない。

追加情報 &dagger;

  • Version2.30Test6 ウインドウバーが実装。現時点では設定ファイルによる操作はできないらしい...
    また、通信状態アニメーションと併用すると不具合があるようです。(ツールバーの固定が効かない等々)

ツールバーのアイコン画像について (~Ver.2.40) &dagger;

説明に使用しているSleipnirはデフォルトスキンを適用していますが、XPのVisualStyleが有効になっていますので、多少色味が変わっています。

  • ココで説明しているファイルは以下のフォルダに格納されています
    /resources/skins/default/actions
MakeSkin_-_toolbaricon.png

Sleipnirのバージョンによっては24bitじゃないと不具合が出る場合があります。

  • default/actionsに格納されているボタンアイコン画像(~Version2.30 Test13 現在51種...)
MakeSkin_-_action.png
  • アイコン画像ファイルは72x24がデフォルトで、24x24のボタンアイコンを表示しますが、Skin.iniの[General]セクションにButtonWidth=16 , ButtonHeight=16を指定してコントロール用の画像に48x16を用意することで、16x16のボタンアイコンを表示することが出来ます。
    (参考:small-sleipnirスキン)

背景のスキンの作製 (~Ver.2.40) &dagger;

  • ココで説明しているファイルは以下のフォルダに格納されています
    /resources/skins/sleipnir/controls
MakeSkin_-_background.png
  • rebar.bmp
    • メインの背景用スキンファイル
      書式はReBarSkinType=<stretch/tile/bar>
      ストレッチ,タイル,バー・いずれかの排他使用です
      上下にグラデーションを表現したい場合は、常用する状態でのメニューバーからタブ上部までの高さに合わせたグラデーションBMPを作製(幅は1ピクセルでもOK)しますが、ストレッチかタイル・またはバーのいずれかがいいのかは作成者しだいです。
      画像は大きくても小さくても読み込んでくれますが、適当な大きさにしておかないと読み込み時間が長くなる傾向があります。
  • tab_bg.bmp
    • メインウインドウのタブの背景
      状態はstretch
  • tab_left_bg.bmp またはtab_right_bg.bmp
    • エクスプローラバータブの背景
      状態はstretch
  • explorerbar_splitter.bmp 
    • エクスプローラバーとメインウインドウの間にあるスプリッター
      状態はtile
  • statusbar.bmp
    • ステータスバー及び右下のウインドウハンドル
      状態はstretch
      3分割で使用され、左側がステータスバー全体:真ん中がステータスアイコンエリアとオーバーラップ:右側がウインドウハンドル

アイコンの作製 (~Ver.2.40) &dagger;

  • アイコンのあるディレクトリの記載のみです。
  • 色数を増やすとOSが未対応の環境で使えなくなる場合があります。
    256色であればOSの世代に関係なくつかえるかと...
  • サーチ・ページ検索・ハイライト・及びカスタム検索ボタン用アイコン群
    • /<スキン名>/toolbar/SearchBar
      アイコンのフォーマットはバラバラ。
      20x20以内で256色なら問題ないと思われる。
  • 移動アイコン
    • /<スキン名>/toolbar/AddressBar
  • Favicon
    • settings/<ユーザー>/caches/favicon
  • ダイナミックフォルダアイコン
    • /<スキン名>/dynfolder
  • エクスプローラバータブのアイコン
    • /<スキン名>/panel および/<スキン名>/panel/spx
  • リンクフォルダアイコン (画像)
    • /<スキン名>/

      icons.bmp (320x16)

      MakeSkin_-_1138209181.png


      *注 テストリリース版2214108よりdefaultフォルダにfolder.bmpとexpanded_folder.bmpが追加されました
      お気に入りツリーのフォルダアイコンの色が変更できます

      folder.bmp (272x16)

      MakeSkin_-_folder.png


      expanded_folder.bmp (272x16 ...なぜかfolder.bmpとおなじものですが、画像を編集して開いたフォルダにするとよいでしょう)

      MakeSkin_-_expanded_folder.png
  • ステータスバーアイコン
    • /<スキン名>/statusbar
  • お気に入りグループアイコン
    • /<スキン名>/panel
  • ブラウザエンジン切り替えアイコン
    • /<スキン名>/browser

Tips &dagger;

  • 2ch Skin/Plugin作製スレッドPart1から
    リンクバーに表示されるフォルダとかのアイコンと、エクスプロラバーに表示されるフォルダとかのアイコンは共通だから、色に気をつけないと見難くなるので注意。(エクスプローラバーは常に背景色は白だけど、rebar.bmpの色は色々なので)

追加情報 &dagger;

  • Version2.40beta1 スキンマネージャの実装に伴い各スキンフォルダにpreview.bmpとskin.icoが追加されました。
    また、プラグインマネージャの実装に伴いdefaultのスキンフォルダにextension.icoとextension_d.icoが追加されました。&new([nodate]){date}: Invalid date string;
  • Version2.30Test6 ウインドウバーの実装に伴いdefault/toolbar/WindowBarにWindowBar.bmpとWindowBarHot.bmpが追加されました。
  • Version2.30Test10 サムネイルタブ機能の追加に伴いdefault/tabにThumbnailTabs.icoとThumbnailTabsDrop.icoが追加されました。

オプションのアイコン &dagger;

  • /<スキン名>/options/Options.bmp
    MakeSkin_-_options.png
    • 192x16
      16x16のアイコンが12個
      左からフォーカス、セキュリティ、ユーザ インタフェース、検索、サービス、ビュー、ツールバー、Dock、パネルのアイコン。

マウスオーバー時のエフェクト (~Ver.2.40) &dagger;

  • 以下の画像はスキン名がdefault、もしくはスキン名がSleipnirフォルダにある画像を使用しています。
  • menu.bmp
    • /<スキン名>/panel
      MakeSkin_-_menu.png
      45x15
      a:選択状態
      b:クリックしたとき
      c:マウスオーバー時
      aとbの関係は反対かも...?
  • chevron.bmp
    • /<スキン名>/controls
      MakeSkin_-_chevron.png
      15x13
      メニューなどが表示しきれないときに現れるシェブロン
  • toolbar.bmp
    • /<スキン名>/controls
      MakeSkin_-_toolbar.png
      75x15
      a:マウスオーバー時
      b:クリックしたとき
      c:選択状態
      d:ボタン右のプルダウン部分マウスオーバー時
      e:ボタン右のプルダウン部分クリック時
  • combobox.bmp & edit.bmp
    • /<スキン名>/controls
      combobox.bmpのフォーマットはいまいち良く判っていなかったのですが、だいたいのトコロは把握できたようなので追記です。
      MakeSkin_-_Combobox.png
  • 15ピクセルx90ピクセルで6分割で使用されています。 上の画像は、Sleipnirスキンフォルダから取り出したcombobox.bmpを拡大して表示しています。
    グリッド線は1ピクセルで区切られています。(PictBearSEを使用)
  • 使われている色についての説明をしましょう。
    • 黄色は背景の透過色で、テキストエリアの白色がそのまま画面上に現れます。
      テキストエリアの背景色を変更したいときはこの黄色(#FFFF00)と下で説明する緑以外の色が使用可能です。
      しかし、テキストそのものの色は黒以外に選択肢がないので当然使える色は限られてきますが...
    • 緑色はオーバーレイで他の画像と合成されたときに背景を透過します。
      なのでこの緑色(#00FF00)以外の色を使用すると、その部分は常に表示されることになります。
    • では各々の役割を説明しましょう。
    1. :ここはノーマル時にコンボボックス内を描画します。x、y方向へストレッチです。
    2. :ここはマウスホバー時にコンボボックス内を描画します。x、y方向へストレッチです。
    3. :ここはノーマル時のボタンを描画します。y軸方向のみにストレッチのようです。
    4. :ここはマウスホバー時のボタンを描画します。y軸方向のみにストレッチ。
    5. :ここはクリック時のボタンです。上記に準じます。
    6. :ここはボタン上のテクスチャサーフェスです。好きな文字や画像を書き込むことが出来ます。
      画像はy軸方向のみにストレッチ。
    • ちょっとややこしいかもしれませんが、画面上を拡大するルーペソフトなどを使ってコンボボックス内をのぞくと意味がわかるかと思います。
      ここでマウスホバー = マウスオーバーと同義です、念のため。
    • 動作の検証のために作製した画像をサンプルとして載せておきますね
      no_images.png
  • tab.bmpまたはtab_bottom.bmp
    • /<スキン名>/controls
      MakeSkin_-_1138518807.png
      76x19
      a:非アクティブ時の通常状態
      b:アクティブ時の通常状態
      c:非アクティブ時のマウスオーバー状態
      d:アクティブ時のマウスオーバー状態
      Sleipnirオプション>Dock>タブの設定にあわせてx,y軸へストレッチ
  • explorerbar_close.bmp
    • /<スキン名>/controls
      MakeSkin_-_explorerbar_close.png
      90x15
      6分割、3パターンで2種類
      左から通常・マウスオーバー・クリック
      左側のグループはexplorerbar_title.bmpが有効時に使用(フォーカスがあるときのみ)
  • BookmarkToolBarN.bmp & BookmarkToolBarH.bmp : DefaultN.bmp & DefaultH.bmp
    • /<スキン名>/panel
      MakeSkin_-_other.png
      16x16,32x16 DefaultH.bmpおよびBookmarkToolBarH.bmp の画像を加工してマウスオーバー時に変化させることが出来ます
      *注 エクスプローラバーの”表示”アイコンはテストリリース版2214106より非表示になりました
  • tab_left.bmpまたはtab_right.bmp
    • /<スキン名>/controls
      MakeSkin_-_tab_side.png
      76x19
      a:非アクティブ時の通常状態
      b:アクティブ時の通常状態
      c:非アクティブ時のマウスオーバー状態
      d:アクティブ時のマウスオーバー状態
      メインタブ横置き時・エクスプローラバータブと共通
  • BookmarkTree.bmp
    • /<スキン名>/panel
      MakeSkin_-_bookmarktree.png
      80x16
      左から、お気に入り・お気に入りグループ・最近閉じたページ・Jig

注意事項 &dagger;

  • 表中の要素はすべてを網羅しているわけではありません。
    判明次第追記していくつもりですが、コメント欄などで情報を提供していただけると助かります。
  • 説明に使用している画像はSleipnir(version2.30)を初めてインストールした状態で表示されているものに限って解説しています。

RSSバー &dagger;

  • 現時点では、RSSバーのスキンはアクティブスキンフォルダではなくスキンフォルダ直下にビットマップが置かれます。
    そのため正確にはSleipnirのスキンと異なります。
  • ツールバーのアイコン
    • /resources/skins/RssToolBar.bmp
      no_images.png
      • 182x16
        16x16のアイコンが8個
        左からRSS・ATOMファイルの追加、フォルダの追加、クリッピングフォルダの追加、削除、名前の変更/キーワードの変更、更新、設定、バージョン情報のアイコン。
  • ツリービューのアイコン
    • /resources/skins/RssTreeView.bmp
      no_images.png
      • 112x16
        16x16のアイコンが7個
        左からフォルダ、クリッピングフォルダ、読み込み前のRSS・ATOM、読み込んだRSS・ATOM、読み込んだRSS・ATOM(新着あり)、読み込み中のRSS・ATOM、読み込み失敗または解析失敗のRSS・ATOMのアイコン。

スキンマネージャ &dagger;

  • スキンマネージャに画像とアイコンを表示
    • スキンマネージャには現在Fenrirから提供されてるものしか画像及びアイコンは表示されません。
      以前からあるスキンの場合、名前は表示されているので特に不都合は無いのですが、細かいところまでこだわりたい方のためへの情報です。
      • まず、画像を登録したいスキンのスクリーンショットを用意します。
        画像のフォーマットはbmpでサイズは325x300(ピクセル)以内にして下さい。
        画像の名前は何でも構いませんが、ここでの名前をあとで使用することになります。(デフォルトではpreview.bmp)
      • アイコンも変えたい場合は32x32(ピクセル)で色数8bit(256色)~16bit(168000色)のものを用意します。(デフォルトではextension.icoあるいはskin.ico)
      • 用意した画像とアイコンを登録したいスキンのフォルダへ保存します。
      • Sleipnirインストールフォルダ/smartinstaller/SmartInstaller Installation Information/skinsにあるdefault.siファイルをテキストエディタで開き以下のように編集します。
        (SmartInstaller Installation Informationフォルダは隠しファイルで読み取り専用になっています)
例としてここではスキン名をfenrir,画像の名前をfenrir.bmp,アイコンをfenrir.icoとします
ここに書き込まれた情報がスキンマネージャで名前を右クリックしたときのメニューにある
”このスキンについて”に表示されます。
[Property]
ProductKind=Skin
ProductName=fenrir
Version=100 ←3桁で表記:プラグインマネージャでは間にピリオドが挿入されます
#SiUri=http://extensions.tabbrowser.jp/si/skins/default.si ←#を行頭につけてコメントアウトします※2
#SarUri=http://extensions.tabbrowser.jp/sar/skins/default.sar ←#を行頭につけてコメントアウトします※2
Preinstall=false
Author="Fenrir & Co." ←適宜書き換えます
AuthorUri="http://www.fenrir.co.jp/" ←適宜書き換えます
PreviewFileName="resources/skins/finrir/finrir.bmp" ←用意した画像の名前に変更
IconFileName="resources/skins/finrir/finrir.ico" ←用意したアイコンの名前に変更
Description=finrir skin ←適宜書き換えます


  • 編集が終わったらこのファイルにスキンの名前を付けて拡張子をsiとし、default.siと同じフォルダに保存します。
  • Sleipnirを再起動してスキンマネージャを表示すると先ほどスキンフォルダに格納した画像とアイコンが表示されているはずです。

    こんな感じで表示されます
    MakeSkin_-_SkinManager.png

  • 上記と同様な方法でプラグインマネージャもアイコンを変更したりできますが、ここでは割愛します。

  • ※1 smartinstallerフォルダはSleipnir version2.40 bata1から追加されました。
  • ※2 この方法における既知の不具合として、アップデートの確認をすると通信中のままになってしまいます。
    Fenrirのサイトにないものを探しているのですから当然かも知れませんが...
    (しばらくしてからもう一度アップデートの確認をすると通信に失敗した旨のメッセージに変わります)
    5行目と6行目をコメントアウトしないでおくと上記の不具合?は発生しませんがなんか釈然としませんしね。
    なので、コメントアウトをせずにdefault.siとdefault.sarをスキン名.siおよびスキン名.sarとしておいてもOKです。この場合アップデートの確認で”通信に失敗しました”というメッセージになります。

*1 2.40btest2現在、透過アイコン作成時にオプションで保存時の背景色を黒にしないと、うまく透過されないようです。
*2 整形済みテキスト表示だとGeckoエンジンで描画したとき意図したように表示されないので表組みにしました(GeckoだとCSVデータみたいに繋がって表示されちゃいます)
*3 Graniの「argentum」スキンでは[Controls]に書かれていましたが、本当は「ActiveTabBold」同様に[Settings]セクションに置くものなのかも
*4 記述におかしいところがありましたらどんどん編集して直してください。ビルドナンバーが上がるたびに細かい変更が加えられていますので、この情報もすぐに役に立たなくなるかも知れません...orz
*5 ゆなカラーピッカー画面上の色を拾うことができます。スキン作製時には大変重宝しますよ

Last-modified: 2020-12-09 (水) 10:43:47 (2d)