【Stylus】ウェブパネルのDeepL翻訳をCSSでカスタマイズ
Stylusを使うことで、Vivaldiのウェブパネルに登録したDeepL翻訳を見やすくカスタマイズできます。
具体的には、入力欄と翻訳結果欄以外を非表示にして、見栄えスッキリ、テキストエリアを上下に配置してパネルを最大限活用する等です。
パネルは縦に長いので、テキストエリアを上下に配置すると見やすくなります。余計な項目を非表示にすることで、より広いテキストエリアを使えます。
Vivaldiのサイドバーについては、下記記事を参考にしてみてください。
前提
この記事は、既にStylus をインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能です。
まだインストールしていない方は、以下の記事を参考にしてみてください。
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】ウェブページを強制的にダークモードにする拡張機能 | ナポリタン寿司の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翻訳をカスタマイズする方法についてでした。
サイドバーで頻繁に翻訳するという方におすすめです。