タブブラウザ Sleipnir オンラインデータベース
http://www.sleipnir-wiki.jp/index.php?%A5%B9%A5%AD%A5%F3%A4%CE%BA%EE%C0%AE

  [ リロード ]   [ トップ | 一覧 | 単語検索 | 最終更新 | バックアップ | ヘルプ ]


*Version 2.xx スキンの作製 [#l78f30a8]

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

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

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

**コンテンツ [#yd2777be]
#contents

**参考ページ [#gaf99962]
:[[スキン]]|スキンの概要解説があり、スキンファイルのダウンロードが出来ます。

:[[skin.iniの編集方法>http://www.sleipnir-wiki.jp/index.php?FAQ#k0835d04]]|FAQのページにある旧スキンファイルの利用法
:[[Sleipnir Resource Center:http://sleipnir.pos.to/cgi-bin/uploader/up.cgi]]|スクリーンショットやスキンファイルのアップロードと公開が出来ます。

:[[スクリーンショットギャラリー]]|スキンの公開はしないけど、スクリーンショットだけでも公開したいという場合はこちらにどうぞ。

:[[スキンパーツセンター>SkinPartsCenter]]|スキン職人さんが提供されたパーツがあるはず...~
COLOR(Slategray):(通信状態アニメーションはこちらのページへ移動しました)

:%%[[Fenrir & Co. Extension Center - スキン:http://extensions.tabbrowser.jp/skins/]]%%|%%ここで提供されているスキンはSmartInstallerを使ってインストールすることができます。%%

:%%[[Sleipnir Unofficial Extensions Center:http://w5.abcoroti.com/~suec/home/]]%%|%%スキン・プラグインの代理公開所。%%


**スキンの作成に便利なツール(フリーソフト)[#tools]
***画像の編集 [#ef018dae]
:[[PictBear Second Edition:http://sleipnir.pos.to/]]|言わずと知れたSleipnirと同じ作者の画像加工ソフト。MDIやレイヤーにも対応している。~
PhotoshopのPSD形式も一応読み込み可能(レイヤーのエフェクトに関する情報は失われます)
:[[JTrim:http://www.woodybells.com/jtrim.html]]|レイヤー、アルファチャンネル透過は扱えないが多機能。リサイズやフィルタが強力で、GUIが分かりやすい。
:[[Gimp:http://www004.upp.so-net.ne.jp/iccii/]]|もともとUNIX向けに開発されただけあり、すこし扱いに慣れが必要だがPhotoshop並みの操作ができる超多機能なソフト。
:[[EDGE:http://www.tkb-soft.hmcbest.com/program/win/edge/index.htm]]|256色専用のドット絵エディタ。多機能かつ扱いやすい。ドット絵師さん向け。

***画像の変換 [#r263b901]
:[[@icon変換:http://www.towofu.net/soft/aicon.php]]|PNGやビットマップなどをWindowsのアイコン形式に変換するソフト。アルファチャンネル透過、マルチアイコンやアイコンライブラリに保存など、機能が多彩でアイコンの作成に便利。((2.40btest2現在、透過アイコン作成時にオプションで保存時の背景色を黒にしないと、うまく透過されないようです。))

***動画の作成 [#lad1004b]
:[[Giam:http://homepage3.nifty.com/furumizo/giamd.htm]]|GIFアニメーションの作成ソフト。AVI動画に出力可能で通信状態アニメーション、サンプル作成に便利。
:[[Radish AVI Maker:http://www.studio-radish.com/soft/avimaker.html]]|Windowsのコモンコントロールの一つであるアニメーションコントロールに使用するAVIリソースを作成するために最適化されたAVI作成ソフト。

***slin.iniの編集 [#bd71bdf1]
:[[skin_ini_editor:http://www.fenrir.co.jp/labs/skin_ini_editor.html]]|skin.ini をGUIで簡単に編集できるツール。スキン作成者にはもちろんのこと、既存スキンの改造調整を行いたい人にも便利。

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

#hr

-一例を紹介しましょう

--どの程度の作り込みをするのかでアプローチも違ってきますが、もっとも一般的と思われる方法を以下に記します。

+まず、適当な作業フォルダを作り(デスクトップでも可)/resources/skins以下にあるdefaultフォルダをそこへコピーします。
+次にコピーしたdefaultフォルダの名前を変更します。Sleipnirのスキン選択メニューに現れるのはこのフォルダの名前なので適当なスキン名をつけておきましょう。
+以下、このフォルダに対して作業を行います。

+++背景のみを変更したい、あるいはコントロールのボタン画像を変更したい場合にはcontrolフォルダに画像を用意しなくてはなりません
+++元々defaultにあったcontrolフォルダにはナニも画像が入っていませんので、再度Sleipnirのスキンフォルダにあるsleipnirフォルダを開いてここからcontrolフォルダをコピーしてきて作業フォルダにある空のcontrolフォルダに上書きしちゃいましょう。
+++メニューバー、ツールバー、アドレスバー、検索バー、エクスプローラバー、あとロボフォームバー(インストールしていた場合)の背景画像はcontrolフォルダにあるrebar.bmpと言うファイルを変更することで色を変えることが出来ます。
+++試しにこのファイルをWindowsのアクセサリにあるペイントで開いて適当に色を塗り、上書き保存しちゃいます。
+++あとは作業フォルダにある名前を変更した(元default)フォルダをSleipnirのスキンフォルダにコピーします。
+++Sleipnirが起動中だった場合はメニューに反映されませんので、いったん終了し再度立ち上げるとメニューに新しいスキンの名前が登録されているはずです。
+++あとはソレを選択すると先ほど変更した色が背景に適用されます。

---同様にして他のファイルも好みのスタイルになるように変更していくわけですが、ペイントだけでは作り込むのに限界がありますので上で紹介した透過やレイヤーを扱えるソフトウエアを使うのがベストです。
---ツールバーのボタンアイコンを変更する場合も、actionフォルダを開いて同じように加工していきます。
-詳細は以下に解説してありますので、試行錯誤しながらカッコイイスキンにトライしてみてください。

**スキンのフォルダ構造 (Ver.2.5.12) [#Directory]
|>|>|>|~ /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|        #ウィンドウバーボタン用アイコン|
|>|>|>|>|RIGHT:*編集人より*((整形済みテキスト表示だとGeckoエンジンで描画したとき意図したように表示されないので表組みにしました(GeckoだとCSVデータみたいに繋がって表示されちゃいます))) |f

***解説 [#v4857efb]
-インストールの仕方によってディレクトリの表記が変わってきますので、上記ではresourceフォルダ以降のファイルを記しています~
通常、Sleipnirインストール先のUnicodeフォルダ直下にresourceフォルダがあるはずです
-[[&color(#FF5D7F){注意事項(ページ内リンク)};>#attention]]

**skin.iniの各項目 (Ver.2.5.11) [#w7b892a7]
|~ 書式 |~ 説明 |
|BGCOLOR(#DFECFF):[General]|スキン全体に関する情報|
| Author=<str>| スキン制作者 |
| Version=<0.00>| バージョン |
|ClientMinVersion=<0.00>|スキンの動作が保証される最小バージョン|
| Description=<str>| スキンの説明 |
| ButtonWidth=<num>| ツールバーアイコンの幅 |
| ButtonHeight=<num>| ツールバーアイコンの高さ |
| ButtonText=<true/false>| アイコンのテキスト表示の可否:再起動後に反映|
| ButtonDropDown=<true/false>| ドロップダウンの▼表示の可否:再起動後に反映|
| ||
|BGCOLOR(#DFECFF): [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>|ツールバーの通常時の文字|
| ||
|BGCOLOR(#DFECFF): [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/?>|<不明>((Graniの「argentum」スキンでは[Controls]に書かれていましたが、本当は「ActiveTabBold」同様に[Settings]セクションに置くものなのかも))|
| 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>|メニュー内セパレータの描画開始位置&br;(テキスト部分の位置を基準にするか。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背景の描画方法&br;(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>|ツールバーのエフェクト用|
| ||
|BGCOLOR(#DFECFF): [Settings] |#一部のオプション設定をスキン側で強制的に規定する|
| ActiveTabBold=<enable/disable/auto>|アクティブタブを強調表示する|
|>|RIGHT:*編集人より*((記述におかしいところがありましたらどんどん編集して直してください。ビルドナンバーが上がるたびに細かい変更が加えられていますので、この情報もすぐに役に立たなくなるかも知れません...orz)) |f

***解説 [#b6ebe89d]
:str|Strings:文字列
:num|Number:数値
:true|True:多くのプログラム言語で使用される表記で、実行結果に対し真の値を返す。~
ここでの場合、“使用する”
:false|False:上記の反対で、実行結果に対して偽の値を返します。ここでは“使用しない”
:auto|Auto:Sleipnirオプションの設定に従う、もしくはデフォルトの設定に従う、ということのようです(詳細不明)~
:#FFFFFF|16進数表記の色の指定:RGBの順番で指定する。各色に対して00〜FFの値をセットします~
10進数だとFFFFFFは(255,255,255)=白色となる~
ようワカランって人は[[これ:http://www.uryusoft.com/software/YunaColor/]]((''ゆなカラーピッカー''画面上の色を拾うことができます。スキン作製時には大変重宝しますよ))をつかってみそ
:stretch|Stretch(ストレッチ):画像を引き延ばします
:tile|Tile(タイル):画像をタイル状に並べていきます
:bar|Bar(バー):画像をバーの中でのみ引き延ばします

--2ch Skin/Plugin作製スレッドPart1_654から転載~
|&color(#4176A8){stretch};|:標準ツールバー、メニューバー、検索バー、、、全てを合わせた範囲内でrebarを引き伸ばしたもの。|f
|&color(#4176A8){bar};|:標準ツールバー、メニューバー、検索バー、、、各々のバー内でrebarを引き伸ばしたもの。|f
|&color(#4176A8){tile};|:そのまんま。並べるだけ。|f
|>|引き伸ばすとは、バーの縁から4ピクセルはrebar9ピクセル四方から上下左右4ピクセルずつを抜き出し、内側はrebarの中心1ピクセルで埋めるということ。やれば分かる。|f
|>|だから、グラデーションする時にstretchとbarは使えない。|f
|>|例えば縦方向のただのグラデーションなら縦長の画像(横数ピクセル、縦は必要なだけ、150くらい?)をtile指定する。|f
|>|横方向の場合、画面内にグラデーションを1ローテーション(?用語が分からん)しかさせたくない場合、rebarの横サイズ=画面サイズ分必要になる。|f
|>|ま、あんまり融通は利かない。|f

***追加情報[#check1]

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

**ツールバーのアイコン画像について (〜Ver.2.40) [#ge3657a9]

--[[&size(18){''ツールバーに使用されているアイコン画像のフォーマットについての説明''};>#attention]]

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

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

#ref(フェンリル管理画像/MakeSkin_-_toolbaricon.png,nolink)
&color(red){※};Sleipnirのバージョンによっては24bitじゃないと不具合が出る場合があります。


-default/actionsに格納されているボタンアイコン画像(〜Version2.30 Test13 現在51種...)~

#ref(フェンリル管理画像/MakeSkin_-_action.png,nolink)


-アイコン画像ファイルは72x24がデフォルトで、24x24のボタンアイコンを表示しますが、Skin.iniの[General]セクションにButtonWidth=16 , ButtonHeight=16を指定してコントロール用の画像に48x16を用意することで、16x16のボタンアイコンを表示することが出来ます。~
(参考:small-sleipnirスキン)~

**背景のスキンの作製 (〜Ver.2.40) [#u1df6470]
--[[&size(18){''背景画像について''};>#attention]]

---ココで説明しているファイルは以下のフォルダに格納されています
,/resources/skins/sleipnir/controls

#ref(フェンリル管理画像/MakeSkin_-_background.png,nolink)


--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) [#x76f4fb5]
--[[&size(18){''アイコンについての説明''};>#attention]]
#ref(フェンリル管理画像/MakeSkin_-_icons.png,nolink)

-&size(20){アイコンのあるディレクトリの記載のみです。};~


-色数を増やすとOSが未対応の環境で使えなくなる場合があります。~
256色であればOSの世代に関係なくつかえるかと...


--サーチ・ページ検索・ハイライト・及びカスタム検索ボタン用アイコン群
---/<スキン名>/toolbar/SearchBar~
アイコンのフォーマットはバラバラ。~
20x20以内で256色なら問題ないと思われる。~


--移動アイコン
---/<スキン名>/toolbar/AddressBar~


--Favicon
---settings/<ユーザー>/caches/favicon~


--ダイナミックフォルダアイコン
---/<スキン名>/dynfolder~


--エクスプローラバータブのアイコン
---/<スキン名>/panel		および/<スキン名>/panel/spx~


--リンクフォルダアイコン (&color(GREEN){画像};)
---/<スキン名>/~
&br;
icons.bmp  (320x16)
&br;&br;
#ref(フェンリル管理画像/MakeSkin_-_1138209181.png,nolink)
&br;&br; 
&color(red){*注 テストリリース版2214108よりdefaultフォルダにfolder.bmpとexpanded_folder.bmpが追加されました};~
&color(red){お気に入りツリーのフォルダアイコンの色が変更できます};~
&br;
folder.bmp  (272x16)
&br;&br;
#ref(フェンリル管理画像/MakeSkin_-_folder.png,nolink)
&br;&br;
expanded_folder.bmp  (272x16    &color(blue){...なぜかfolder.bmpとおなじものですが、画像を編集して開いたフォルダにするとよいでしょう};)
&br;&br;
#ref(フェンリル管理画像/MakeSkin_-_expanded_folder.png,nolink)

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

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

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

***オプションのアイコン [#j0a10467]
-/<スキン名>/options/Options.bmp
#ref(フェンリル管理画像/MakeSkin_-_options.png,nolink);
---192x16~
16x16のアイコンが12個~
左からフォーカス、セキュリティ、ユーザ インタフェース、検索、サービス、ビュー、ツールバー、Dock、パネルのアイコン。

**マウスオーバー時のエフェクト (〜Ver.2.40) [#q0afc540]
--[[&size(18){''マウスエフェクトについての説明''};>#attention]]
#ref(フェンリル管理画像/MakeSkin_-_Picture.png,nolink)

-以下の画像はスキン名がdefault、もしくはスキン名がSleipnirフォルダにある画像を使用しています。

--menu.bmp
---/<スキン名>/panel~
#ref(フェンリル管理画像/MakeSkin_-_menu.png,nolink)
45x15~
a:選択状態~
b:クリックしたとき~
c:マウスオーバー時~
aとbの関係は反対かも...?

--chevron.bmp
---/<スキン名>/controls~
#ref(フェンリル管理画像/MakeSkin_-_chevron.png,nolink)
15x13~
メニューなどが表示しきれないときに現れるシェブロン

--toolbar.bmp
---/<スキン名>/controls~
#ref(フェンリル管理画像/MakeSkin_-_toolbar.png,nolink)
75x15~
a:マウスオーバー時~
b:クリックしたとき~
c:選択状態~
d:ボタン右のプルダウン部分マウスオーバー時~
e:ボタン右のプルダウン部分クリック時~

--combobox.bmp & edit.bmp
---/<スキン名>/controls~
combobox.bmpのフォーマットはいまいち良く判っていなかったのですが、だいたいのトコロは把握できたようなので追記です。
#ref(フェンリル管理画像/MakeSkin_-_Combobox.png,nolink)
--15ピクセルx90ピクセルで6分割で使用されています。
上の画像は、Sleipnirスキンフォルダから取り出したcombobox.bmpを拡大して表示しています。~
グリッド線は1ピクセルで区切られています。(PictBearSEを使用)~
--使われている色についての説明をしましょう。
---&color(#000000,#FFFF00){黄色};は背景の透過色で、テキストエリアの白色がそのまま画面上に現れます。~
テキストエリアの背景色を変更したいときはこの黄色(#FFFF00)と下で説明する緑以外の色が使用可能です。~
しかし、テキストそのものの色は黒以外に選択肢がないので当然使える色は限られてきますが...
---&color(#000000,#00FF00){緑色};はオーバーレイで他の画像と合成されたときに背景を透過します。~
なのでこの緑色(#00FF00)以外の色を使用すると、その部分は常に表示されることになります。
---では各々の役割を説明しましょう。
+++:ここはノーマル時にコンボボックス内を描画します。x、y方向へストレッチです。
+++:ここはマウスホバー時にコンボボックス内を描画します。x、y方向へストレッチです。
+++:ここはノーマル時のボタンを描画します。y軸方向のみにストレッチのようです。
+++:ここはマウスホバー時のボタンを描画します。y軸方向のみにストレッチ。
+++:ここはクリック時のボタンです。上記に準じます。
+++:ここはボタン上のテクスチャサーフェスです。好きな文字や画像を書き込むことが出来ます。~
画像はy軸方向のみにストレッチ。
---ちょっとややこしいかもしれませんが、画面上を拡大するルーペソフトなどを使ってコンボボックス内をのぞくと意味がわかるかと思います。~
ここでマウスホバー = マウスオーバーと同義です、念のため。
---動作の検証のために作製した画像をサンプルとして載せておきますね
#ref(フェンリル管理画像/no_images.png,nolink)

--tab.bmpまたはtab_bottom.bmp
---/<スキン名>/controls~
#ref(フェンリル管理画像/MakeSkin_-_1138518807.png,nolink)
76x19~
a:非アクティブ時の通常状態~
b:アクティブ時の通常状態~
c:非アクティブ時のマウスオーバー状態~
d:アクティブ時のマウスオーバー状態~
Sleipnirオプション>Dock>タブの設定にあわせてx,y軸へストレッチ

--explorerbar_close.bmp
---/<スキン名>/controls~
#ref(フェンリル管理画像/MakeSkin_-_explorerbar_close.png,nolink)
90x15~
6分割、3パターンで2種類~
左から通常・マウスオーバー・クリック~
左側のグループはexplorerbar_title.bmpが有効時に使用(フォーカスがあるときのみ)

--BookmarkToolBarN.bmp & BookmarkToolBarH.bmp : DefaultN.bmp & DefaultH.bmp
---/<スキン名>/panel~
#ref(フェンリル管理画像/MakeSkin_-_other.png,nolink)
16x16,32x16
DefaultH.bmpおよびBookmarkToolBarH.bmp の画像を加工してマウスオーバー時に変化させることが出来ます~
&color(red){*注	エクスプローラバーの”表示”アイコンはテストリリース版2214106より非表示になりました};

--tab_left.bmpまたはtab_right.bmp
---/<スキン名>/controls~
#ref(フェンリル管理画像/MakeSkin_-_tab_side.png,nolink)
76x19~
a:非アクティブ時の通常状態~
b:アクティブ時の通常状態~
c:非アクティブ時のマウスオーバー状態~
d:アクティブ時のマウスオーバー状態~
メインタブ横置き時・エクスプローラバータブと共通

--BookmarkTree.bmp
---/<スキン名>/panel~
#ref(フェンリル管理画像/MakeSkin_-_bookmarktree.png,nolink)
80x16~
左から、お気に入り・お気に入りグループ・最近閉じたページ・Jig

**注意事項[#attention]

--表中の要素はすべてを網羅しているわけではありません。~
判明次第追記していくつもりですが、コメント欄などで情報を提供していただけると助かります。

--説明に使用している画像はSleipnir(version2.30)を初めてインストールした状態で表示されているものに限って解説しています。~

**RSSバー [#w93b1562]
-現時点では、RSSバーのスキンはアクティブスキンフォルダではなくスキンフォルダ直下にビットマップが置かれます。~
そのため正確にはSleipnirのスキンと異なります。

-ツールバーのアイコン
--/resources/skins/RssToolBar.bmp
#ref(フェンリル管理画像/no_images.png,nolink);
---182x16~
16x16のアイコンが8個~
左からRSS・ATOMファイルの追加、フォルダの追加、クリッピングフォルダの追加、削除、名前の変更/キーワードの変更、更新、設定、バージョン情報のアイコン。

-ツリービューのアイコン
--/resources/skins/RssTreeView.bmp
#ref(フェンリル管理画像/no_images.png,nolink);
---112x16~
16x16のアイコンが7個~
左からフォルダ、クリッピングフォルダ、読み込み前のRSS・ATOM、読み込んだRSS・ATOM、読み込んだRSS・ATOM(新着あり)、読み込み中のRSS・ATOM、読み込み失敗または解析失敗のRSS・ATOMのアイコン。

-RSSバーの作者によるスキンの解説
--[[RSS Bar Official web site. - カスタマイズ:スキン:http://darksky.nureyev.net/sw/rssbar/index.php?cmd=read&page=skin]]~
---RSSバーのスキンに関して、上記に詳しく書かれていますのでこちらも参考にしましょう。

**スキンマネージャ [#t421dc84]
-スキンマネージャに画像とアイコンを表示
--スキンマネージャには現在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フォルダは隠しファイルで読み取り専用になっています)
&br;

|例としてここではスキン名をfenrir,画像の名前をfenrir.bmp,アイコンをfenrir.icoとします|h
|[Property]&br;ProductKind=Skin&br;ProductName=&color(orangered){fenrir};&br;Version=&color(orangered){100};&color(dodgerblue){ ←3桁で表記:プラグインマネージャでは間にピリオドが挿入されます};&br;&color(orangered){#};SiUri=http://extensions.tabbrowser.jp/si/skins/default.si&color(dodgerblue){ ←#を行頭につけてコメントアウトします};&color(red){※2};&br;&color(orangered){#};SarUri=http://extensions.tabbrowser.jp/sar/skins/default.sar&color(dodgerblue){ ←#を行頭につけてコメントアウトします};&color(red){※2};&br;Preinstall=&color(orangered){false};&br;Author="&color(orangered){Fenrir & Co.};"&color(dodgerblue){ ←適宜書き換えます};&br;AuthorUri="&color(orangered){http://www.fenrir.co.jp/};"&color(dodgerblue){ ←適宜書き換えます};&br;PreviewFileName="resources/skins/&color(orangered){finrir};/&color(orangered){finrir.bmp};"&color(dodgerblue){ ←用意した画像の名前に変更};&br;IconFileName="resources/skins/&color(orangered){finrir};/&color(orangered){finrir.ico};"&color(dodgerblue){ ←用意したアイコンの名前に変更};&br;Description=&color(orangered){finrir skin};&color(dodgerblue){ ←適宜書き換えます};|
|ここに書き込まれた情報がスキンマネージャで名前を右クリックしたときのメニューにある&br;''”このスキンについて”''に表示されます。|f
&br;

---編集が終わったらこのファイルにスキンの名前を付けて拡張子を''si''とし、''default.si''と同じフォルダに保存します。
---Sleipnirを再起動してスキンマネージャを表示すると先ほどスキンフォルダに格納した画像とアイコンが表示されているはずです。~
~
CENTER:こんな感じで表示されます
#ref(フェンリル管理画像/MakeSkin_-_SkinManager.png,nolink)
~
--上記と同様な方法でプラグインマネージャもアイコンを変更したりできますが、ここでは割愛します。
&br;&br;
--&color(red){※1}; smartinstallerフォルダはSleipnir version2.40 bata1から追加されました。
--&color(red){※2}; この方法における既知の不具合として、アップデートの確認をすると''通信中''のままになってしまいます。&br;Fenrirのサイトにないものを探しているのですから当然かも知れませんが...&br;(しばらくしてからもう一度アップデートの確認をすると通信に失敗した旨のメッセージに変わります)&br;
5行目と6行目をコメントアウトしないでおくと上記の不具合?は発生しませんがなんか釈然としませんしね。~
なので、コメントアウトをせずにdefault.siとdefault.sarをスキン名.siおよびスキン名.sarとしておいてもOKです。この場合アップデートの確認で”通信に失敗しました”というメッセージになります。

//**このページへのコメント [#vbe0b89d]
//#pcomment(コメント/スキンの作成_,5,reply)
////スパム対策になるか試しにページ名を変えてみました

トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS