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



All times are UTC + 9 hours

新しいトピックを投稿する トピックへ返信する  [ 8 件の記事 ] 
作成者 メッセージ
投稿記事Posted: 2023年3月24日(金) 13:45 
最近開封通知でメールを送ってくる方が増えました。
その開封通知メッセージが目立たずに見落とすことが多いです。

「userChrome.css」で書式を変更できますか?
過去のBBS(2012年)を参考にコピペしましたが変化がありませんでした。
コピペした内容は以下です。

/* 開封確認バーの背景色 */
#mdnBar {
background-color : orangered !important;
}

/* 開封確認バーの文字の装飾 */
#mdnBarMessage {
font-size : large !important;
color : white !important;
text-decoration : blink;
}

この内容はもう使えないのでしょうか?
新しい方法があれば教えてください。

とにかく目立たせたいです。
よろしくお願いします。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2023年3月24日(金) 14:14 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 4056
さらさくら さん、EarlgreyTea と申します。

出先なので取り急ぎ簡単にコメントします。
デフォルトでは機能が無効化されているので有効にする必要があります。
https://at.sachi-web.com/firefox69_userchrome_css.html

_________________
Mozilla/5.0 (Android 12; Mobile; rv:109.0) Gecko/111.0 Firefox/111.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年3月24日(金) 14:33 
EarlgreyTeaさん返信ありがとうございます。

「Thunderbird」の「userChrome.css」の設定はできてます。
(未読メッセージの表示色の変更など)

開封確認バーを目立たせる部分がうまくできてません。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2023年3月24日(金) 19:19 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 4056
UIはバージョンで刻々と変わっていきますので、都度調べる必要があります。
開発ツールボックスで調べることができます。
やりかたを覚えた方がいいでしょう。
下記を参考にしてください。
viewtopic.php?f=3&t=18518&p=68426#p68426

_________________
Mozilla/5.0 (Android 12; Mobile; rv:109.0) Gecko/111.0 Firefox/111.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年3月24日(金) 20:49 
EarlgreyTeaさん情報ありがとうございます。

開発ツールが存在するのですね
面白そうです

現在違うパソコン使用中ですので週明けに試してみます。
ありがとうございます。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2023年3月25日(土) 02:20 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 4056
さらさくら さん、では改めて見ていきますね。

さらさくら さんが書きました:
過去のBBS(2012年)を参考にコピペしましたが変化がありませんでした。
EarlgreyTea さんが書きました:
UIはバージョンで刻々と変わっていきますので、都度調べる必要があります。

2012年というのはかなり古いですね。
そのBBSの情報がどのバージョンを対象にしたものかわかりませんが、3.1系列のような気もしますし、せいぜい10~17系列といったところ。
現在の102系列とは、完全に別物といってよいかと。

さらさくら さんが書きました:
/* 開封確認バーの背景色 */
#mdnBar {
background-color : orangered !important;
}

/* 開封確認バーの文字の装飾 */
#mdnBarMessage {
font-size : large !important;
color : white !important;
text-decoration : blink;
}

自分で開封確認付きのメールを送って、開発ツールボックスのインスペクターで該当部分を調べてみました。
添付ファイル:
開封確認のインスペクター表示.jpg
開封確認のインスペクター表示.jpg [ 362.88 KiB | 表示数: 4947 回 ]

ご覧のように #mdnBar とか #mdnBarMessage というものは存在しません。
UIの見た目自体がたぶん当時と違うと思いますのでどうしたいのかは正確にはわかりませんが、infobar の背景色をどぎついオレンジにしてメッセージ文字を白抜きにしてブリンクさせる?という感じのようです。

添付画像では infobar を選択した状態です。
その部分の構造はこんな具合です。
コード:
<div class="container infobar" role="alert">
  <span class="icon"></span>
  <span class="content notification-content">
    <label class="notification-message">xxxxx がこのメールの開封確認を求めています。</label>
    <span class="notification-button-container">
      <button class="notification-button small-button" label="開封確認を送付">
        <hbox class="box-inherit button-box">
          <image class="button-icon"/>
          <label class="button-text" value="開封確認を送付"/>
        </hbox>
      </button>
      <button class="notification-button small-button" label="要求を無視">
        <hbox class="box-inherit button-box">
          <image class="button-icon"/>
          <label class="button-text" value="要求を無視"/>
        </hbox>
      </button>
    </span>
  </span>
  <span class="spacer"></span>
  <button class="close ghost-button notification-close" aria-label="閉じる"></button>
</div>

上記を見て、やりたいことを実現できるようなCSSを書いてください。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年3月26日(日) 01:40 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 4056
さらさくら さん、あれから調べてみました。

EarlgreyTea さんが書きました:
そのBBSの情報がどのバージョンを対象にしたものかわかりませんが、3.1系列のような気もします。

ご提示のCSSが期待通りに動作するのは、バージョン5.0~22.0でした。
3.1系列では背景色のみ反映されて文字は変わらず、23.0以降はCSSで「text-decoration: blink」はサポートされなくなっています。
https://caniuse.com/mdn-css_properties_ ... tion_blink
31はすでに現在と同様のUIになってるみたいです。

EarlgreyTea さんが書きました:
やりたいことを実現できるようなCSSを書いてください。

こんな感じでどうでしょう。
コード:
/* 開封確認バーの背景色 */
.infobar[role="alert"] {
  background-color : orangered !important;
}

/* 開封確認バーの文字の装飾 */
.infobar[role="alert"] .notification-message {
  font-size : large !important;
  color : white !important;
  animation: blink 1s ease infinite;
}
@keyframes blink {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年3月27日(月) 14:50 
EarlgreyTeaさん色々調べてくださりありがとうございます。

EarlgreyTeaさんに書いていただいたサンプルを試してみました。
とても気に入りました。
フォントサイズだけ変更させていただいて使いたいと思います。

実は最初、userChrome.cssに追加しても全然反映されず開発ツールをチェックしても反映されてませんでした。

userChrome.cssの先頭の次の記述を削除したらあっさり反映されました。
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
この記述は不要だと何処かで見たような記憶があったので試しに消してみました。
これで良かったのかな?

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

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0


通報する
ページトップ
  
引用付きで返信する  
期間内表示:  ソート  
新しいトピックを投稿する トピックへ返信する  [ 8 件の記事 ] 

All times are UTC + 9 hours


オンラインデータ

このフォーラムを閲覧中のユーザー: なし & ゲスト[59人]


トピック投稿:  可
返信投稿:  可
記事編集: 不可
記事削除: 不可
ファイル添付: 不可

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