広告を利用しています

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

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

2022年12月17日Google

Google翻訳のアイコン

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

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

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

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

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

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

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

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

そこで「Stylus」を利用します。ウェブサイトにCSSを適用できるChrome拡張機能・アドオンです。

インストール方法

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」ブラウザのブラウザーマネージャーサイドバーについては下記記事を参考にしてみてください。

2022年12月17日Google

Posted by ナポリタン寿司