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

2022年1月12日Stylebot&Stylus,カスタムCSS

この記事では、Vivaldi のウェブパネルのDeepL翻訳をCSS で見やすくするCSS について書きます。

ウェブサイトに自分で作成したCSS を適用できるChrome拡張機能「Stylus」を使います。

Stylus を使うことで、Vivaldi のウェブパネルに登録したDeepL翻訳を見やすくカスタマイズできます。

具体的には、入力欄と翻訳結果欄以外を非表示にして、見栄えスッキリ、テキストエリアを上下に配置してパネルを最大限活用する等です。

パネルは縦に長いので、テキストエリアを上下に配置すると見やすくなります。余計な項目を非表示にすることで、より広いテキストエリアを使えます。

あなたの趣味や生活に役立つ情報も【スマートニュース】

1. 前提
2. CSS
3. まとめ

前提

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

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

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

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

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

CSS

新規タブでDeepL翻訳のサイトを開いて、拡張機能ボタンをクリックします。

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

新しいタブでCSS を書く画面が開くので、記述していきます。

不要な項目を非表示

まずは不要な項目を削除するCSSです。

自分がいらないと思う項目のCSSを適用してみてください。

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

/*ヘッダー非表示*/
header.dl_header.dl_header--sticky {
  display: none;
}

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

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

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

/*「毎日、何百万もの人々がDeepLで翻訳していま」文章非表示*/
.dl_body--redesign.dl_top_element--wide.dl_visible_desktop_only.eSEOtericText {
  display: none;
}

/*「〜ドイツ企業のDeepL、Google翻訳を超える〜」文章非表示*/
.dl_top_element.dl_top_element--wide {
  display: none;
}

/*フッター非表示*/
.dl_footerV2_container {
  display: none;
}

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

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

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

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

CSS が正常に反映されていると、拡張機能ボタン右上に数字が表示されます。このサイトで、CSS が有効になっているよ～って意味です。

クリックでオンオフ切り替えできます。

パネル内にもCSSが反映されます。反映されていないという方は、一旦リロードしてみてください。

DeepL関連のCSS漁ってたら、既に同じようなコードを公開している方がいました。僕のCSS だとうまくいかないって方は、こちらを試してみてください。

参考：Clean Deepl — UserStyles.world

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

さて、ここからがウェブパネル専用カスタマイズです。

一度CSS を書き込んだら、専用のスタイルシートが作成されているので、追加で記述します。

DeepL翻訳サイトを開いて、拡張機能ボタンをクリック → URL横のマークをクリックします。

CSS 編集画面が開くので、追加で書き込みます。書き込むコードは以下になります。

/*横配置から縦配置に変更*/
@media screen and (max-width: 700px) {
  .lmt__sides_container {
    flex-flow: column !important;
  }

  /*横幅を画面いっぱいに広げる*/
  .lmt__side_container.lmt__side_container--source,
  .lmt__side_container.lmt__side_container--target {
    width: 100% !important;
  }

  /*入力欄とテキスト欄の隙間調整*/
  .lmt--web .lmt__textarea_separator--has-top-toolbar {
    margin-top: 5px !important;
  }
}

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

横幅が700px以下の時だけ適用するようにしているので、通常のタブで開いた時は左右に並びます。あくまでウェブパネル内のみの変更です。

結構パネルを広げている方は、700pxだと横並びにならないかもです。その場合は、800pxや900pxにしてみましょう。

「入力欄とテキスト欄の隙間調整」を使うことで、下記画像のように空白が狭くなります。

その他のカスタマイズ

お遊び程度のカスタマイズ例を紹介します。気になったものがあれば選んでみてください。

/*テキストエリアのヘッダー中央揃え*/
@media screen and (max-width: 700px) {
  .lmt__language_container {
    margin: 0 auto;
  }
}

/*テキストエリアのヘッダー背景色*/
@media screen and (max-width: 700px) {
  .dl_body--redesign {
    background-color: #fff !important;
  }
}

/*テキストエリアの「用語集」文章非表示*/
@media screen and (max-width: 700px) {
  .lmt__glossary_button {
    display: none;
  }
}

/*角丸、影の強化*/
@media screen and (max-width: 700px) {
  html:not(.lmt_df-1641_increase_mobile_breakpoint).desktop_restyling_df2420 .lmt--web .lmt__sides_container .lmt__side_container.lmt__side_container--source, html:not(.lmt_df-1641_increase_mobile_breakpoint).desktop_restyling_df2420 .lmt--web .lmt__sides_container .lmt__side_container.lmt__side_container--target {
    border-radius: 20px;
    box-shadow: -3px 10px 8px #c8c8c8;
    overflow: hidden;
  }
}

「テキストエリアのヘッダー中央揃え」を使うと、下記画像のように変化します。

「角丸、影の強化」を使うと、下記のように、より強化されたフローティングデザインになります。

「角丸、影の強化」の中にある「overflow: hidden;」を活用することで、下記画像のように高さ調整もできます。

ちょっと動作が安定しないのと、あまり便利じゃないなと判断して、コードの紹介は省略します。僕の力だと表示崩れ等が発生しました。

ダークモード化

白色背景を黒色にして、ダークモードにするコードです。

/*色を反転させる。（白→黒）*/
@media screen and (max-width: 700px) {
  body {
    filter: invert(1) hue-rotate(180deg);
  }

  /*その他の部分を黒にする*/
  .dl_body--redesign {
    background-color: black !important;
  }

  /*影非表示*/
  html:not(.lmt_df-1641_increase_mobile_breakpoint).desktop_restyling_df2420 .lmt--web .lmt__sides_container .lmt__side_container.lmt__side_container--source, html:not(.lmt_df-1641_increase_mobile_breakpoint).desktop_restyling_df2420 .lmt--web .lmt__sides_container .lmt__side_container.lmt__side_container--target {
    border-radius: 20px;
    box-shadow: none !important;
    overflow: hidden;
  }
}

ダークモードになります。

ダークモードのCSS を使う場合は、「その他のカスタマイズ」で紹介している「角丸、影の強化」は使わないようにしましょう。

ダークモードで影を非表示にしているのに、影強化しても意味ないですからね。

ありとあらゆるウェブサイトを強制的にダークモードにするChrome拡張機能「Dark Reader」でも、ウェブパネル内までは反映されないので、CSS で無理やりダークモードにするのも一つの手かなと思います。

参考：【Dark Reader】ブラウザを強制的にダークモードにするChrome拡張機能 | ナポリタン寿司のPC日記

フォント変更

フォントを変更します。

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

ふい字にするには、Windows にふい字フォントをインストールしている必要があります。

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

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

より詳しいフォント変更については、下記記事の見出し2「フォントの指定方法」と「ウェブ上のフォントをインストールする」を参考にしてみてください。

参考：【Stylebot】Twitterのフォントを変更するCSS | ナポリタン寿司のPC日記

まとめ

以上、Vivaldi のウェブパネルのDeepL翻訳をカスタマイズする方法についてでした。

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

Posted by ナポリタン寿司

【Windows11】CLaunchでコントロールパネルなどの特殊アプリを登録する方法

【Windows11】英語USキーボードレイアウトに勝手に切り替わる原因と対処法

コメント一覧

まだ、コメントがありません