ChatGPT (PCブラウザ版) では、チャットを開始すると自動でチャットタイトルが付けられ、それがサイドバーに表示されると思います。
これは後日参照するには便利ですが、急に背後から上司に話しかけられたときや、あるいはオンライン会議で画面共有中に意図せず、AI に質問した履歴を他人に見られてしまう恐れがあり、気になるという人もいると思います。
一応このチャットタイトルは後から編集できますが、万一に備えて毎回編集するのも面倒です。チャットタイトルの付け方を ChatGPT に指示することも現状できません。
そこで、チャットタイトルを常にダミータイトルで覆い隠し、オンマウスで覆いを剥がす (正確には覆いを透明にする) CSS を書きました。
下図のように、「無題のチャット」と表示され、オンマウスで元のタイトルがみえます。
CSS
お手元のブラウザに独自 CSS を追加できる拡張機能 (Stylus や Stylebot 等) をインストールし、chatgpt.com 以下のサイトに下記 CSS を指定する必要があります。
やっていることは CSS の上書きなので、chatgpt.com の HTML・CSS が更新されたら破綻し得ます。その場合は改めてチャットタイトルを選択するセレクタを特定して #history a[href^='/c/'] の箇所を置き換えるとか、新しい CSS 変数名を特定して var(--xxx) の箇所を置き換えるとかしてください。
チャットタイトルを覆い隠す CSS は以下です。各定義の意図はコメントに書いた通りです。
ダミータイトルは変更できます (何も表示しない場合でも空文字列は指定ください)。
#history a[href^='/c/']::before {
/* サイドバー内の各チャットへのリンクを覆う疑似要素を作成 */
position: absolute; /* ※ 実要素は既に position: relative */
width: calc(100% - 3 * var(--spacing)); /* 実要素と同じ幅にする */
background: var(--sidebar-surface-primary); /* サイドバー背景色 */
content: '無題のチャット'; /* ダミータイトル */
}
#history a[href^='/c/'][data-active]::before {
/* アクティブなチャットタイトルは背景色が異なるので別途指定 */
background: var(--menu-item-active);
}
#history a[href^='/c/']:hover::before {
/* オンマウスで疑似要素を透明にする */
opacity: 0;
}
参考
私はこちらの記事の CSS で既に ChatGPT を好きな配色にカスタマイズしていましたが、その場合でもサイドバーの配色を CSS 変数 --sidebar-surface-primary と --menu-item-active を通して変更していればこの記事の CSS と併用できます (以下)。
