【Stylus】ウェブパネルのDeepL翻訳をCSSでカスタマイズ

2022年1月12日Stylebot&Stylus(CSS)

DeepL翻訳(ディープエル)のアイコン

この記事では、「Vivaldi」ブラウザのウェブパネルに追加した「DeepL翻訳(ディープエル)」を、CSSで見やすくする方法について書きます。

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

Vivaldiのウェブパネルに登録した「DeepL翻訳」のスクリーンショット1

Chrome拡張機能「Stylus(スタイラス)」を使うことで、Vivaldiのウェブパネルに登録した「DeepL翻訳」を見やすくカスタマイズできます。

具体的には、以下のようなことができます。あくまで一例です。

  • 入力欄と翻訳結果欄以外を非表示にして見栄えスッキリ
  • テキストエリアを上下に配置
  • フォント変更
  • 角丸具合、影の調整

通常のDeepL翻訳では、テキスト入力欄以外に、ヘッダーや、「ファイルの翻訳」、高評価ボタンなど、不要なコンテンツが沢山あります。CSSを使うことで、綺麗さっぱり削除できます。

Vivaldiのウェブパネルに登録した「DeepL翻訳」のスクリーンショット2

また、テキストエリアを左右ではなく、上下に配置することで、縦に長いウェブパネルを有効活用できます。

「Vivaldiのウェブパネルに、DeepL翻訳を登録しているけれど、ちょっとごちゃごちゃして使いにくい!」という方、ぜひ参考にしてみてください。

Vivaldiのサイドバーについては、下記記事を参考にしてみてください。

前提

この記事は、既に「Stylus (スタイラス)」をインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能です。

まだインストールしていない方は、以下の記事を参考にしてみてください。

似たようなCSSを適用できるChrome拡張機能で、「Stylebot」というのがあります。

こちらは、ウェブパネル内のページには反映されません。当サイトでは、「Stylebot」を活用した記事を沢山書いていますが、Vivaldiユーザーでウェブパネル内にも適用したい場合は、「Stylus」がおすすめです。

書き込むコード自体は、同じCSSです。

また、Vivaldiには、「オリジナルカスタムUI(カスタムCSS)」と呼ばれる機能があります。こちらは、ウェブサイトではなく、ブラウザ本体をCSSでカスタマイズする機能です。

ウェブサイト(例:DeepL翻訳)をカスタマイズしたい場合は、Chrome拡張機能「Stylus」を使います。

DeepL翻訳をカスタマイズするCSS

新規タブで、「DeepL翻訳」のサイトを開きます。ウェブパネル内の「DeepL翻訳」ではなく、新しいタブで開きます。

アクセスできたら、Stylusの拡張機能ボタンをクリックします。

「次のスタイルを書く」の下にある「www.deepl.com」をクリックします。「このURL」ではなく、ドメイン(www.deepl.com)を選択します。

Stylusのスクリーンショット1

新しいタブでCSSを書く画面が表示されます。ここに書いていきます。

不要な項目を非表示にするCSS

不要な項目を削除するCSSです。全部を適用する必要はありません。自分がいらないと思う項目のCSSだけを使ってみてください。

/*------------------------
色々な部分を非表示
-------------------------*/

/*ヘッダー*/
header {
  display: none;
}

/*テキストの翻訳&ファイルの翻訳ボタン*/
.lmt__docTrans-tab-container {
  display: none !important;
}

/*テキストエリア内の「翻訳するにはテキストを入力してください…」*/
span.lmt__textarea_placeholder_text {
  display: none !important;
}

/*翻訳結果欄の音声読み上げボタン*/
span:has(button[aria-label="音声読み上げ"]) {
  display: none;
}

/*翻訳結果欄の高評価ボタン*/
span:has(button[aria-label="翻訳を高く評価"]) {
  display: none;
}

/*翻訳結果欄の低評価ボタン*/
span:has(button[aria-label="翻訳を低く評価"]) {
  display: none;
}

/*翻訳結果欄の共有ボタン*/
.relative:has(button[aria-label="翻訳を共有する"]) {
  display: none;
}

/*翻訳結果欄右上の「用語集」*/
.lmt__language_container_sec {
  display: none;
}

/*テキストエリア下の「DeepL Proの無料体験で、DeepLを最大限に活用しましょう」*/
div#lmt_pro_ad_container {
  display: none !important;
}

/*辞書*/
section#lmt__dict {
  display: none;
}

/*「毎日、何百万もの人々がDeepLで翻訳しています」*/
.showSeoText .eSEOtericText {
  display: none;
}

/*各メディアの賞賛文章の引用*/
div#dl_quotes_container {
  display: none;
}

/*フッター*/
footer {
  display: none;
}

/*------------------------
色々な部分を非表示終了
-------------------------*/

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

Stylusのスクリーンショット2

ごっそり色々な部分が非表示になります。

CSSでカスタマイズしたDeepL翻訳の比較画像1

Stylusは、Vivaldiのウェブパネル内にも反映されます。既にパネルを開いていた場合は、一度パネル内のリロードボタンを押します。これで、CSSが反映された状態のDeepL翻訳が表示されます。

CSSでカスタマイズしたDeepL翻訳の比較画像2

テキストエリアしか使っていないという方は、全部非表示にすると、かなりスッキリします。

CSSが反映されていると、DeepL翻訳タブを開いた時に、Stylus拡張機能ボタン右上に数字が表示されます。「このサイトで、CSSが有効になっているよ~」という意味です。

Stylusのスクリーンショット3

クリックでオンオフを切り替えられます。

Stylusのスクリーンショット4

一時的にウェブパネルのDeepL翻訳を無効化したい場合は、ちょっと手間ですが、以下の手順でできます。

  1. タブでDeepL翻訳を開く(ウェブパネルのDeepL翻訳アイコン右クリック→開く)
  2. Stylusアイコンをクリック
  3. 「www.deepl.com」のチェックを外す
  4. DeepL翻訳ウェブパネルをリロード(更新)する

テキストエリアを上下に配置するCSS

翻訳入力欄と出力欄のテキストボックスを、左右ではなく、上下に配置したい場合は、以下のCSSになります。1つ目に紹介したCSSと併用可能です。

/*横配置から縦配置に変更*/
.lmt--web .lmt__sides_container .lmt__sides_wrapper {
  flex-flow: column !important;
}

/*テキストエリアの余白*/
.lmt__textarea_container {
  padding-bottom: 40px !important;
  padding-top: 10px !important;
  min-height: 20vh !important;
}

/*翻訳欄の横幅*/
.lmt--web .lmt__side_container {
  width: calc(94vw);
}

/*ページ下の余白削除*/
.dl_translator_page_container {
  height: 100vh !important;
}

/*翻訳ボタン(矢印)削除*/
.lmt__language_container_switch {
  display: none !important;
}
Stylusのスクリーンショット5

本CSSは、以下のサイトを参考にさせていただきました。感謝です。

参考:Customized web-panel for DeepL Translator | Vivaldi Forum

適用したら、下記画像のようにテキストエリアが上下に並びます。

DeepL翻訳をCSSで上下配置にした画像1

ウェブパネル内にも反映されます。上下に配置することで、下のほうのスペースを有効活用できます。

DeepL翻訳をCSSで上下配置にした画像2

ただし、上下配置は、長文翻訳に向きません。入力欄と結果欄を比較したい時に、スクロールで該当場所を探さないといけないので手間です。単語や短い文章向けかなと思います。

DeepL翻訳をCSSで上下配置にした画像3
普通にタブで開いた時は、除外したい場合

上記CSSは、ウェブパネルのDeepL翻訳だけでなく、通常のタブのDeepL翻訳にも反映されます。

「通常のDeepL翻訳は、横に十分なスペースがあるから、わざわざ上下にしなくていい!」って方は、代わりに以下のコードを使ってみてください。

/*横幅が700px以下だったら適用*/
@media screen and (max-width: 700px) {
/*横配置から縦配置に変更*/
.lmt--web .lmt__sides_container .lmt__sides_wrapper {
  flex-flow: column !important;
}

/*テキストエリアの余白*/
.lmt__textarea_container {
  padding-bottom: 40px !important;
  padding-top: 10px !important;
  min-height: 20vh !important;
}

/*翻訳欄の横幅*/
.lmt--web .lmt__side_container {
  width: calc(94vw);
}

/*ページ下の余白削除*/
.dl_translator_page_container {
  height: 100vh !important;
}

/*翻訳ボタン(矢印)削除*/
.lmt__language_container_switch {
  display: none !important;
}
}

これで、通常のDeepL翻訳タブ(ページ)では、左右配置になります。ウェブパネル内だけ上下配置です。

CSSでカスタマイズしたDeepL翻訳の比較画像3

正確には、ページの横幅が700px以下だったら上下配置にするという意味になっています。つまり、ウェブパネルの横幅を、700px以上で使っている方には適用されません。

最初に書いてある「@media screen and (max-width: 700px)」の「700px」という数値で調整できます。800pxにすると、800px以下の時だけ適用するという意味になります。

実際にGIF画像を貼っておきます。ウェブパネルを一定以上広げると、自動的に左右配置になります。700pxを超えたので、上下配置のCSSを使わなくなったということですね。

ウェブパネルのDeepL翻訳の横幅を調整しているGIF画像

フォントを変更するCSS

フォントを変更したい場合、下記コードを利用します。

/*フォント変更*/
body *:not(.fa) {
  font-family: "ふい字";
}

「ふい字」の部分を、好きなフォント名にします。ただし、自身のOS(Windows)にインストールしているフォントに限ります。インストールしていないフォントは適用できません。

上記CSSの場合は、「ふい字」というフォントをインストールしていないと反映されません。

ウェブパネルのDeepL翻訳のフォントを「ふい字」にした画像

「BIZ UDゴシック」って、Windowsに標準搭載しているんですっけ?僕のPCにあったので、適用してみたら、いい感じの丸み系でよかったです。

body *:not(.fa) {
    font-family: "BIZ UDGothic" !important;
}
ウェブパネルのDeepL翻訳のフォントを、色々なフォントに変えてみた比較画像

ウェブパネル内だけで反映させたい場合は、下記コードになります。

/*フォント変更*/
@media screen and (max-width: 700px) {
  body *:not(.fa) {
    font-family: "Noto Sans JP";
  }
}

より詳しいフォント変更については、下記記事が参考になるかもしれません。

角丸具合、影の調整

テキストボックスの角丸具合、影の具合を調整したい場合は、以下のCSSを使います。

/*テキストボックスのカスタマイズ*/
.lmt--web .lmt__sides_container {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; /*影*/
  border-radius: 20px; /*角丸具合*/
  border: 1px solid #dae1e8; /*枠線*/
}

/*テキストボックス(出力欄)の角丸具合*/
.lmt__textarea_container {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

「box-shadow」が影具合です。「border-radius」が角丸具合です。

ウェブパネルのDeepL翻訳の角丸と影を強くした画像

影は、以下のサイトが参考になります。

サイトにアクセスすると、サンプルの「box-shadow」がずらっと表示されます。好きな影が施されているボックスをクリックします。これで、クリップボードに、その影を実装するCSSコードがコピーされます。

「93 Beautiful CSS box-shadow examples - CSS Scan」のスクリーンショット

コピーしたら、上記CSSの「box-shadow」の行と置き換えます。これで、自分の好きな影具合にできます。

ダークモードにしたい場合

以下の記事を参考にしてみてください。目に刺激が少ない暗めの色にできます。

DeepL翻訳をダークモードにした画像

感想

以上、Vivaldiのウェブパネルに登録した「DeepL翻訳(ディープエルほんやく)」を、CSSでカスタマイズする方法でした。

サイドバーで、頻繁に翻訳するという方におすすめです。

Posted by ナポリタン寿司