― MozillaZine.jp フォーラムは Mozilla 製品に関する情報交換の場です ―



All times are UTC + 9 hours

返信する
ユーザー名:
件名:
オプション:
BBCode: ON
[img]: ON
[flash]: OFF
[url]: ON
スマイリー: ON
BBCode を無効にする
フォントサイズ:
フォントカラー
スマイリーを無効にする
URL を自動的にパースしない
ユーザエージェントを表示する
認証コード
KCaptcha by Nikita_Sp
   

トピックのレビュー - ヘッダーバーのアピアランス
作成者 メッセージ
  記事の件名:  Re: ヘッダーバーのアピアランス  引用付きで返信する
偶然的通行人さん、ご教示ありがとうございました。
用語の使い方についても大変勉強になりました。

偶然的通行人 さんが書きました:
スレッドペイン列(カラム)またはスレッドカラムなどと呼ばれるパーツですね。
Thunderbird 60.x 系におけるスレッドペイン列と、その下段にあるスレッドペイン(メッセージリスト)の背景色は、厳密には異なっています。区切り(スプリッター)も存在します。
Windows OS 上の Thunderbird 60.2.1 で拾った色は、スレッドペイン列の背景色が,#FCFCFC 、列間および下辺の区切りが #E8F1FB となっていました。
これに対し、下段のスレッドペインの背景色は #FFFFFF で完全な「白」でした。
色の違いがあったんですね。まったく分かりませんでした。教えていただいた色コードをPhotoshopで確認してみましたが、カラムの色と純白との違いが分かりませんでした。
区切りの色は認識できましたが、Thunderbird上ではやはり分かりませんでした。

引用:
「以前は」と仰っているのは、どのあたりバージョンの頃のことでしょうか。
詳細わからず申し分けありません。数ヶ月前に使用していたWin7機での話でのおそらくは「45.x 系」というものかと思います。
思い込みだったのかもしれませんが、Win10機に鞍替えしたときに「見にくい」と感じたため今よりは色の違いがわかりやすかったのだと思います。

引用:
別解として次のようなスタイルも考えられそうです。ちょっと無理矢理感はありますが、ユーザー環境や好みに合わせてアレンジしてみてください。
さっそく試してみました。カラムに色が付き大変わかりやすくなりました。
このスタイルのままで使っていきたいと思います。

引用:
現在、健康上の制約により不定期な書き込みしかできなくなっています。すぐに応答できない場面がかなり多くなりますことを、ご容赦ください。
どこかご不調のことがあるのでしょうか。どうぞお大事にお過ごしくださいませ。

これにて解決とさせていただきます。コメントをくださった皆様、ありがとうございました。
投稿記事 Posted: 2018年10月22日(月) 12:32
  記事の件名:  Re: ヘッダーバーのアピアランス  引用付きで返信する
解決済みのところ、横から失礼します。

アピアランス(appearance)と仰っているのは、おそらく一般的な意味合いでの "外観" や "体裁" を指しておられるのだと思います。
しかし同時に、CSS としての appearance は、プラットフォーム(OS 環境)の標準的なユーザーインターフェイス(UI)に準じた外観を指定するものであることを、意識したほうがいいかもしれません。

hoyajit さんが書きました:
現在上記バージョンのThunderbirdを使用しておりますが、ヘッダーバー(正式な呼称は存じ上げません。メールリストの上段にあって「件名」、「通信相手」、「送信日時」等が表示されているバーです)がメールリストと見分けにくいと感じています。
添付画像をご参照いただければお分かりのように「件名」が表示されたヘッダーバーと(ぼかしを入れた)メールリストの部分の背景が同じ白色で、かつ間に区切り線などがありません。
このようなアピアランスが正しい状態でしょうか。

スレッドペイン列(カラム)またはスレッドカラムなどと呼ばれるパーツですね。

Thunderbird 60.x 系におけるスレッドペイン列と、その下段にあるスレッドペイン(メッセージリスト)の背景色は、厳密には異なっています。区切り(スプリッター)も存在します。
Windows OS 上の Thunderbird 60.2.1 で拾った色は、スレッドペイン列の背景色が,#FCFCFC 、列間および下辺の区切りが #E8F1FB となっていました。
これに対し、下段のスレッドペインの背景色は #FFFFFF で完全な「白」でした。

こういう配色は、OS 環境との親和性を考慮した結果でしょうから、そういう意味で「Thunderbirdの開発者たちが意図した見た目」ということになろうかと思いますが、「背景が同じ白色で、かつ間に区切り線などがありません」が仕様なのではなく、配色の違いや区切りは確かに存在します。
ただこれが、CSS の appearance 指定の在り様、ディスプレイの設定状態やユーザーの視覚的条件などによっては、一様に「白」に見えてもおかしくない微妙な差なので、ご質問のようなことを感じられるのも頷けます。

hoyajit さんが書きました:
以前はヘッダーバーの部分に区切り線のようなものがあったという記憶があったためお聞きする次第です。

「以前は」と仰っているのは、どのあたりバージョンの頃のことでしょうか。
Thunderbird 60.x 系では、それ以前のバージョンと比較して、ユーザーインターフェイス(UI)がよりフラットなデザインになっているとは思いますが、スレッドペインまわりの配色については、52.x 系、45.x 系 …… で、見た目のうえではそう極端な差はなかったと思います(細部の変更はあると思いますが...)。

Thunderbird の各バージョンの深い部分まで調べたわけではありませんが、あるスタイル要素に -moz-appearance が指定されていたり、システムカラーが指定されているときには、Thunderbird のパーツの色がプラットフォーム(OS 環境)の設定条件に従った色調で表示されることになるはずです。
したがって、Thunderbird を Windows XP や Windows 7 などで使っていたころと、Windows 10 で使っている現状では、見た目に大きな差を感じることがあるかもしれません。個々の OS 環境で使用テーマや配色設定のカスタマイズをしていたとしたら、なおさら Thunderbird の UI の色表示の違いとして現われることはあるかと思います。

対策としては、Sakuraya さんがアドバイスなさったスタイルがシンプルかつ有用だと思いますが、別解として次のようなスタイルも考えられそうです。ちょっと無理矢理感はありますが、ユーザー環境や好みに合わせてアレンジしてみてください。

コード:
/* Windows 版 Thunderbird 60 系でスレッドペイン列の配色を調整する */
#threadCols > treecol,
#threadCols > treecolpicker {
-moz-appearance: window !important;
height: 24px !important;
background-color: silver !important;
border-left: 1px solid white !important;}


余談めいた話ですが以上です。


(おことわり)
現在、健康上の制約により不定期な書き込みしかできなくなっています。すぐに応答できない場面がかなり多くなりますことを、ご容赦ください。
投稿記事 Posted: 2018年10月20日(土) 14:08
  記事の件名:  Re: ヘッダーバーのアピアランス  引用付きで返信する
Sakurayaさん

引き続きご教示ありがとうございました。
Sakuraya さんが書きました:
線の太さを変えたい場合は以下のように物理単位で指定することもできますし、thin/medium/thickのように細め、中間、太めを指定することもできます。

ご指示の通り"thin"に修正したところ、いいあんばいになりました。
お力添えどうもありがとうございました。
投稿記事 Posted: 2018年10月17日(水) 09:45
  記事の件名:  Re: ヘッダーバーのアピアランス  引用付きで返信する
こんばんは。ひとまずお役に立てて何よりでした。
引用:
ラインの幅をピクセル単位で変更できたりするんでしょうか。
border-bottomというプロパティは線の太さ、線の見た目、その線の色の3つを指定します。
指定する順番はどうでもよく、またどれかを指定しないでおくと初期値が指定されます。

線の太さを変えたい場合は以下のように物理単位で指定することもできますし、thin/medium/thickのように細め、中間、太めを指定することもできます。

コード:
#threadCols {
    border-bottom: 8px outset darkgray !important;
}
最初に書いた例ではボーダーがあることがはっきりと分かるように太めを指定しておきましたがやっぱり太すぎましたか。
個人的にはthinがちょうどよいかなと思ったので便乗して使わせていただくことにしました。
投稿記事 Posted: 2018年10月16日(火) 21:50
  記事の件名:  Re: ヘッダーバーのアピアランス  引用付きで返信する
Sakuraya さんが書きました:
私の手元でも同じような感じなので、Thunderbirdの開発者たちが意図した見た目であるかという意味でなら正しい状態だと思います。

試してみたところ、userChrome.cssを作成して以下の要素に対してborder-bottomを指定すると効果がありました。よろしければ適宜調節してお使いください。

Sakurayaさん、早速ありがとうございました。
私のアピアランスがおかしいわけではないようで安心しました。

加えてuserChrome.cssのご紹介ありがとうございました。
まったく知識がなく対応は無理かと思いましたが、過去記事を参考に自分なりに作ってみましたところ、ヘッダーバーの直下に灰色の区切り線を表示することができました。
ラインの幅をピクセル単位で変更できたりするんでしょうか。
構文が全然わからないので、またおいおい勉強してみます。
ありがとうございました。
投稿記事 Posted: 2018年10月16日(火) 20:13
  記事の件名:  Re: ヘッダーバーのアピアランス  引用付きで返信する
こんばんは。
引用:
このようなアピアランスが正しい状態でしょうか。
私の手元でも同じような感じなので、Thunderbirdの開発者たちが意図した見た目であるかという意味でなら正しい状態だと思います。
試してみたところ、userChrome.cssを作成して以下の要素に対してborder-bottomを指定すると効果がありました。よろしければ適宜調節してお使いください。
コード:
#threadCols {
   border-bottom: thick outset darkgray !important;
}
投稿記事 Posted: 2018年10月16日(火) 18:39
  記事の件名:  ヘッダーバーのアピアランス  引用付きで返信する
OS: Windows 10 Pro 64bit SP1
Thunderbird version: 60.2.1 (32bit)


現在上記バージョンのThunderbirdを使用しておりますが、ヘッダーバー(正式な呼称は存じ上げません。メールリストの上段にあって「件名」、「通信相手」、「送信日時」等が表示されているバーです)がメールリストと見分けにくいと感じています。
添付画像をご参照いただければお分かりのように「件名」が表示されたヘッダーバーと(ぼかしを入れた)メールリストの部分の背景が同じ白色で、かつ間に区切り線などがありません。
このようなアピアランスが正しい状態でしょうか。
ちなみにデフォルト以外のテーマは使用しておりません。
またアドオンをすべて無効にしても変化ありません。
以前はヘッダーバーの部分に区切り線のようなものがあったという記憶があったためお聞きする次第です。
皆様の使用環境ではどのように表示されているかご教示のほどよろしくお願いいたします。


添付ファイル:
TB6021-32.jpg
TB6021-32.jpg [ 71.27 KiB | 表示数: 4128 回 ]
投稿記事 Posted: 2018年10月16日(火) 15:55

All times are UTC + 9 hours


ページ移動:  
Powered by MozillaZine.jp® Forum Software © phpBB Group , Almsamim WYSIWYG
Japanese translation principally by ocean