【ChatGPT】左側サイドバーをマウスホバー以外は折りたたむCSS

2025年8月4日Stylebot&Stylus(CSS)

この記事では、PCウェブサイト版「ChatGPT」の左側サイドバー（チャット履歴）にマウスを置いていない時は任意の横幅に縮めるCSSを書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebotスタイルボット」や「Stylusスタイラス」を利用します。

PC版「ChatGPT」の左側サイドバーをCSSを使ってマウスホバーで自動展開・収納したGIF画像

先に完成イメージを見たほうが早いと思います。本記事のCSSを導入すると上記GIF画像のようにできます。マウスを置いた時は元通り表示して、それ以外の時は任意の横幅に狭めています。

これにより見た目がスッキリしてより本文（やりとり）に集中できる…かもしれません。気分ですね。

通常、PCウェブサイト版「ChatGPT」は以下画像のように左側サイドバーがずっと展開したままです。サイドバー内右上の展開ボタンを押すことでミニモードにできますが、再び展開するには再度押す必要があります。

普段からどちらかのモードしか使わない方は別にそれでもいいと思いますが、僕みたいな普段は隠しておいていざという時はすぐにタイトル名を確認して切り替えたい方にはちょっとクリックが手間です。

CSSは自身の環境上（見た目上）だけの変更で他人には一切影響しません。あくまで自分のPC上だけの変化です。いつでもオンオフできます。

拡張機能を導入できるPCブラウザ向けでスマホやタブレットのアプリ版ではできません。

【PR】OpenAI o1搭載のSEOライティングツール「トランスコープ」

1. 前提
2. 「ChatGPT」の左側サイドバーをマウスホバーで自動展開・収納するCSS
3. 感想

前提

「Stylebot」や「Stylus」などのCSSを適用できる拡張機能を既に導入している前提です。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

「ChatGPT」の左側サイドバーをマウスホバーで自動展開・収納するCSS

スタイルシートを開く

「ChatGPT」にアクセスして適当に会話ページを開きます。

インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。

もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。

CSSを書き込む

以下のコードを書き込みます。

CSS

/*左側サイドバーをマウスホバー時以外は任意の横幅に収納する*/
body:not(:has(div>[role="menu"])) div#stage-slideover-sidebar:not(:has(#history a[class*="menu-item"] input)) {
    max-width: var(--sidebar-width) !important;
    transition: max-width 0.5s !important;

    &:not(:hover) {
        max-width: 45px !important;
    }
}

/*左側サイドバーをマウスホバー時以外は任意の横幅に収納する*/
body:not(:has(div>[role="menu"])) div#stage-slideover-sidebar:not(:has(#history a[class*="menu-item"] input)) {
    max-width: var(--sidebar-width) !important;
    transition: max-width 0.5s !important;

    &:not(:hover) {
        max-width: 45px !important;
    }
}