メールアドレスのフォントサイズについて

[kanmon-neko]

バージョン68.12.1を使用しております。

userChrome.cssを弄って各種フォントサイズ等を変更しているのですが、メール作成画面のメールアドレス（差出人などのテキストボックス）のフォントサイズの変更方法だけ見つからないのですが、こちらの変更できないのでしょうか？

[meeyar]

下図の赤枠内のことでよければ、セレクタ（ID）は
#msgheaderstoolbar-box
です。

コード: 全て選択

#msgheaderstoolbar-box{font-size: 13pt;
}

とか。
数値はお好みで変更してください。

[kanmon-neko]

回答ありがとうございます。

ヘッダビューの文字サイズ変更は色々なサイトで書かれていたのですが、
メール宛先欄の文字サイズ変更は見当たらなかったので助かりました。

[EarlgreyTea]

meeyar さん、若干の補足をさせてください。
添付画像を拝見いたしましたが、開発ツールボックスのインスペクタで調べられたのは Thunderbird 78 のようですね。
また画像では反映範囲に件名が含まれていないように見えますが、
実際に試してみますと各種メールアドレス項目、件名、添付ファイル名一覧などの全部が範囲になります。

kanmon-neko さん
特定箇所だけ変更したいといった場合は自分で調べて試行錯誤が必要となりますので、（私自身も忘れることもあり）やり方を書いておきますね。

■userChrome.cssで変更したい画面要素を調べる方法

1. Thunderbird 68を起動します。
2. ツール＞開発ツール＞開発ツールボックスを選択、またはキーボードで Ctrl+Shift+I を押します。
3. 「リモートデバッグ接続要求」というダイアログが表示されるので、「接続を許可しますか？」に対して「OK」を選択してください。

   

4. Thunderbirdとリモート接続して開発ツールボックスが起動します。
5. メッセージ作成画面を調べたい場合は、インスペクターの対象ドキュメントを chrome://messenger/content/messengercompose/messengercompose.xul に切り替える必要があります。

   

6. ツールバー左端の矢印アイコンをクリックした状態でメッセージ作成画面の調べたい箇所を選択すると、インスペクターで対応する要素が選択されます。
7. インスペクターでその要素を調べて、どういうセレクターで指定すべきか検討してください。

■userChrome.cssの設定方法
userChrome.css はプロファイルフォルダー直下に chrome フォルダーを作ってそこに配置します。
Thunderbird 68ではデフォルト有効なので起動し直すと反映されます。
ただし、Thunderbird 78からは about:config で toolkit.legacyUserProfileCustomizations.stylesheets の値を true にしておく必要があります。

userChrome.css への記述内容ですが、私はこんな感じにしています。

コード: 全て選択

/*
 * メインウインドウ
 */
@-moz-document url-prefix("chrome://messenger/content/messenger.xul") {
  /* ここにメインウインドウへのCSSを書く */
}

/*
 * メッセージ作成ウインドウ
 */
@-moz-document url-prefix("chrome://messenger/content/messengercompose/messengercompose.xul") {
  /* メッセージヘッダーのフォントサイズを指定 */
  #msgheaderstoolbar-box{ font-size: 13pt; }
}

従来は userChrome.css の最初に

コード: 全て選択

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

の1行を書いていたのですが、今は？なくても大丈夫みたいなので、私は入れてません。

その代わり、@-moz-document で対象の XUL を明確に指定して、その中に css を書くようにしています。
ちなみに、 Thunderbird 78 の場合は 拡張子が .xul から .xhtml に変わっていますのご注意ください。
userChrome.css に限りませんが、テキストエンコードはBOM無しUTF-8にしておいてください。

[meeyar]

EarlgreyTeaさん、補足説明ありがとうございます。

ご指摘の通り、添付画像で示したインスペクターは78のものです（68以前の使用環境がなくなってしまったので…）。
が、個人的にそれ以前（68や60以前）からuserChrome.cssでの同箇所のフォントサイズ指定をしていたので「書く中身は同じ」と考えそのまま情報を載せました。

画像は（左側にある赤実線の枠□を除き）合成ではなく、右側赤破線の表示もインスペクターの動作によるものです。
破線表示させながらインスペクターの画面を確認するのは結構大変（すぐにフォーカスがずれる）なので、タイミング等によって囲む範囲がずれてしまうことがあります。すみません。

この点だけ補足。
再度トライしてみました。これが正しい範囲かな？

[EarlgreyTea]

meeyar さん、わざわざ再度トライしていただいてなんかすみません。

実を言うと開発ツールボックスで調べている画像見るまで、インスペクターでメインウインドウ以外を調べる方法を忘れてて、ソースコードを直接調べたりしてたんです。
で、やっぱり開発ツールボックスのインスペクターで見られるよねと確信を得て、
じゃあどこで切り替えるんだろうといじり回してようやく、「現在の対象ドキュメントとして読み込む iframe を選択」ボタンに行きついたという次第です。
それで、いい機会なんで忘れないうちに手順を書いておこう、たぶん需要あるだろうしとなったわけです。

ありがとうございました。