Firefox1.0.6 のタブ部分をSafari化する（最新版TBEをSafarifox仕様になるようカスタムする）
まず TBE の最新版を
こ
ちらからダウンロードします。8月26日現在、最新版は 1.14.2005082201 になっています。
TBE はバージョンアップが非常に早いです。バージョンアップの度に弄るのが面倒だという方は、
何らかの不具合や、重大なセキュリティホール等が発見されない限り、更新しないというのも手です。
（もちろんそれにおいて何らかの問題が生じたとしても、自己責任だということでお願いします）
Firefoxの再起動でTBEがインストールできたことを確認したら（再起動しないと完全にインストールされません）、
TBE の設定画面（ツール/拡張機能/TBEをクリックし、「設定」ボタンを押す）を開き、以下の設定を行っておきます。
1. タブブラウザ拡張/外観/タブ の「タブのクローズボタン」で、「常に全てのタブに表示」にチェック。
2. 同じく「タブのクローズボタン」で「詳細」を開き、表示スタイルを「標準のスタイル（現在のテーマに依存）」にチェック。
3. タブブラウザ拡張/外観/タブバー の「タブが多すぎる時」で、「スクロールボタンでスクロール」「自動で隠す」にチェック。
4. 同じくタブブラウザ拡張/外観/タブバー の「その他」で、「タブを閉じるボタンを表示する」のチェックを外す。
|
Safari化では上記４つの設定が重要になっています。他の設定についてはご自分の好みで設定して下さい。
設定が終わったらFirefoxを終了させ、
\Documents and Settings\（ユーザ名）\Application Data\Mozilla\Firefox\Profiles\
（英数字）\extensions\{0B0B0DA8-08BA-4bc6 -987C-6BC9F4D8A81E}\chrome\tabextensions.jar をコピー、
tabextensions_original.jar とリネームしてバックアップを取ったら、
tabextensions.jar をWinRARで開きます。
tabextensions.jar\content\tabextensions と辿り、
tabextensions.xml をデスクトップ上に抜き出して下さい。
この tabextensions.xml を認識したコードで保存できるテキストエディタで開き、書き換えの作業をおこなっていきます。
※行数はこの作業通り行っていった場合の数値を書いています（順番を変えて作業すると行を見失う可能性あり）。
タブ間に縦ラインを入れる
タブ同士の間に区切りの縦ラインを入れるための記述を書き加えます。
まず16行目と17行目の間にタブの左ラインを表示するための記述（赤いフォント部分）を追加します。
<content>
<xul:image class="tab-icon"
tabclass="tab-icon-hidden"
xbl:inherits="src=image"/>
↓ ↓ ↓
<content>
<xul:spacer class="tab-image-left" xbl:inherits="selected"/>
<xul:image class="tab-icon"
tabclass="tab-icon-hidden"
xbl:inherits="src=image"/>
|
続いて44行目と45行目の間にタブの右ラインを表示するための記述（赤いフォント部分）を追加します。
</xul:stack>
<xul:toolbarbutton tabclass="tab-closebutton" class="tabs-closebutton close-button"/>
<xul:hbox class="tab-dropmarker-after"/>
</xul:hbox>
</content>
↓ ↓ ↓
</xul:stack>
<xul:toolbarbutton tabclass="tab-closebutton" class="tabs-closebutton close-button"/>
<xul:hbox class="tab-dropmarker-after"/>
</xul:hbox>
<xul:spacer class="tab-image-right" xbl:inherits="selected"/>
</content>
|
タブのクローズボタン＆アイコンの位置を変更
「ファビコン（ローディングアニメ）左・クローズボタン右」を「クローズボタン左・ファビコン（ローディングアニメ）右」にします。
25行目のファビコン（ローディングアニメ）を表示するための記述を、
42行目のタブクローズボタンを表示するための記述と位置をまるっと交換します。
25行目
<xul:stack class="tab-icon">
<xul:image xbl:inherits="validate,src=image"
class="tab-icon-image"
tabclass="tab-icon-active"/>
<xul:image class="tab-extra-status"/>
<xul:spacer/>
</xul:stack>
〜
42行目
<xul:toolbarbutton tabclass="tab-closebutton" class="tabs-closebutton close-button"/>
↓ ↓ ↓
25行目
<xul:toolbarbutton tabclass="tab-closebutton" class="tabs-closebutton close-button"/>
〜
36行目
<xul:stack class="tab-icon">
<xul:image xbl:inherits="validate,src=image"
class="tab-icon-image"
tabclass="tab-icon-active"/>
<xul:image class="tab-extra-status"/>
<xul:spacer/>
</xul:stack>
|
タブのテキストを黒フォントとハイライトの二重化する
白フォントだけになっていたタブのテキストの上に黒フォントのテキストを表示させるようにします。
32行目〜34行目の下に、クラス名を tab-text2 に変えた32行目〜34行目と同じ記述（赤いフォント部分）を書き加えます。
<xul:label class="tab-text"
flex="1"
xbl:inherits="value=label,accesskey,crop,disabled"/>
↓ ↓ ↓
<xul:label class="tab-text"
flex="1"
xbl:inherits="value=label,accesskey,crop,disabled"/>
<xul:label class="tab-text2"
flex="1"
xbl:inherits="value=label,accesskey,crop,disabled"/>
|
これで tabextensions.xml の書き換えは終了です。コードを変えることなくそのまま上書きでエディタを終了させ、
この書き換えた
tabextensions.xml を、
\Documents and Settings\（ユーザ名）\Application Data\Mozilla\Firefox\Profiles\
（英数字）\extensions\{0B0B0DA8-08BA-4bc6 -987C-6BC9F4D8A81E}\chrome\tabextensions.jar を再びWinRARで開き、
tabextensions.jar\content\tabextensions にD&D。上書きで圧縮させたらWinRARを閉じて下さい。
タブのクローズボタンの挙動を修正する
続いてポインタを置いても画像が変化しないクローズボタンを、変化するよう修正します。
こちらは userChrome.css に記述を書き加えることで修正させます。
\Documents and Settings\（ユーザ名）\
Application Data\Mozilla\Firefox\Profiles\（英数字）\chrome\userChrome.css を開き、以下の記述を書き加えて下さい。
（
Firefox1.0.6をTabbrowser Extensionsの最新版でSafari化する 2で
safari.css を作った方は、そちらに書き加えて下さい）
/*タブのクローズボタンの修正 ここから*/
tabbrowser tab[tab-hover="true"][tab-closebox-hover="true"]
toolbarbutton.tabs-closebutton.close-button {
list-style-image: url("chrome://global/skin/icons/tabclose-front-hover.png") !important;
}
tabbrowser tab[tab-hover="true"][tab-closebox-hover="true"]:active
toolbarbutton.tabs-closebutton.close-button,
tabbrowser tab[tab-hover="true"][tab-closebox-hover="true"][tab-closebox-active="true"]
toolbarbutton.tabs-closebutton.close-button {
list-style-image: url("chrome://global/skin/icons/tabclose-front-pressed.png") !important;
}
/*ここまで*/
|
これでタブ部分も全てSafari化できました。お疲れ様でした。Firefoxを起動させ、こんな感じにSafari化していたら成功です。
もっとディープにSafari化させたい＆余力が残っている（笑）方は、以下のおまけに書いたカスタムもしてみて下さい。
外観にものすごく大きな変化がでるわけではありませんが、もっともっと本家っぽくすることができます。
おまけ
ブックマークツールバーの文字にハイライトを入れる
ハイライトがあると更に本物に近づきます。白っぽいテーマなら必要ないかもしれませんが、
SAFARI_safari.jar のようなメタルっぽいテーマ等では、できるだけ入れておいた方がいいと思います。
（ちなみにこれまでの説明で貼っているSSのブックマークツールバーには、既にこのハイライトが入っています）
※上がハイライト無し、下がハイライト有り。やっぱりあった方がリアルですよね。
正しいやり方は知らないのですが、私がやっている方法を紹介してみます。
この作業には透過ファイルが作れる画像編集ソフトが必要です。ここではPhotoshopを使った説明をしていきます。
（ハライライトを入れる行為は、ブックマークツールバーの項目をしょっちゅう変える方には向いていません）
まず Safari_for_Firefox10PR.zip 内の extraフォルダにある
bookmarkshadow.png をPhotoshopで開きます。
次にFirefoxをSSで撮って同じくPhotoshopで開き、先ほどの bookmarkshadow.png の左端の白い林檎マークの所に、
このSSのブックマークツールバーの項目の、左端の部分が重なるように突っ込みます（私の場合は「News」の部分です）。
SSのFiredoxのウィンドウの左端を、bookmarkshadow.png の左端にぴったりつける感じになると思います。
※レイヤーは bookmarkshadow.png の下にSSがくるようにして下さい。逆だと当然ながら白い林檎マークは見えません。
続いて林檎マークのレイヤーは非表示にして、SSレイヤーの上に新規レイヤーを作り、SSのブックマークツールバーと
同じフォント、同じ大きさ、同じ幅の白い文字を、SSのブックマークツールバーの文字に重ねるように書いていきます。
書き終わったらこの白フォントのレイヤーの透明度を40％程度に下げ、SSのレイヤー＆林檎のレイヤーを消去し、
pngファイルとしてデスクトップ上に bookmarkshadow.png という名前で保存します。
（ Safari_for_Firefox10PR.zip 内の extraフォルダにある bookmarkshadow.png には上書きしないでおきましょう）
Firefoxを終了させ、
\Documents and Settings\（ユーザ名）\Application Data\Mozilla\Firefox\Profiles\（英数字）\
extensions まで進み、お使いのテーマの jarファイルが入っているフォルダを探してその jarファイルをWinRARで開き、
（ SAFARI_safari.jar なら
{0a76e880-11d9-4fff- b562-038d84fb1d98} というフォルダに入っています）
jarファイル\browser に先ほど作った（デスクトップ上の） bookmarkshadow.png をD&Dします。
Firefox を起動させるとブックマークツールバーに白いフォント（ハイライト）が出ているはずですが、ずれていると思います。
続いてこの「ずれ」を修正します。FirefoxをまたSSに撮り、Photoshopに読み込んだら、
先ほどのデスクトップ上に保存した方（自作した方）の bookmarkshadow.png を開き、SSを突っ込みます。
そしてこの bookmarkshadow.png の白フォントとSSの白フォントが重なるよう、
SSのレイヤーを移動させます。
※この画像ではわかりやすいように、bookmarkshadow.png の白フォントを赤色にしています。
ぴったり一致する場所にSSのレイヤーを置いたら、今度は
白フォントのレイヤーを動かし、
SSのブックマークツールバーの黒い文字から 1px 下に下げた位置（左右は同じに）にくるように置きます。
※この画像ではわかりやすいように、bookmarkshadow.png の白フォントを赤色にしています。
置けたらSSのレイヤーを削除、デスクトップ上の bookmarkshadow.png に上書き保存。
先ほどと同じ Documents and Settings のテーマのフォルダまで行って同じようにjarファイルをWinRARで開き、
Firefox を終了させてから jarファイル\browser にこの（デスクトップ上の）bookmarkshadow.png をD&Dします。
Firefox を起動させると、今度はぴったり白いフォントがハイライトに見える位置に出ていると思います。これで完了。
bookmarkshadow.png はテーマごとにこの作業を行わなくてはならないので、自作した bookmarkshadow.png は捨てず、
保存しておきましょう。（テーマを変えてもそのテーマのjarファイルにこれをD&Dするだけで済みますので）
※ テーマによっては位置調節した bookmarkshadow.png でも、位置がずれることがあります。
メインウィンドウのタイトルバーアイコンを消す
この作業をするとタイトルバーのみならず、タスクバーのアイコンも表示されなくなります。
まずFirefoxを終了させ、
\Program Files\Mozilla Firefox\chrome まで進み、
そこに
icons というフォルダを作って、その iconsフォルダの中に更に
default というフォルダを作ります。
パスが
\Program Files\Mozilla Firefox\chrome\icons\default となるフォルダを作るわけです。
その中に16pxサイズが透明のFirefoxアイコンを置き、
main-window.ico とリネームすればOK。
（
Resource HackerでFirefoxからアイコンを抜き、
@icon変換で16pxサイズを透明pngに入れ替えて作るといいと思います）
もちろんアイコンはFirefoxのものでなくてもOK。ご自分の好みの物を入れちゃって下さい。
Firefoxを起動させると、タイトルバーのアイコンが消えている（実際は透明アイコンを表示している）と思います。
同じように、
\Program Files\Mozilla Firefox\chrome\icons\default に決められた名前のアイコンを置けば、
メインウィンドウだけでなく、拡張機能のダイアログ、テーマのダイアログ等のタイトルバーアイコンも消すことができます。
他のウィンドウ（ダイアログ）のタイトルバーアイコンの名称と、影響する場所は以下の通りとなっています。
bookmark-window.ico →「ブックマークの管理」ウィンドウのアイコン
CustomizeToolbarWindow.ico →「ツールバーのカスタマイズ」ウィンドウのアイコン
downloadManager.ico →「ダウンロードマネージャ」のアイコン
extensionsManager.ico →「拡張機能」ダイアログのアイコン
help.ico →「ヘルプ」ウィンドウのアイコン
jsconsoleWindow.ico →「JavaScript コンソール」ウィンドウのアイコン
metadata.ico →「ページ情報」ダイアログのアイコン
themesManager.ico →「テーマ」ダイアログのアイコン
winInspectorMain.ico →「DOM インスペクター」のアイコン
|
Firefoxで表示される全てのウィンドウ（ダイアログ）のアイコンを消したい（変えたい）方は目的のアイコンを10個作り、
それぞれに上記９個の名前と main-window.ico という名前を付けて、defaultフォルダに置けばいいわけです。
これで本当の本当に作業は全て終了です。お疲れ様でした。満足いく結果になっていることを祈っています。
何か不具合が生じましたらコメント下さい。早急に解決方法を答えさせて頂きます。
（不具合の修正、質問等の答えは私ではなく玄武が直接答えることもあります）
また、本家をお持ちの方はSSを提供して下さると嬉しいです。（私も玄武も本家には触ったこともないので…）
* * * * * * * * * * * * * * * * * * * * * * * *
最後に。この記事は我が相棒、玄武氏の協力によって作ることができました。ほんとにいつもありがとう、玄武たん！
