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

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

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

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

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

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

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

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

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

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

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

【Vivaldi】サイドバーの使い方。ウェブパネルが便利！

この記事では、「Vivaldi（ヴィヴァルディ）」ブラウザに搭載しているサイドバー（パネル）について書 ...

https://www.naporitansushi.com/vivaldi-panel/

1. 前提
2. DeepL翻訳をカスタマイズするCSS
3. 感想

前提

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

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

【Vivaldi】ウェブパネルにCSSを適用する方法。拡張機能Stylusの使い方

この記事では、ウェブサイトだけでなく、Vivaldi のウェブパネルにもCSSを適用できるChrome拡張機能「S ...

https://www.naporitansushi.com/webpanel-css/

似たような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）を選択します。

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

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

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

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

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

タブでDeepL翻訳を開く（ウェブパネルのDeepL翻訳アイコン右クリック→開く）
Stylusアイコンをクリック
「www.deepl.com」のチェックを外す
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;
}

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

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

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

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

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

普通にタブで開いた時は、除外したい場合

上記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翻訳タブ（ページ）では、左右配置になります。ウェブパネル内だけ上下配置です。

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

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

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

フォントを変更するCSS

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

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

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

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

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

body *:not(.fa) {
    font-family: "BIZ UDGothic" !important;
}

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

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

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

【Stylebot】Twitterのフォントを変更するCSS

この記事では、Twitterのフォントを変更するCSSについて書きます。ウェブサイトに自分で作成したCSSを ...

https://www.naporitansushi.com/twitter-font/

角丸具合、影の調整

テキストボックスの角丸具合、影の具合を調整したい場合は、以下の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」が角丸具合です。