【Vivaldi】Google翻訳の拡張機能ボタンを大きくするCSS

2021年12月10日カスタムCSS

Vivaldi のアイコン

この記事では、Vivaldi のオリジナルカスタムUI機能を使って、Google翻訳の拡張機能ボタンを拡大するCSSについて書きます。

見栄えは少し不細工ですが、押しやすくなります。

Google翻訳ボタンを拡大するCSSを適用した画像

Google翻訳の拡張機能ボタンを拡大するCSS です。具体的にはアイコンを3倍に拡大して、押しやすい場所に配置するようにしています。

Google翻訳は、Vivaldi の翻訳機能と違って、ページ翻訳が優れています。

しかし、現状ページ翻訳しようと思ったら、拡張機能ボタンをクリック → このページを翻訳 をクリックしないといけません。そこまで手間ではないんですが、いかんせんボタンが小さいです。

隣にある拡張機能を間違えて押したりします。

本記事で紹介するCSS を使うことで、Google翻訳のボタンだけ押しやすい場所に移動して、なおかつ自由に拡大できます。以前よりも格段に押しやすくなります。

Vivaldi のページ翻訳が頼りないから、Google翻訳のページ翻訳を使っている方、ぜひ試してみてください。

Vivaldi翻訳がなぜダメなのかは以下の記事に書いています。

参考:【Vivaldi】翻訳のメリット・デメリット。Google翻訳と併用がおすすめ | ナポリタン寿司のPC日記

本音を言うと右クリックメニューに組み込めるのが一番なんですけどね。その点、Floorp (ブラウザ)ではデフォルトで右クリックメニューに組み込まれているのですごいです。

参考:【Floorp】Firefoxベース&大幅進化して帰ってきた!早速使ってみた感想 | ナポリタン寿司のPC日記

オリジナルカスタムUI(CSS)を使うには?

この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。

有効にしていないという方は、以下の記事を参考にしてみてください。

CSS

CSS は以下になっています。

/*Google翻訳ボタンを拡大*/
.button-toolbar.aapbdbdomjkkjkaonfhkkikfgjllcleb.ExtensionIcon.extensionId {
  position: relative;
  left: 80px;
  top: 44px;
  transform: scale(3, 3);
}

/*----任意で使ってください----*/
/*拡張機能アイコンホバー時の背景*/
.color-behind-tabs-off .toolbar-mainbar>.button-toolbar>button:hover, .color-behind-tabs-off .toolbar-mainbar>.toolbar-group>.button-toolbar>button:hover, .color-behind-tabs-off .toolbar-mainbar>.button-toolbar>button:active, .color-behind-tabs-off .toolbar-mainbar>.toolbar-group>.button-toolbar>button:active {
  background: rgba(0, 0, 0, 0.1) !important;
}

上記のCSS を、エディタ(Visual Studio Code やメモ帳など)でファイルに書き込みます。以下の感じです。

Google翻訳ボタンを拡大するCSS

ブラウザを再起動させると、どーんとGoogle翻訳ボタンがでかでか表示されています。

Google翻訳ボタンが拡大される

クリックで翻訳メニューが表示されます。

クリックで翻訳メニュー表示

問題なくページ翻訳されます。

Vivaldiブログのページ翻訳

自分好みにカスタマイズ

上記CSS だとうまくいかない方がほとんどだと思います。理由は、僕の環境に合わせて位置を調整しているからです。なので、自分の環境に合ったようにカスタマイズしてみてください。

/*Google翻訳ボタンを拡大*/
.button-toolbar.aapbdbdomjkkjkaonfhkkikfgjllcleb.ExtensionIcon.extensionId {
  position: relative;
  left: 80px; /*位置の調整*/
  top: 44px; /*位置の調整*/
  transform: scale(3, 3); /*拡大率*/
}

例えば「top」の数字を大きくしたら、より下に移動します。

「top: 200px;」に移動

「top」と「right」を調整したら、左側にぐわーーんと移動することもできます。ここらへんは何回か試して、自分なりの最適解を見つけてみましょう。

左端に移動

上記CSS には「right」を記述していないので、追加する時は「right: 〇〇px;」と記述しましょう。

「transform: scale(3, 3);」は拡大率です。

より拡大したい場合は、数字を大きくしましょう。10倍にしたら下記画像のようになります。かなりでかいです。アイコンのジャギー(粗さ)も目立ちます。

「transform: scale(10, 10);」を適用

【余談】拡張機能自動開閉のCSSと使うと便利

マウスオーバーで拡張機能ボタンを開閉するCSS との組み合わせがいい感じです。必要な時だけサクッと翻訳ボタンを呼び出せます。

翻訳ボタンを拡大してたら、常にでかでか表示されて邪魔ですもんね。いらない時は隠しておくといいかなと思います。

自動開閉については以下の記事を参考にしてみてください。

参考:【Vivaldi】Chrome拡張機能をマウスオーバーで展開させるCSS | ナポリタン寿司のPC日記

まとめ

以上、Google翻訳の拡張機能ボタンを大きくするCSS についてでした。

個人的には、プライバシーに配慮したVivaldi翻訳 のほうを使いたいので、早く文字化けする問題改善されないかなぁと思います。それまでは「でかでかGoogle翻訳」でしのぎたいと思います。

Posted by ナポリタン寿司