Firefoxで「タブを多段にする」「ブックマークツールバーを多段にする」ためのCSS

この記事は、以下の参考サイトからの引用で成り立っています。
FirefoxのuserChrome.css備忘録 | 出不精の横好き
【小技】Firefox Quantumで「Tab Mix Plus」の機能を再現する| おこづかいサイト攻略ブログ - おこづかいBeeDASH!
CSSで多段ブックマークツールバー - お豆腐

●以下のパスに「フォルダー|Chrome」「ファイル|「userChrome.css」を新規に作成します。

●「¥f7prlba9.default-1518685768062」という部分は、それぞれのユーザーによって違います。

C:\Users\kin213\AppData\Roaming\Mozilla\Firefox\Profiles\f7prlba9.default-1518685768062\

結果として、下記のようなパスになります。

C:\Users\kin213\AppData\Roaming\Mozilla\Firefox\Profiles\f7prlba9.default-1518685768062\Chrome\userChrome.css

「userChrome.css」の中に、以下の文字列をコピー&ペーストします。

/* 
<i class="fi-web"></i><a href="http://bee-dash.com/blog-entry-15009.html" rel="nofollow" target="_blank">【小技】Firefox Quantumで「Tab Mix Plus」の機能を再現する| おこづかいサイト攻略ブログ - おこづかいBeeDASH!</a><br>
*/

#titlebar-buttonbox {
    display: block !important;
    vertical-align: top !important;
}
.tabbrowser-arrowscrollbox scrollbox {
    overflow: visible !important;
}
.tabbrowser-arrowscrollbox scrollbox > box {
    display: block !important;
}
.tabbrowser-tab:not([pinned]) {
    min-height: 30px !important;
    max-height: 30px !important;
}
.tabbrowser-tabs .tabbrowser-tab {
    vertical-align: top !important;
    -moz-box-sizing: border-box !important;
    min-height: 30px !important;
    max-height: 30px !important;
}
.tabs-newtab-button {
    vertical-align: bottom !important;
    height: 30px !important;
}
#tabbrowser-tabs tab {
    min-width: 100px !important;
}


/* 
<i class="fi-web"></i><a href="http://tofukko.blog113.fc2.com/blog-entry-407.html" rel="nofollow" target="_blank">CSSで多段ブックマークツールバー - お豆腐</a><br>
*/


#PersonalToolbar {
  max-height: none !important;
}
#PlacesToolbarItems {
  overflow: visible !important;
  display: block !important;
}
#PlacesToolbarItems > .scrollbox-innerbox {
  display: block !important;
  overflow-y: auto !important;
  max-height: 72px !important;
}
#PlacesToolbarItems > .bookmark-item {
  padding: 2px 3px !important;
}
#PlacesChevron {
  display: none !important;
}

Firefox/Chromeのアドオン|Shortkeys 登録例

Shortkeysは、Firefox/Chromeのうえで、ブラウザ上でショートカットキーによって、各種の操作できるようにするためのアドオンです。

私の場合、ブックマークレット(中身はJavaScript)をショートカットキーによって実行するためのアドオンとして使っています。

ブログ執筆に、かなり便利です。

Shortkeysにそのままインポートできる|適宜改変してください

[{"action":"javascript","blacklist":false,"code":"javascript:prompt('HTML link','<span class=\"icon-google3\"></span><a href=\"'+location.href+'\" rel=\"nofollow\" target=\"_blank\">'+document.title+'</a><br>')();","customName":"google3","exported":true,"key":"ctrl+shift+alt+1","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]},{"action":"javascript","blacklist":false,"code":"javascript:prompt('HTML link','<span class=\"icon-youtube2\"></span><a href=\"'+location.href+'\" rel=\"nofollow\" target=\"_blank\">'+document.title+'</a><br>')();","customName":"youtube2","exported":true,"key":"ctrl+shift+alt+2","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]},{"action":"javascript","blacklist":false,"code":"javascript:prompt('HTML link','<span class=\"icon-amazon\"></span><a href=\"'+location.href+'\" rel=\"nofollow\" target=\"_blank\">'+document.title+'</a><br>')();","customName":"amazon","exported":true,"key":"ctrl+shift+alt+3","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]},{"action":"javascript","blacklist":false,"code":"javascript:window.open('https://yomereba.com/blogparts/?&url='+encodeURI(document.location.href));undefined;\n\n\n\n\n\n","customName":"ヨメレバ","exported":true,"key":"ctrl+shift+alt+0","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]},{"action":"javascript","blacklist":false,"code":"javascript:var pi = document.getElementsByTagName('meta');var itemcode;for(i=0;i<pi.length;i++){if(pi[i].getAttribute('property')=='apprakuten:item_code'){itemcode = pi[i].getAttribute('content');break;}}window.open('https://kaereba.com/blogparts/?&url='+encodeURI(document.location.href)+'&itemcode='+itemcode+'&title'+document.title);undefined;\n","customName":"カエレバ","exported":true,"key":"ctrl+shift+alt+9","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]},{"action":"javascript","blacklist":false,"code":"javascript:(function(){var a=document.getElementsByName(\"ASIN.0\")[0]?document.getElementsByName(\"ASIN.0\")[0].value:document.getElementsByName(\"ASIN\")[0]?document.getElementsByName(\"ASIN\")[0].value:\"ASIN\\u304c\\u898b\\u3064\\u304b\\u308a\\u307e\\u305b\\u3093\\u3067\\u3057\\u305f\";location.href=\"https://www.amazon.co.jp/dp/\"+a})();","customName":"Amazon単純化","exported":true,"key":"ctrl+shift+alt+8","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]},{"action":"javascript","blacklist":false,"code":"javascript:(window.open('https://www.yahoo.co.jp/', '_blank');)();\n","customName":"Amazon 新刊","exported":true,"key":"ctrl+shift+alt+4","matchurl":"javascript:(window.open('https://www.yahoo.co.jp/', '_blank');)();","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]},{"action":"gototab","blacklist":false,"customName":"学参ドットコム 新刊","exported":true,"key":"shift+ctrl+alt+f","matchurl":"https://www.gakusan.com/home/newbook.php","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]},{"action":"javascript","blacklist":false,"code":"javascript:prompt('HTML link','<a href=\"'+location.href+'\" rel=\"nofollow\" target=\"_blank\">'+document.title+'</a>')();","customName":"リンク","exported":true,"key":"ctrl+shift+alt+5","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]}]

Firefox Quantum

Firefox をダウンロード — 無料ウェブブラウザー

これまでベータ版を使っていて、メニュー表示が英語だったのが、正式版で日本語化されました。ブックマーク、アドオンその他は、ベータ版から正式版へ、そのまま引き継がれました。

新型Firefoxのベータ版

Try New Browser Features in Pre-Release Versions | Firefox

ベータ版の新Firefox(Firefox Quantum)に乗り換えました

Firefox 57(Firefox Quantum)以降にも対応したアドオンのうち、私が導入したアドオンの一覧を載せます。

ポイントは2点のみです。

(1)ShortcutKey2URLが使えなくなったので、Shortkeysに切り替えた。 ShortkeysのJavaScriptの入力欄は、ブックマークレットを受け付けなかったので、サイトを引用するJavaScriptを拾ってきてShortkeysに入力して事なきを得た。

(2)Xmarksが使えなくなった(2017年10月時点)ので、Firefox Syncを利用して事なきを得た。 2017年9月の終わりあたりからXmarksに「同期できない」という不具合があり、その期間がかなり長かった点から、「Xmarksは信用ならず」という結論に至り、Firefox Syncに移行した。 Firefoxは、Windows、macOS、Linux、iOS、Androidという、主要なOSで使えるので、Firefoxにしておけば、Firefox Syncを介することで、互いにブックマークが同期できる。

Quantum feels right at home with today’s mouse and touch-driven operating systems: Windows 10, macOS High Sierra, Android Oreo, and iOS 11.

引用元: Start Your Engines – Firefox Quantum Lands in Beta, Developer Edition - The Mozilla Blog

iOS/Android 向けモバイルブラウザー | Firefox

Adblock Plus

https://addons.mozilla.org/ja/firefox/addon/adblock-plus/

https://addons.mozilla.org/en-US/firefox/addon/cookie-autodelete/

https://addons.mozilla.org/ja/firefox/addon/copy-all-links/

Copy PlainText

https://addons.mozilla.org/en-US/firefox/addon/copy-plaintext/

Disconnect

https://addons.mozilla.org/en-US/firefox/addon/disconnect/

Google Translator for Firefox

https://addons.mozilla.org/ja/firefox/addon/google-translator-for-firefox/

History Cleaner

https://addons.mozilla.org/en-US/firefox/addon/history-cleaner/

Minimize Window Button

https://addons.mozilla.org/ja/firefox/addon/minimize-the-window/

Scroll To Top

https://addons.mozilla.org/en-US/firefox/addon/scroll-to-top/

Shortkeys

https://addons.mozilla.org/ja/firefox/addon/shortkeys/

[{"action":"javascript","blacklist":false,"code":"javascript:prompt('HTML link','<span class=\"icon-google3\"></span><a href=\"'+location.href+'\" rel=\"nofollow\" target=\"_blank\">'+document.title+'</a><br>')();","customName":"google3","exported":true,"key":"ctrl+shift+alt+1","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]},{"action":"javascript","blacklist":false,"code":"javascript:prompt('HTML link','<span class=\"icon-youtube2\"></span><a href=\"'+location.href+'\" rel=\"nofollow\" target=\"_blank\">'+document.title+'</a><br>')();","customName":"youtube2","exported":true,"key":"ctrl+shift+alt+2","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]},{"action":"javascript","blacklist":false,"code":"javascript:prompt('HTML link','<span class=\"icon-amazon\"></span><a href=\"'+location.href+'\" rel=\"nofollow\" target=\"_blank\">'+document.title+'</a><br>')();","customName":"amazon","exported":true,"key":"ctrl+shift+alt+3","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]},{"action":"javascript","blacklist":false,"code":"javascript:window.open('https://yomereba.com/blogparts/?&url='+encodeURI(document.location.href));undefined;\n\n\n\n\n\n","customName":"ヨメレバ","exported":true,"key":"ctrl+shift+alt+0","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]},{"action":"javascript","blacklist":false,"code":"javascript:var pi = document.getElementsByTagName('meta');var itemcode;for(i=0;i<pi.length;i++){if(pi[i].getAttribute('property')=='apprakuten:item_code'){itemcode = pi[i].getAttribute('content');break;}}window.open('https://kaereba.com/blogparts/?&url='+encodeURI(document.location.href)+'&itemcode='+itemcode+'&title'+document.title);undefined;\n","customName":"カエレバ","exported":true,"key":"ctrl+shift+alt+9","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]},{"action":"javascript","blacklist":false,"code":"javascript:(function(){var a=document.getElementsByName(\"ASIN.0\")[0]?document.getElementsByName(\"ASIN.0\")[0].value:document.getElementsByName(\"ASIN\")[0]?document.getElementsByName(\"ASIN\")[0].value:\"ASIN\\u304c\\u898b\\u3064\\u304b\\u308a\\u307e\\u305b\\u3093\\u3067\\u3057\\u305f\";location.href=\"https://www.amazon.co.jp/dp/\"+a})();","customName":"Amazon単純化","exported":true,"key":"ctrl+shift+alt+8","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]},{"action":"javascript","blacklist":false,"code":"javascript:(window.open('https://www.yahoo.co.jp/', '_blank');)();\n","customName":"Amazon 新刊","exported":true,"key":"ctrl+shift+alt+4","matchurl":"javascript:(window.open('https://www.yahoo.co.jp/', '_blank');)();","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]},{"action":"gototab","blacklist":false,"customName":"学参ドットコム 新刊","exported":true,"key":"shift+ctrl+alt+f","matchurl":"https://www.gakusan.com/home/newbook.php","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]},{"action":"javascript","blacklist":false,"code":"javascript:prompt('HTML link','<a href=\"'+location.href+'\" rel=\"nofollow\" target=\"_blank\">'+document.title+'</a>')();","customName":"リンク","exported":true,"key":"ctrl+shift+alt+5","open":false,"sites":"*mail.google.com*","sitesArray":["*mail.google.com*"]}]

URL として開く

https://addons.mozilla.org/ja/firefox/addon/open-as-url/

URL をクリップボードにコピー

https://addons.mozilla.org/ja/firefox/addon/url2clipboard/

完全なWebページのスクリーンショット|FireShot

https://addons.mozilla.org/ja/firefox/addon/fireshot/

https://addons.mozilla.org/ja/firefox/addon/text-link/

「旧式」と表示されたアドオンが使えなくなる

Chromeは、いちいちトラッキングをしてくるので、Windows 7(Let’s note CF-B10)とWindows 8.1(EPSON Endeavor スリム型デスクトップPC)でFirefoxをずっと使ってきました。

2017年の11月14日に、新型Firefox、つまり、Firefox 57(Firefox Quantum)の正式版がリリースされました。

Firefox Quantumでは、「旧式」と表示されたアドオンが使えなくなるようです。

注記: 2017 年 11 月にリリースされる予定の Firefox 57 からは、新しい技術によって作られたアドオンのみが動作するようになります。

引用元: Firefox アドオン技術の現代化 | Firefox ヘルプ

2017-09-30あたりから、Firefoxで使っているXmarks(ブックマークを端末間で同期させる)が同期しなくなってしまいました。

これはとても不便です。

Firefoxの側でXmarksが使えなくなる「何か」が行われているらしく、従来の「xmarks何チャラ」という名称の付いた3つのファイルを消すワザも使えなくなってしまいました。

同期不能状態が、どうやっても直りません。

以前からアカウントだけは取っていたFirefox Syncを利用することで、Xmarksを利用しなくて済むようになりました。 Firefox Syncとは、Firefoxの環境等を、異なる端末のFirefox間で同期させる仕組みです。 今のところ、これを使うしかないようです。

私がXmarksを使うようになったのは、 それまで使っていたPocketがFirefoxに取り込まれてから、Pocketが不具合になってしまったからです。 その「Pocketの不具合」とは、「ことあるごとにいちいちログインを要求してくる」という不具合でした。 解決策があったようです。
PocketのブックマークレットでLoginを要求される様になった時の対処法

結局、新Firefoxに合わせて、すべてのアドオンを他のアドオンで代替(だいたい)する必要がある。 そういう状況に追い込まれたようです。

Windows 7(Let’s note CF-B10)で、ベータ版の新Firefoxを導入しました。

その中で実験しながら、新Firefoxにおける「代替アドオン」を探していく、というのがこの記事の目的です。

広告ブロック

Adblock Plus(旧式)

https://addons.mozilla.org/ja/firefox/addon/adblock-plus/

µBlock Origin(Adblock Plus代替)

https://addons.mozilla.org/ja/firefox/addon/ublock-origin/

Page Top / Page Bottom(↑↓)

Back to Top(旧式)

https://addons.mozilla.org/ja/firefox/addon/back-to-top/

Scroll To Top(Back to Top代替)

https://addons.mozilla.org/ja/firefox/addon/scroll-to-top/

URLへのジャンプ|JavaScript(ブックマークレットの内容)の実行

FirefoxのShortkeysというアドオンがShortcutKey2URLの代替になる。

ShortcutKey2URL(旧式)

このアドオンが新Firefoxでは使えない。

https://addons.mozilla.org/ja/firefox/addon/shortcutkey2url/

検証した結果、Shortkeysは、ショートカットキーを使って「特定のURLにジャンプする」「JavaScriptを実行する」ということが可能であることが判明した。

私がShortcutKey2URLを使う方法は、この「特定のURLにジャンプする」「JavaScriptを実行する」という2つだけなので、私の場合、ShortcutKey2URLを、Shortkeysで置換することによって、目的を果たすことが可能らしい。

Shortkeys|Scroll To Top(ShortcutKey2URL代替)

https://addons.mozilla.org/ja/firefox/addon/shortkeys-custom-shortcuts/

特定のページで、「ページタイトル」と「URL」を取得して、リンクを張るためのHTMLコードを生成するためのJavaScriptは下記のようになります。

Shortkeysに、任意の「Keyboard Shortcut」、「Label as」を入力し、「Behavior」を「Run JavaScript」にして、「JavaScript code to run」の空欄に、下記を(適宜改変して)コピペすれば大丈夫です。

Shortkeysの設定ページで、「Save」かつ「F5でリロード(Shortkeysの設定ページも、このJavaScriptを適用するタブも、両方ともだとリロード必須だと思う)」することによって、いま入力した内容が有効になります。 面倒だったら、いったんFirefoxのWindowを閉じて、新しいWindowでFirefoxを立ち上げるのがよい。

javascript:prompt('HTML link','<i class="fi-web"></i><a href="'+location.href+'" rel="nofollow" target="_blank">'+document.title+'</a><br>')();

javascript:prompt('HTML link','<i class="fi-social-youtube"></i><a href="'+location.href+'" rel="nofollow" target="_blank">'+document.title+'</a><br>')();

javascript:prompt('HTML link','<i class="fi-social-amazon"></i><a href="'+location.href+'" rel="nofollow" target="_blank">'+document.title+'</a><br>')();
 
comments powered by Disqus