この記事にMerci-chaoさんからコメントを頂いたので（ありがとうございます）、今までの方法とは違う多段タブを試してみました。こちらのMerci-chaoさんの多段タブサイトです。
今まで使っていた方法では、最近タブのドラッグ＆ドロップがうまくできなくなっていたのですが、こちらの方法でまたできるようになりました。
それ以外にも「注目ポイント」に書かれているような、タブグループやピン止めの機能性が高く、機能やレイアウトをかなり自由に調整できるようです。自動更新機能もあります。
使い始めたばかりですが、使い勝手が良いと感じたのでやり方を書いていきます。
MultiTabRows@Merci.chao.uc.jsについて
Merci-chaoさんによって開発された新しい多段タブ。こちらのサイトです。
5chの解説によると、
「※ 最近登場した新しい多段タブの実装。
◯ 設定が豊富で、特別の機能もいくつか備えてる。
◯ 常に積極的にアップデートされていて、最新のBeta版やNightly版にも対応してる。
◯ 使用感はかなりスムーズで、多段タブでもドラッグ＆ドロップができるのは唯一。
◯ タブグループへの対応度もかなり高い。
◯ タブバーが上にあっても、スペースの活用効率が高い（タブバーが下にも対応）。
◯ タブバーがスクロール可能なとき、ピン留めされたタブは固定できる。
◯ 自動更新機能が搭載されている。
△ 設定は about:config を使う形式で、まあまあ使いやすいけど、説明ページ見ながらじゃないとちょっと厳しい。
△ 多段タブ.zipのCSS使ってるなら、互換性に注意。場合によってはCSSを書き直す必要もある。 △ コードが非常に複雑で、個人での改修はほぼ不可能。」
MultiTabRows@Merci.chao.uc.jsの導入方法
FirefoxにMultiTabRows@Merci.chao.uc.jsを導入する方法を記載していきます。
１．ファイルとフォルダをダウンロードする
今までの多段タブで使っていたファイルやフォルダの一部をそのまま使うことができますが、最新のものにした方が良いと思うので、全て入れ替えることにします。
A.スクリプトをダウンロード
📘Tab Mix Plus – ドキュメント（Google 翻訳）にアクセスして
「設定ファイル」と「ユーティリティ」をダウンロードします。
各リンクをクリックすると、自動的にダウンロードが始まり、「fx-folder.zip」と「utils.zip」というフォルダができます。それぞれを展開（解凍）します。
fx-folderの中には、「defaults」「config.js」が入っています。「utils」の方には7つ入っています。
B．スクリプトファイルをダウンロード
Merci-chaoさんの多段タブサイトにアクセスし、スクリプトファイルをダウンロードします。
スクリプトファイルと書かれている部分で、右クリックして、名前を付けてリンク先を保存します。
自動的に名前が入りますが、入らなければ「MultiTabRows@Merci.chao.uc.js」という名前で保存します。
C.userChrome.cssを作成する
Merci-chaoさんの多段タブサイトにアクセスし、下の方にある「高度な調整」の部分のコピーマークを押してクリップボードにコピーします。
メモ帳などにペーストして、「userChrome.css」と名前を付けて保存します。
２．ファイルとフォルダをインストールする
ダウンロードしたり作成したりしたファイルとフォルダをFirefoxにインストールしていきます。
A.fx-folderの中身を実行ファイルのあるフォルダにインストール
Firefoxのヘルプから「他のトラブルシューティング情報」を選択
「プログラムの実行ファイル」に書かれているfirefox.exeがあるフォルダを開きます。
今までの多段タブを使っていた場合は、該当フォルダには既に「defaults」「config.js」が入っています。最新のものにした方が良いので、これをダウンロードした「fx-folder」フォルダに入っている、同名のフォルダとファイルに入れ替えます。
ファイルを置き換えます。管理者の権限を求められることがありますが、続行をクリックします。
最新のものに置換されました。
B.utilsフォルダをプロファイルフォルダーにインストール
Firefoxのヘルプから「他のトラブルシューティング情報」を選択
プロファイルフォルダを開きます。
プロファイルフォルダに「chrome」フォルダがなければ、作成します。
今までの方法で多段タブにしていた場合は、chromeフォルダの中にはこのようなファイルが入っていると思いますが、全てのファイルを別の場所に移します。
何もなくなった、「chromeフォルダ」の中に、ダウンロードした「utilsフォルダ」を入れます。
「userChrome.js」以外の「.js」ファイルがあると不具合が起こる可能性があるので、「utils」フォルダ内の「BootstrapLader.js」を取り除いておきます。
C. プロファイルフォルダーにインストール
同じプロファイルフォルダに「MultiTabRows@Merci.chao.uc.js」ファイルを入れます。
D. userChrome.cssをプロファイルフォルダーにインストール
同じプロファイルフォルダに「userChrome.css」ファイルを入れます。
Firefoxを再起動する
Firefoxを再起動すると多段タブ表示になります。
A BootstrapLader.js.jsファイルを元に戻す
先ほど取り除いた「BootstrapLader.js.js」ファイルを元に戻します。
戻す場所はプロファイルフォルダの中の「utils」フォルダです。他に取り除いたファイルがあれば、元に戻します。
B. 再起動して動作を確認する
もう一度、Firefoxを再起動して、問題が起こっていないか確かめます。問題なければ、カスタマイズに進みます。
３．カスタマイズする
使いやすいように調整していきます。
A.about:config
新しいタブを開き、検索窓に「about:config」と入れてEnterを押します。
このような警告が出るので、「危険性を承知の上で使用する」をクリック
「userChromeJS.multiTabRows@Merci.chao.」と入力すると、設定できる項目が出てきます。
Merci-chaoさんの多段タブサイトの「操作」「レイアウト」「外観」「その他」と書いてある項目の値を調整することで、カスタマイズできます。
説明が詳しく書いてあるので、調整したい項目を探してください。
変更したい数値の横の鉛筆マークをクリックして、数値を入力後チェックマークを押して保存します。
例えば、タブの幅を変更したいときは「userChromeJS.multiTabRows@Merci.chao.tabMaxWidth」の値を変更します。
userChromeJS.multiTabRows@Merci.chao.tabsAtBottomを2にすれば、タブバーがブックマークツールバーの下になります。
userChromeJS.multiTabRows@Merci.chao.maxTabRowsで表示可能な最大段数を変更できます。
B.userChrome.css
「userChrome.css」の値を変更することで、タブの高さやタブ間の間隔などを調整することができます。
他にも、今まで「userChrome.css」で設定していたものがあれば記載します。
私はタブにカーソルを合わせたとき（ホバー）にタブを閉じるボタンが表示されるように以下を「userChrome.css」に追加しました。
.tabbrowser-tab:not([pinned]) .tab-close-button {
display: none !important
}
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
display: inline-flex !important
}これで、多段タブが快適に使えるようになると思います。
Merci-chaoさんに感謝感謝です。
コメント