【ChatGPT】チャット入力欄の音声入力、音声モードを非表示にするCSS

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

この記事では、PCウェブサイト版「ChatGPT」のチャット入力欄内にある音声入力ボタンと音声モード切り替えボタンを非表示にするCSSを書きます。

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

PCウェブサイト版「ChatGPT」を開くと、チャット入力欄内右下に音声入力ボタン（話して文字に起こして送信する機能）と音声モード切り替えボタン（ChatGPTと電話しているかのように音でやりとりするモード）があります。

僕はPC版のほうはどちらも利用していません。

たまにうっかり誤操作で押しちゃって「あぁもうっ！」ってなることがあるのでむしろストレスです。

CSSを使うことで非表示にできます。自身の環境上（見た目上）だけの変更なので誰かに影響して迷惑をかけることはないです。いつでもオンオフできます。

拡張機能を導入できる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

/*チャット入力欄の音声入力ボタン*/
span:has(>button[aria-label="音声入力ボタン"]) {
    display: none !important;
}

/*チャット入力欄の音声モードを開始するボタン*/
span:has(>button[data-testid="composer-speech-button"]) {
    display: none !important;
}

/*チャット入力欄の音声入力ボタン*/
span:has(>button[aria-label="音声入力ボタン"]) {
    display: none !important;
}

/*チャット入力欄の音声モードを開始するボタン*/
span:has(>button[data-testid="composer-speech-button"]) {
    display: none !important;
}