2020-05-21

Firefox76でブックマークサイドバーをマウスオーバーで表示する


2020-08-01 追記
79.0でも動作しています。
2020-09-03 追記
80.1でも動作しています。
2021-02-11 追記
85.0でも動作しています。
2022-11-19 追記
107.0では動きません。
2022-12-18追記
コメントの通り修正し、108.0で動きました。ありがとうございました。
#sidebar-box,#sidebar-box:hover内のleft:の行をコメントアウト
開閉にアニメーションが欲しい方は下記サイトのやり方が良いと思います。
Firefox 100におけるサイドバー自動開閉
https://zilfah-s.net/software/firefox-sidebar

アドオンは無くなっているが、userChrome.cssというので実現可能らしいのでやってみる

userChrome.cssの有効化
こちらを参考に
Firefox 69 以降でも userChrome.css を使う方法
https://at.sachi-web.com/firefox69_userchrome_css.html

アドレスバーに「about:config」
検索欄に「toolkit.legacyUserProfileCustomizations.stylesheets」
切り替えボタンで「true」に

userChrome.cssの配置
こちらを参考に
Firefox Quantum 以降でも userChrome.js を使う
https://qiita.com/yokra9/items/7e5af03b81423bddbe4e
userChrome.cssだけをリンクを右クリック→「名前を付けてリンク先を保存」で取得
アドレスバーに「about:profiles」
「ルートディレクトリ」を開く
「chrome」ディレクトリを作成
userChrome.cssを配置

動作の確認
こちらを参考に
Firefox userChrome.cssのコードまとめ
https://www.bugbugnow.net/2018/04/firefox-userchromecss.html
userChrome.cssに下のコードを追記
* {
  color: red;
}

Firefox再起動
ツールバー等の文字色が赤くなっていたらOK
上のコードを削除しておく

userChrome.cssに追記して実装(左側に)
こちらを参考に
Firefox 64のmy設定【userChrome.cssその2】
https://10prs.com/view/7
FireFoxを72.0.1更新 サイドバー(自動開閉)が開かない
https://oshiete.goo.ne.jp/qa/11438606.html

/************** サイドバー自動開閉 */
/* マウスオーバーする部分 幅5px 表示ディレイを追加 */
#sidebar-box {
    position: relative !important;
    overflow-x: hidden !important;
    margin-right: -5px !important;
    /* left: 5px !important; */
    min-width: 5px !important;
    max-width: 5px !important;
    box-shadow: 0 0 2px 0 rgba(0,0,0,.35);
    z-index: 1;
    transition-delay: 0.1s;
}

/* 表示されるサイドバー 幅350px */
#sidebar-box:hover {
    margin-right: -350px !important;
    /* left: 350px !important; */
    min-width: 350px !important;
    max-width: 350px !important;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.35);
}

/* いらない?
#sidebar {
    opacity: 0 !important;
}

#sidebar:hover {
    opacity: 1 !important;
}
*/

/* サイドバーのヘッダー部分を非表示に */
#sidebar-header {
    display: none !important;
}


Firefoxを再起動する

ブックマークサイドバーを表示する
こちらを参考に
Firefox のサイドバーを使用して、ブックマークや履歴、ソーシャル機能にアクセスする
https://support.mozilla.org/ja/kb/use-firefox-sidebar-access-bookmarks-history-synced
私はツールバーの左端に置いてON/OFFしやすいようにしています

サイドバーを右にする場合
cssをリネームするか、上のコードをコメントアウトしてFirefoxを再起動
こちらを参考にサイドバーを右側に
Firefoxのブックマーク・サイドバーを右側に移動させる方法
http://blog.livedoor.jp/blackcode/archives/2073315.html
cssはこちらを参考に、上のコードのleftとrightを入れ替え
Firefox 64のmy設定【userChrome.cssその2】
https://10prs.com/view/7

おまけ
コードの表示はこちらを参考にしました
ブログにソースコードをきれいに載せる方法(Google Code Prettify)
https://www.apnari.com/entry/SourceCodeSyntaxHighlight

2 件のコメント:

  1. >107.0では動きません。
    #sidebar-boxと#sidebar-box:hoverのleftを消したら以前と同じ感覚で使えました

    返信削除
  2. ありがとうございます。コード変更しました。

    返信削除