【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翻訳と併用がおすすめ

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

参考:【Floorp】Firefoxベースのバランスに優れたブラウザ

オリジナルカスタム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

感想

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

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

Posted by ナポリタン寿司