【Vivaldi】メール設定の署名欄を拡張するCSS

2024年1月14日カスタムCSS

この記事では、「Vivaldi（ヴィヴァルディ）」ブラウザのオリジナルカスタムUI機能を使って、設定画面のメールにある署名欄のテキストエリアを広げるCSSを書きます。

本記事は、オリジナルカスタムUIが有効になっている前提です。詳しくは、こちらを参考にしてみてください。

「Vivaldi」ブラウザの設定（Ctrl+F12）→メール→メールアカウントの中にある「署名」の高さが、少々足りないように思えました。

署名とは、メール最後の定型文的な感じで、僕の場合、以下の情報を挿入しています。ブログのURLや、SNSリンクを入れています。正しい使い方なのかは分かりません。適当です。

==================================
ナポリタン寿司
ブログURL：https://www.naporitansushi.com
Twitter : @Naporitansushi
メールアドレス :contact@naporitansushi.com
==================================

上記のような複数行の文章を署名に設定したい時に、デフォルトだと数行分しか表示されず、スクロールを活用しないといけません。CSSを利用することで、好きな高さに拡張できます。

設定からサクッと変更するのと比べて少々手間ですが、一度環境を構築してCSSを書き込めば、「Vivaldi」のアップデート等で使えなくなるまでは、ずっと適用されます。戻したくなったらいつでもオンオフできます。

メール設定の署名欄なんて、一度設定したらそんな頻繁に変えない部分だと思いますが、広げたい方は参考にしてみてください。本記事は、Windows版（PC版）「Vivaldi」での解説です。スマホやタブレットのアプリ版ではできません。

1. 「Vivaldi」のオリジナルカスタムUI（CSS）を有効にする
2. メール設定の署名欄を広げるCSS
3. 感想

「Vivaldi」のオリジナルカスタムUI（CSS）を有効にする

本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。

「Vivaldi」上でCSSファイルを使えるように「vivaldi://experiments/」から変更して、CSSファイルを読み込ませます。

【Vivaldi】カスタムCSSの導入方法。自由にカスタマイズしてみよう！

この記事では、ウェブブラウザ「Vivaldi」にCSSを適用する方法について書きます。ブラウザの外観（UI） ...

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

メール設定の署名欄を広げるCSS

以下のCSSになります。

/*Vivaldiメール設定の署名欄拡張（リッチテキスト有効時）*/
.mail-signature .editor-webview {
    max-height: max-content !important;
    min-height: 250px !important;
}

/*Vivaldiメール設定の署名欄拡張（リッチテキスト無効時）*/
.mail-signature>label {
    height: 250px !important;
}

「リッチテキストと画像を有効にする」にチェックが入っている時と入っていない時で、テキストエリアのHTMLが変わったので、両方に対応できるよう2つのCSSを用意しました。両方書き込むか、自分が使うほうだけ書き込みます。「height」の数値で高さを調整できます。

上記のCSSを、テキストエディター（Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど）で開いた「Vivaldi」のカスタムCSSファイルに書き込みます。