MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

Stylishの使い方
https://forums.mozillazine.jp/viewtopic.php?f=16&t=15620
ページ 11

作成者:  mNeji [ 2015年8月30日(日) 18:04 ]
記事の件名:  Stylishの使い方

【経緯】

私は、以前教えて頂いたStylishに「お試し」「Check for Errors」があり感動しています。

 # なお、前回作成した2つの.cssは、.css.backと改名し、中身をStylishに書き込み保存しました。

この変更で、「メッセージ・ペイン」は、
 •濃紺のバックグランドで灰色の文字の色付けで、
 •好みのフォントと、
 •好みの行間、文字間
となっていて満足です。

今後ボチボチと手を入れたいのは、フォルダ・ペイン、スレッド・ペイン、ヘッダ・ビュー・ツールバー、ヘッダ・ビューの色をメッセージ・ペインの色に同調した暗めの色彩で、かつ見やすく色分けをする事です;
 •特にフォルダ・ペインとスレッド・ペインは、暗めの色彩でありながら、一行ごとに濃淡を付けたい、
 •ヘッダ・ビュー・ツールバーには、もう少し配置ボタンの数を増やしたいし、
 •ヘッダ・ビューはもう少しコンパクトな表示にしたい。


当然「DOM Inspector」の使い方の練習も必要でしょうから、気長にトライする積りです。


【本題】

Stylishのエディタのフォントは余りにも小さすぎです。今回は外部エディタで書いていた.cssのコピーでしたのであまり問題でなかったのです。

そこで、
•Stylishから外部エディタを呼び出すとか、
•Stylish自身で、フォント・サイズ、フォント種類、行間を制御する、
とかの方法がないかと探しましたが分かりませんでした。

他の方法でも結構ですので、対処法をお教えくださると幸いです。

作成者:  aides [ 2015年8月31日(月) 03:18 ]
記事の件名:  Re: Stylishの使い方

Stylishのエディターの文字関係のCSSを適応するには以下をStylishに記述すれば良いかと思います。

@namespace url(http://www.mozilla.org/keymaster/gateke ... s.only.xul);
@-moz-document url("chrome://stylish/content/edit.xul") {
#name,
#editor{
フォント・サイズ、フォント種類、行間等の指定。
}
}

作成者:  mNeji [ 2015年8月31日(月) 08:57 ]
記事の件名:  Re: Stylishの使い方

aidesさん、

コメントありがとうございます。

まだ完全に理解できていませんが、雰囲気が感じられるようになりました。これを元に検索やトライ&エラーをしてみます。

作成者:  偶然的通行人 [ 2015年8月31日(月) 09:06 ]
記事の件名:  Re: Stylishの使い方

※質問するときは、「フォーラムの利用に関するご案内」、とりわけ「質問するときは」に目を通し、OS の種類や Thunderbird のバージョンなどの使用環境についての最低限の情報を書き添えることをお勧めします。

横から失礼します。

mNeji さんが書きました:
Stylishのエディタのフォントは余りにも小さすぎです。
(snip)
・Stylish自身で、フォント・サイズ、フォント種類、行間を制御する、
とかの方法がないかと探しましたが分かりませんでした。

Stylish 自身の UI デザインも、ユーザースタイルである程度コントロールすることが可能です。
即席ですが、サンプルを作りましたので参考にしてください。

コード:
/* Stylish の標準エディタの文字や行間、配色などのカスタマイズ */
@-moz-document url-prefix("about:stylish-edit") {
 #internal-code > .textbox-input-box {
  font-family: "Source Han Code JP L";
  font-size: 16px;
  line-height: 150%;
  background-color: navy;
  color: silver;
  padding: 8px;
 }
}

これは「おまけ」...。
コード:
/* Stylish の標準エディタの、[名前] の入力欄の高さと文字サイズ */
@-moz-document url-prefix("about:stylish-edit") {
 #name > .textbox-input-box {
  height: 24px;
  font-size: 140%;
  font-weight: bold;
 }
}

(説明)
納得できるなら、そのまま Stylish に取り込んで(保存して)かまいません。
CSS のプロパティと値は、ご自身の希望に適うよう、取捨選択または変更してください。
 ・セレクタ {プロパティ: 値;} が基本構造です。
 ・Namespace は適宜補ってください。Stylish から [XUL 名前空間を標準とする] で簡単に挿入できます。
 ・「おまけ」の方の font-size は、本題の方とは違う値の書き方をしてみました。バリエーションがあることの例です。

(補足)
ぼくは現在、Stylish を常用していません。上記は、Stylish を一時的に導入し、DOM Inspector でセレクタ等を調べ、Stylish の標準エディタに反映されるかどうかを確認したものです。久しぶりに Stylish を使ったのですが、初期のころの Stylish とは見た目からして随分変わっていました。なので、後述する userstyles.org の Help なども参考にしました。

基本的にアドオンの使い方は、そのアドオンの作者サイトや AMO (Addons.Mozilla.Org) の当該ページにあるサポート情報などを足掛かりに情報を収集するのがよいと思います。

インストール後の Stylish の画面に「Stylish の使い方に関する情報は userstyles.org をご覧ください。」と書いてある userstyles.org に、Stylish のヘルプ記事がありますし、多種多様なユーザースタイルが投稿されています。その中にも上記と同じようなスタイル(より正確な?)があると思います。
(ただし、古いバージョンの Stylish や Firefox 、Thunderbird 向けのスタイルも混じっているはずなので、適用時には注意してください。)

また、【経緯】で書かれているフォルダペインやスレッドペインまわりのことについても、そこに公開されているユーザースタイルをそのまま導入して部分的に調整するという方法もありますし、それらの CSS を参考にご自身で工夫しながら書き下ろすこともできるでしょう。(ヘッダビューまわりについては、CompactHeader という定番のアドオンで多くを解決できるでしょう。)
(参考例)・Thunderbird themes and skins
https://userstyles.org/styles/browse/thunderbird

体系立てて学ぶことは重要ですが、実践的な "慣れ" もそれなりに大事なので、Stylish の公式サイト(userstyles.org)を活用なさることをお勧めしておきます。
このサイトは英語ですが、英語が苦手でも Google その他の翻訳サービスを駆使すれば、概略はたどれると思います。(ぼくも英語はダメダメですが、機械翻訳などの助けを借りながらやっています...。)

とりあえず以上です。的外れだったらすみません。
ここで示したサンプルにある間違いの指摘や、もっと正確でエレガントなスタイルの紹介を歓迎します。

(余談)
本トピックの内容は、アドオンを使って Thunderbird をカスタマイズする話ではなく、アドオンそのもののカスタマイズについての質問が本題になっています。
カテゴリ的に、[掲示板トップ ≫ 相互ユーザサポート ≫ Mozilla Thunderbird] でいいのか、[掲示板トップ ≫ 相互ユーザサポート ≫ 拡張機能・テーマ] のほうがいいのか、移動するかどうかの判断を管理者にお任せします。

mNeji さん、慣れないうちは間違うこともあると思いますが、フォーラムの利用案内などにも目を通し、推奨されている条件を尊重するよう心がけていただくと、ありがたいです。
faq.php?mode=forum

作成者:  mNeji [ 2015年8月31日(月) 12:09 ]
記事の件名:  Re: Stylishの使い方

纏めて返信させて頂きます。

aides
さん、

ご提案のcssとして;
コード:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url("chrome://stylish/content/edit.xul") {
#name,
#editor{
font-family: "Source Han Code JP" !important;
font-size: 18px !important;
line-height: 1.9;
letter-spacing: 0.02em;
}
}


を作成ましたが、動作しませんでした。

なんとなく"chrome://stylish/content/edit.xul"を拝見しているうちに、"stylish/"を探したのですがありませんでした。ただ似たものとしては;
~/Library/Thunderbird/Profiles/xxxxxx/stylish.sqlite
がありました。ひょっとするとWinとMacとの違いかと思って検索したものの分かりませんでした。

 # @とか#とかが変数の接頭辞に付くのが驚きでした。早く文法を理解したいです。

で、質問を追加しようと思ってみたところ、

偶然的通行人さんの記事を拝見しました。

まだ理解していませんが、Stylishに別のcssとして入れたところ、動きました。



当面は、上記cssでのStylishで操作の練習を積みながら、ご紹介いただいた参考資料を勉強させていただきます。

作成者:  aides [ 2015年9月01日(火) 03:40 ]
記事の件名:  Re: Stylishの使い方

基本的にOSの差異は無関係な筈ですが、動きませんでしたか。
当方での確認では正常に動作して居ます。
テストで画像を添付します。

添付ファイル:
コメント: 適応後
20150901-033751.png
20150901-033751.png [ 53.61 KiB | 表示数: 30080 回 ]
コメント: 適応前
20150901-033733.png
20150901-033733.png [ 49.41 KiB | 表示数: 30080 回 ]

作成者:  mNeji [ 2015年9月01日(火) 07:35 ]
記事の件名:  Re: Stylishの使い方

引用:
aides さんが書きました:

基本的にOSの差異は無関係な筈ですが、動きませんでしたか。
当方での確認では正常に動作して居ます。
テストで画像を添付します。


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

やはりOS依存性は無いですか。私も後ほど再検討します。

XULの海の中で溺れそうな感じです(泣)。

作成者:  偶然的通行人 [ 2015年9月01日(火) 08:17 ]
記事の件名:  Re: Stylishの使い方

aides さんが書きました:
基本的にOSの差異は無関係な筈ですが、動きませんでしたか。
当方での確認では正常に動作して居ます。

もしかしたら Stylish のバージョンの違いに起因するのかもしれませんね。

mNeji さんと aides さんがお使いの Stylish のバージョンは何ですか。
ぼくが使ったのは現時点で最新の Stylish 2.0.2.1 で、Thunderbird 38.2.0 にインストールし、これを対象に DOM Inspector で調べました。

Firefox や Thunderbird はバージョンによって内部構造が変更されたり、セレクタが変わることがあるので、Web で使われる規格化された一般的な CSS に比べれば変化が大きいと思います。
アドオンもそうです。アドオン自身の刷新もあれば、Firefox や Thunderbird の変更に応じてアドオンも仕様を変えることがあるからです。
もっとも、どんな働きをするアドオンかで違いはあり、シンプルな機能のものはほとんど変更のないアドオンもあります。

Stylish の場合、現行の 2.0.x 系とそれ以前の 1.4.x 系では、だいぶ違いがあるはずです。

DOM Inspector で Stylish を調べると、@-moz-document で指定される適用対象の URL が、
1.4.x 系では "chrome://stylish/content/edit.xul" となっていることがわかります。
一方、2.0.x 系では "about:stylish-edit" になっていました。

このあたりの違いが、結果に反映されているのかもしれませんね。

(補足)
バージョン差による仕様の違いで、あるユーザースタイルが、Aさんのところでは正常に動作し、Bさんのところでは動作しない、ということが起こりえます。
導入しているアドオン等によってセレクタ情報などが上書きされることもありますから、"どんな環境でもこの CSS で 100 %いける" とはいえないケースがあります。
既存のユーザー環境内でカスタマイズされている事項が複雑であれば、そのことを考慮しなければならない場面が出てくるかもしれません。
(なので、前便では "サンプル" として紹介し、「納得できるなら、そのまま Stylish に取り込んで(保存して)かまいません」と書きました。)

ユーザースタイルは便利ですが、文字通り ユーザーごとに利用環境の諸条件が異なる ため、当のユーザー環境におけるセレクタ等の適用条件を確認して、そこに対してスタイル指定をおこなう ―― というのが最も確かな方法です。
つまり、どこかに書かれた CSS のソースを引き写しただけでは、正常に動作することもあれば、まったく動作しないか不適切な動作になってしまうこともある、という話です。

例えば、ぼくが先に紹介したサンプルで、@-moz-document url-prefix("about:stylish-edit") の指定がなくても、動作するはずです。
しかしもし、導入されている他のアドオンに #internal-code という ID を使っている部分があれば、そこにもこのスタイルが適用されてしまいます。
なので念のため、Stylish の標準エディタに対してのみ適用するという意味で、@-moz-document の指定がしてあります。
しかし、他のアドオン等に影響がないことが明白なユーザー環境なら、@-moz-document の指定がなくても希望どおりの動作になると思います。

一般的には、あるユーザースタイルを適用する環境条件によっては結果が変わりうる、そういう幅があることを理解しておいてください。
過度なカスタマイズを施していない標準的な条件で Firefox や Thunderbird を使っていて、ユーザースタイルの適用結果をある程度の幅で許容できるなら、userstyles.org などで公開されているスタイルをそのまま導入するだけで、十分な効果を得られると思います。
けれども、あるユーザーが自分にとってベストな結果を確実に得たいなら、いまある自分自身の環境条件に対して最適なスタイルを指定するしかありません。

(長期的視点に立った場合の補足)
現在 Mozilla では、新しいアドオンの仕様(WebExtensions)への移行を進めています。当分(どれぐらいかわかりませんが)は既存のアドオン(XPCOM / XUL 仕様)を普通に使えますが、いずれは WebExtensions 仕様のアドオンに移行していくそうです。
ぼくはこの方面の専門知識を持っていませんが、アドオンの根本的な仕様変更によって、良きにつけ悪しきにつけ様ざまな影響が出ることは想像できます。
末端ユーザーの立場で、この件についても少しずつ勉強しながら、移行前後の混乱(?)に備えておきたいと思ってます。
(参考)・Firefox アドオン開発の未来 | Mozilla Developer Street (modest)
https://dev.mozilla.jp/2015/08/the-futu ... x-add-ons/

とりあえず以上です。

(余談)
Firefox や Thunderbird であれ、アドオンであれ、質問時にバージョン情報を書かない人が多いのですが、バージョンは常に上がりますし、複数のバージョンが併存している時期も出てきます。当然、それらは内部仕様や動作に違いがあると考えるのが妥当です。
その時点で使用しているもののバージョンを明記することは、質問の出発点として、とても大事なことです。

作成者:  mNeji [ 2015年9月01日(火) 08:56 ]
記事の件名:  Re: Stylishの使い方

偶然的通行人さん、

いつもご丁寧な解説ありがとうございます。どのくらいすれば深く理解できるか...。

さて、自分のところでは;
  • Thunderbird 38.2.0
  • Stylish 2.0.2.1-signed
引用:
DOM Inspector で Stylish を調べると、@-moz-document で指定される適用対象の URL が、1.4.x 系では "chrome://stylish/content/edit.xul" となっていることがわかります。
一方、2.0.x 系では "about:stylish-edit" になっていました。



あ、「DOM Inspector」はこのような使い方ができるわけですか。暫く遊んでみます。


追伸:
まだ、宿題が溜まり続けていますが、ステップ・バイ・ステップでトライします。

作成者:  Cai [ 2015年9月01日(火) 17:29 ]
記事の件名:  Re: Stylishの使い方

偶然的通行人 さんが書きました:
(余談)
本トピックの内容は、アドオンを使って Thunderbird をカスタマイズする話ではなく、アドオンそのもののカスタマイズについての質問が本題になっています。
カテゴリ的に、[掲示板トップ ≫ 相互ユーザサポート ≫ Mozilla Thunderbird] でいいのか、[掲示板トップ ≫ 相互ユーザサポート ≫ 拡張機能・テーマ] のほうがいいのか、移動するかどうかの判断を管理者にお任せします。

管理人の Cai です。
本トピックを Thunderbird 相互サポートから拡張機能相互サポートへ移動しました。

作成者:  mNeji [ 2015年9月01日(火) 20:27 ]
記事の件名:  Re: Stylishの使い方

Caiさん、

お手数おかけしました、ありがとうございました。

単純にThunderbirdのcssを操作する質問だからと思いこちらのフォーラムに投稿しました。以後、拡張機能相互サポートで質問させていただきます。

作成者:  aides [ 2015年9月02日(水) 03:31 ]
記事の件名:  Re: Stylishの使い方

一応当方での環境は以下。

Thunderbird/38.2.0 ID:20150813074416
Stylish 2.0.2.1-signed
DOM Inspector 2.0.16
InspectorWidget 4.38.20150523.1-signed

です。

エディタのアドレスは「about:stylish-edit」でも「chrome://stylish/content/edit.xul」でも同一です。

作成者:  mNeji [ 2015年9月16日(水) 08:48 ]
記事の件名:  Re: Stylishの使い方

偶然的通行人さんにご教示いただいた「Stylish自身の設定CSS」のお陰で、Stylishを快適に利用させて頂いております。トライ&エラーの結果を報告します;

コード:
/* custamizeStylish: Stylish自身の設定CSS
----------------------------
原作者: 偶然的通行人さん
投稿日: 2015-08-31(月) 09:06
----------------------------
*/


/* Stylish の標準エディタの文字や行間、配色、パディングのカスタマイズ */
@-moz-document url-prefix("about:stylish-edit")
{
#internal-code > .textbox-input-box
{
/* 文字種類 */
font-family: "Source Han Code JP";

/* 文字の高さ、行間隔 */
font-size: 15px;
line-height: 150%;

/* 配色 */
background-color: #204;
color: #CCD;

/* エディタ画面に対するパディング */
padding: 8px;
}
}


/* Stylishの標準エディタでの[名前]の入力欄の高さと文字サイズとボールド */
@-moz-document url-prefix("about:stylish-edit")
{
#name > .textbox-input-box
{
font-family: "Source Han Code JP";

height: 24px;
font-size: 140%;

font-weight: bold;
}
}


動作の画像;



これを使っているうちに、Stylishのようにすれば、自分好みのエディタができそうな気がしてきました。他方、ターミナルから日常的な記録をメールで製作し、それをThunderbirdで2次元的に表示したり、検索したりするようなアプリケーションが出来ないだろうかと思ったりしています。

当面、Stylishの資料の探索をしてみます。

ご指導、有難うございました。

ページ 11 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/