ホーム>Stylebot&Stylus(CSS)>Google広告を利用しています当サイトは広告を掲載しています。GoogleTwitterPocketCopyこの記事では、「Google翻訳」をVivaldiやFloorpブラウザのサイドバーに最適化させるCSSについて書きます。ダークモードにしたり不要な要素を非表示にします。ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能・Firefoxアドオン「Stylusスタイラス」を利用します。本記事で紹介するCSSを使えば、「Google翻訳」の不要な部分を削除したり、強制的にダークモードにできます。僕は「Vivaldiヴィヴァルディ」や「Floorpフロープ」ブラウザのサイドバーにGoogle翻訳を登録しています。サイドバーは通常のタブで開いた時よりも不要なコンテンツが目立ってしまいます。僕の場合、ヘッダーやテキスト、ウェブサイトなどのボタンが不要です。ここの部分を削除してもう少しサイドバー内で広々と翻訳したいと思いました。Reader」を使ってウェブサイトを強制的に黒くしています。サイドバーには本拡張機能が動作しません。普段ダークモードで使っているGoogle翻訳が、サイドバーだと通常のライトモードなので眩しく感じました。そこで「Stylus」を利用します。ウェブサイトにCSSを適用できるChrome拡張機能・アドオンです。感想インストール方法Chromeブラウザの場合はChromeウェブストアからインストールできます。...https://chromewebstore.google.com/detail/stylus/clngdbkpkpee...Firefox(Floorp)をお使いの場合Firefoxアドオンストアからインストールできます。お気に入りのWebサイトをStylusでデザインしましょう。...https://addons.mozilla.org/ja/firefox/addon/styl-us/「Firefoxへ追加」をクリックします。「追加」をクリックします。詳しい使い方については下記記事を参考にしてみてください。【Vivaldi】ウェブパネルにCSSを適用する方法。「Google翻訳」を開きます。サイドバーではなく通常のタブで開きます。今回はFirefoxベースのブラウザ「Floorp」で試してみます。開いたらインストールした「Stylus」アイコンをクリック→「translate.google.co.jp」をクリックします。新しいタブでスタイルシートが表示されます。ここにコードを書いていきます。今回僕が使ったコードは以下になります。ヘッダー周辺を排除して背景をダークモードにするCSSです。!important;}/*色を反転させる。!important;}書き込めたら左側の「保存」をクリックします。「Google翻訳」ページに戻ります。「Stylus」アイコンをクリックして「translate.google.co.jp」にチェックが入っていることを確認します。入っている間は有効になっているということです。Vivaldiブラウザの場合、ウェブパネルに登録したGoogle翻訳をリロードします。これでCSSが反映されます。「Floorp」ブラウザにはデフォルトで「Google翻訳」が登録されています。そのままだと反映されません。一度デフォルトで登録されている「Google翻訳」を削除します。パネルアイコンを右クリック→「このパネルをサイドバーから削除」から消せます。削除したらタブのGoogle翻訳に戻ります。上記CSSを適用している間はダークモードになっていると思います。この状態で空いているところを右クリック→「このページをウェブパネルに追加」をクリックします。「変更を保存」をクリックします。これでCSSが適用された状態のGoogle翻訳がブラウザーマネージャーサイドバーに登録されます。ヘッダーが削除されて背景が指定した色になります。以上、「Google翻訳」をウェブパネル用にCSSでカスタマイズする方法でした。目に優しい状態になり良きです。「Floorp」ブラウザのブラウザーマネージャーサイドバーについては下記記事を参考にしてみてください。