当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【Google翻訳】VivaldiやFloorpのサイドバーに最適化するCSS

Google

Google翻訳のアイコン

この記事では、「Google翻訳」をVivaldiFloorpブラウザのサイドバーに最適化させるCSSについて書きます。ダークモードにしたり、不要な要素を非表示にします。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能・Firefoxアドオン「Stylus(スタイラス)」を利用します。

【Google翻訳】VivaldiやFloorpのサイドバーに最適化するCSS

本記事で紹介するCSSを使えば、「Google翻訳」の不要な部分を削除したり、強制的にダークモードにできます。

僕は、「Vivald(ヴィヴァルディ)」や「Floorp(フロープ)」ブラウザのサイドバーに、Google翻訳を登録しています。

サイドバーは、通常のタブで開いた時よりも、不要なコンテンツが目立ってしまいます。僕の場合、ヘッダーや、「テキスト」、「ウェブサイト」などのボタンが不要です。ここの部分を削除して、もう少しサイドバー内で広々と翻訳したいと思いました。

Floorpのブラウザーマネージャーサイドバーに登録したGoogle翻訳画像

基本的にChrome拡張機能・Firefoxアドオン「Dark Reader」を使って、ウェブサイトを強制的に黒くしています。しかし、サイドバーには本拡張機能が動作しません。普段ダークモードで使っているGoogle翻訳が、サイドバーだと通常のライトモードなので、眩しく感じました。

そこで、「Stylus」を利用します。ウェブサイトにCSSを適用できるChrome拡張機能・アドオンです。似たような拡張機能で「Stylebot(スタイルボット)」がありますが、そちらはウェブパネルに反映されません。「Stylus」は、通常のタブ内だけでなく、サイドバーに登録したパネルにも、CSSが反映されます。

インストール方法

Chromeブラウザの場合は、Chromeウェブストアからインストールできます。

Firefox(Floorp)をお使いの場合

詳しい使い方については、下記記事を参考にしてみてください。

Google翻訳をサイドバー用にカスタマイズする手順

CSSの紹介

Google翻訳」を開きます。サイドバーではなく、通常のタブで開きます。今回は、Firefoxベースのブラウザ「Floorp」で試してみます。

開いたら、インストールした「Stylus」アイコンをクリック→「translate.google.co.jp」をクリックします。

「Stylus(スタイラス)」にCSSを書き込む手順画像1

新しいタブでスタイルシートが表示されます。ここにコードを書いていきます。

「Stylus(スタイラス)」にCSSを書き込む手順画像2

今回、僕が使ったコードは、以下になります。ヘッダー周辺を排除して、背景をダークモードにするCSSです。

/*ヘッダー削除*/
#gb {
  display: none !important;
}

.VjFXz {
  display: none !important;
}

/*ヘッダー下にある「テキスト」、「ドキュメント」、「ウェブサイト」など削除*/
.hgbeOc.EjH7wc {
  display: none !important;
}



/*色を反転させる。(白→黒)*/
body {
  filter: invert(1) hue-rotate(180deg) !important;
}

/*翻訳結果の背景色*/
.QcsUad.BDJ8fb:not(.Jj6Lae) {
  background: #bdcee3 !important;
}

書き込めたら、左側の「保存」をクリックします。

「Stylus(スタイラス)」に書きこんだCSSを保存する手順画像

「Google翻訳」ページに戻ります。「Stylus」アイコンをクリックして、「translate.google.co.jp」にチェックが入っていることを確認します。入っている間は、有効になっているということです。

「Stylus(スタイラス)」のCSSを有効にする手順画像

Vivaldiブラウザの場合、ウェブパネルに登録したGoogle翻訳をリロードします。これで、CSSが反映されます。

Floorpのサイドバーに反映させる方法

「Floorp」ブラウザには、デフォルトで「Google翻訳」が登録されています。

しかし、そのままだと反映されません。一度、デフォルトで登録されている「Google翻訳」を削除します。パネルアイコンを右クリック→「このパネルをサイドバーから削除」から消せます。

「Floorp」ブラウザのサイドバーから、デフォルトのGoogle翻訳を削除する手順画像

削除したら、タブのGoogle翻訳に戻ります。上記CSSを適用している間は、ダークモードになっていると思います。この状態で、空いているところを右クリック→「このページをウェブパネルに追加」をクリックします。

CSSでカスタマイズしたGoogle翻訳を、サイドバーに登録する手順画像1

「変更を保存」をクリックします。

CSSでカスタマイズしたGoogle翻訳を、サイドバーに登録する手順画像2

これで、CSSが適用された状態のGoogle翻訳が、ブラウザーマネージャーサイドバーに登録されます。ヘッダーが削除されて、背景が指定した色になります。

CSSでカスタマイズしたGoogle翻訳を、サイドバーに登録した画像

感想

以上、「Google翻訳」をウェブパネル用にCSSでカスタマイズする方法でした。

目に優しい状態になり、良きです。

「Floorp」ブラウザのブラウザーマネージャーサイドバーについては、下記記事を参考にしてみてください。

Google