今日から新しいデザインになったようですが、本文の表示色(淡いグレイ)が見難いです。下図；
私の常用ブラウズは左の「Firefox」で暗いバックグラウンド設定で見ています。
他方、右は「Safari」で明るい暗いバックグラウンド設定で見ています。
いずれの場合もバックグランド色と本文文字とのコントラストが近すぎるように感じます。コントラストは好みによって設定範囲が広いとは思います。少なくとも数種類のレベルを設定できるようにならないでしょうか？
iPhone 6s Plus, OS X Yosemite (10.10.5), Mac mini(mid 2011), iMac(late 2009)
品川地蔵さん、
無事作成し、動作いたしました。
どれだけ需要があるか分かりませんが一応貼っておきます。
ユーザスタイルシートの第2案です。オリジナルのデザインをできるだけそのままにし、各スレッド本文のフォントウエイト、Content ページのフォントサイズ等をちょっとだけ変更するものです。これでも大分読みやすくなるかなと。あとは各自お好きなように。
仕上がりはこんな感じ。(左:適用前、右:適用後)
ーーーーー
Firefox 用
ファイルの保存場所
~/Library/Application Support/Firefox/Profiles/xxxxxxxx.default/chrome/userContent.css
使い方
※ userContent.css は必ず標準テキスト形式で保存する (RTF はダメ)
※ 使用を止める場合は userContent.css を削除して Firefox を再起動
CSS
/*Apple サポートコミュニティ*/ @-moz-document url-prefix("https://discussionsjapan.apple.com/content"), url-prefix("https://discussionsjapan.apple.com/people") { /* Content と People のページ */ /* タイトル */ .j-td-title > div > a { font-size: 18px !important; } /* タイトル下段 */ .j-browse-content-location, .j-browse-content-location a { font-size: 16px !important; } } @-moz-document url-prefix("https://discussionsjapan.apple.com/thread"), url-prefix("https://discussionsjapan.apple.com/message") { /* Thread と Message のページ */ /* 本文 */ .jive-rendered-content * { font-weight: 400 !important; font-size: 22px !important; } /* jive-pre */ .jive-pre { font-size: 70% !important; } }
ーーーーー
Safari 用
Gridth Code (機能拡張 User CSS の入手先)
下準備
※ Safari のツールバーに何も表示されない場合は、環境設定で「Enable contextual menu」を ON にして、適当なページを右クリック。
※ Safari をリセットすると、User CSS の設定も削除されるので要注意
設定画面はこんな感じ
使い方
機能拡張「User CSS」に以下2項目を設定
その1
Name: ASC - Content URLs: https://discussionsjapan.apple.com/content* https://discussionsjapan.apple.com/people* /* Content と People のページ */ /* タイトル */ .j-td-title > div > a { font-size: 18px !important; } /* タイトル下段 */ .j-browse-content-location, .j-browse-content-location a { font-size: 16px !important; }
その2
Name: ASC - Thread URLs: https://discussionsjapan.apple.com/thread/* https://discussionsjapan.apple.com/message/* /* Thread と Message のページ */ /* 本文 */ .jive-rendered-content * { font-weight: 400 !important; font-size: 22px !important; } /* jive-pre */ .jive-pre { font-size: 70% !important; }
動作確認
・Mac OS X 10.6.8
・Safari 5.1.10
・Firefox 46.0.1
Hiro.Sさん、
ご丁寧な改定版ありがとうございます。不得意なcssですが、そのうちでそSafariのcssが判らなかったのですが、今回の改定版とその事例図を頂いたので、参考にしていただきます。
今回の改定で、準備の項は良く判りました。自分でやったのは適当だったので...。
Hiro.Sさん:
新規設定を試しました。Safariはそこそこです。Firefoxではフォント・サイズは合っているようですが、文字の色が白くなりません。Inspectorでみると、下図；
このときの.cssは；
/*Apple サポートコミュニティ*/
@-moz-document url-prefix("https://discussionsjapan.apple.com/content"),
url-prefix("https://discussionsjapan.apple.com/people") {
/* Content と People のページ */
/* タイトル */
.j-td-title > div > a {
font-size: 22px !important;
}
/* タイトル下段 */
.j-browse-content-location,
.j-browse-content-location a {
font-size: 16px !important;
}
}
@-moz-document url-prefix("https://discussionsjapan.apple.com/thread"),
url-prefix("https://discussionsjapan.apple.com/message") {
/* Thread と Message のページ */
/* 本文 */
.jive-rendered-content * {
font-weight: 400 !important;
font-size: 20px !important;
color: #FFFFFF !important;
}
/* jive-pre */
.jive-pre {
font-size: 90% !important;
color: #000000 !important;
}
}
取り敢えずは、元の設定に戻します。お時間がある時に、ご見解を頂けると有難いです。
まず、はじめに申し上げておきますが、黒背景に白文字とか、NoSquint との併用とかは一切考慮してません。そういう極めて特殊なものは基本的にはご自分で対処してください。
で、ご質問についてですが、NoSquint 2.1.9.1 を入れて試したところ大丈夫でしたよ。今一度設定を見直すなりキャッシュを消去するなりしてみてはどうでしょうか？
それと、NoSquint って結構バギーですね (笑)。レイアウトが崩れたり、画像が欠けたりしてますよ。というか、そもそもこういうのって無理があるんじゃないかな〜。
Hiro.Sによると:
まず、はじめに申し上げておきますが、黒背景に白文字とか、NoSquint との併用とかは一切考慮してません。そういう極めて特殊なものは基本的にはご自分で対処してください。
はい了解しました。特殊例であることは重々承知です。NoSquintに依らずに、自分のcssで「黒背景に白文字」の設定を目指してみます。
で、ご質問についてですが、NoSquint 2.1.9.1 を入れて試したところ大丈夫でしたよ。今一度設定を見直すなりキャッシュを消去するなりしてみてはどうでしょうか？
それと、NoSquint って結構バギーですね (笑)。レイアウトが崩れたり、画像が欠けたりしてますよ。というか、そもそもこういうのって無理があるんじゃないかな〜。
ご指摘については実行してみます。NoSquintはMozzila・Thunderbirdでの『htmlを目に優しく「黒背景に白文字」にするための論議』で教えていただきました。ブック・マークごとに、色、サイズを設定・記録できるので重宝しています。
これにて本スレッドは終了させていただきます。ご教示ありがとうございました。
自己コメントです。
Firefoxの.cssをStylishというaddonに移行しました。基本的にchrome/userContent.cssを取り去り、その中身をStylishにペーストしただけです。名前もそのままuserContent.cssです。
こうしておくと、Firefoxの「メニューバー→ツール→アドオン→Stylish」でcssを修正するだけで、その結果が反映されます。また、文法エラーが賢いので、それまで動かなかったところが、すぐに修正できました。
その結果、見辛かったサイトマップがくっきり表示できました、下図。
理解が深まったら、Technologiesのフォーラムに続きを書きたいと思っています。
フォントの細さ...ということでここに続けますね。
Apple サポートコミュニティのスペイン語版では本文の表示フォントが「Myriad Set Pro」でウエイトが「200」。英語版はまだ新バージョンになってませんが、おそらくこれが基本デザインだと思います。
日本語版ではフォントは「Apple TP」、ウエイトはスペイン語版と同じ「200」。ところが「Myriad Set Pro」と「Apple TP」の「200」を比べると、「Apple TP」の方が細いんですね。
つまり、「Myriad Set Pro」ではちょっと細いかな〜という程度の表示が、「Apple TP」ではさらに細くなり、読みにくくなると。
以下はスペイン語版のトップページ、スレッドの例、同スレッドをこのボードに転載したものです。(2) と (3) を見比べると日本語版の細さが良く分かります。(ユーザスタイルシートは無効にして見てください)
(1) スペイン語版 (トップページ)
https://communities.apple.com/es/welcome
(2) スペイン語版のスレッド
https://communities.apple.com/es/thread/8433
(3) 上のスレッドを Apple TP で (読みにくいです...)
https://discussionsjapan.apple.com/message/100951882#message100951882
で、解決策は...、Apple TP は Apple 社全体で使われてるフォントなので、今後のことを考えると作り直すのが一番でしょうが、そこまでやりますかね？
標準のウエイトである「400」の太さは同じなので、細字の「200」ではなく標準の「400」にしてもらうのが現実的かな〜。Apple の公式ドキュメントでも大見出しは「400」、小見出しは「200」、本文は「400」のようなので説得力はあるかも。
Apple の公式ドキュメントの例 (これなら違和感がない)
QuickTime MPEG-2 再生コンポーネントをインストールできない場合 - Apple サポート
https://support.apple.com/ja-jp/HT203506
# 一応その辺も考えてのユーザスタイルシート第2案だったりします。
# スペイン語版を見ると、本文は細過ぎるかなとも思いますが、全体としてはかっこいいですね。ウエイトを「400」にするとちょっと重い感じもします。また、Lucida Grande だと野暮ったくなってしまいますね。
標準のウエイトである「400」=「normal」ですから、結局のところ、青リンゴさんのコメントと同じことなんですけど、一応、ご参考まで。
Hiro.Sさん、
コメントありがとうございます。漢字はローマ字と比較すると、どうしても構造が複雑なので、文字の太さが細くなりがちですよね。こうして説明されると安心します。
というのも、現在、MacMini(Mid2011)でFirefoxの開発ツールとStylishだけで(NoSquintなしで)、ASCのスレッドを黒地・白文字で、かつ正しく表示すっるようにトライしています(悪い頭が湯気を出しています)。これまでのフォントについての仮設定をお示ししますと；
要は、リンクは太くて大きめ。文章は小さめでちょっと太めです。
結局、表示形式には；
JavaScriptで、これらの3通りを簡単にセットできるといいのですが...。
> これまでのフォントについての仮設定をお示ししますと
ダウンロードされてる Apple TP はウエイトが「200」「400」「600」のものだけですよ。他のウエイトがあるのかは知りませんが、少なくともこのボードでは「500」「800」「900」は無意味では？実際に試しましたが「500」指定は「400」、「800」以上の指定は「600」で表示されてますよ。
ユーザスタイルシートの作成方法は本題から逸れてしまうので、もうこの辺にしときましょう。
> JavaScriptで、これらの3通りを簡単にセットできるといいのですが...。
Firefox はスクリプタブルですが、実際はほとんど何もできません。GUI スクリプティングすら難しいアプリなので、無理かもしれません。JavaScript Bookmarklet ならできると思いますが、いちいちクリックする手間を考えるとこれも現実的ではありません。なので、それぞれの設定をしたブラウザを使い分けるのが最も現実的ではないでしょうか。つまり現状どおりと。
あと、ウェブブラウザをスクリプトで...というのはあまり考えない方が良いと思いますよ。ちなみに Safari 最新版は do JavaScript にも制限が加わったようです。セキュリティを考慮すると妥当だと思います。
標準のウエイトである「400」の太さは同じなので、細字の「200」ではなく標準の「400」にしてもらうのが現実的かな〜。
リンク先の「Apple の公式ドキュメントの例」についても私は大賛成です。フォントが大きければ読みやすいとは限りませんよね。日本語部分において「Apple TP」（というフォントなんですね知りませんでした）は割と好きな書体なのですが、ヒラギノゴシックから急に細くなってしまったので違和感を感じてしまいました。そしてこの本文、Safari の表示を拡大していくと、どうやらグレーではなくて黒のように見えます。細いのでグレーに見えてしまうという錯覚もあるのかもしれません。（このあたり Apple さんに見直して頂けるとありがたいのですが…。）
う〜ん Hiro.S さんの一つ前に返信したかったのに、何故か消えてしまうので最後のスレッドに返信 ⚠
青リンゴ さんによる書き込み:
そしてこの本文、Safari の表示を拡大していくと、どうやらグレーではなくて黒のように見えます。細いのでグレーに見えてしまうという錯覚もあるのかもしれません。（このあたり Apple さんに見直して頂けるとありがたいのですが…。）
文字色は #333 となってるので濃いグレイです。来月は七夕なので、短冊にでも書いておきましょうか。
〜 文字色は #000、フォントウエイトは 400 になりますように 〜
〜 mNeji さんのスタイルシートが出来上がりますように 〜
文字色は #333 となってるので濃いグレイです。
あれ、グレイでしたか…。失礼しました。（そのうち慣れてしまうかもしれませんが、自分＞本文を読む集中力が上がりますように〜）
SyntaxHighlighter の部分に副作用があるので修正。なるべくシンプルにしたいので、単純にフォントサイズの指定を解除しました。トホホ。
# mNeji さんにはもう止めようと言いつつ自分だけ続けるのもなんですからこれで一区切りとします。
Firefox 用
/* Apple サポートコミュニティ */ @-moz-document url-prefix("https://discussionsjapan.apple.com/content"), url-prefix("https://discussionsjapan.apple.com/people") { /* Content と People のページ */ /* タイトル */ .j-td-title > div > a { font-size: 18px !important; } /* タイトル下段 */ .j-browse-content-location, .j-browse-content-location a { font-size: 16px !important; } } @-moz-document url-prefix("https://discussionsjapan.apple.com/thread"), url-prefix("https://discussionsjapan.apple.com/message") { /* Thread と Message のページ */ /* 本文 */ .jive-rendered-content * { /* フォントサイズを指定する際は SyntaxHighlighter のところも忘れずに */ font-weight: 400 !important; } /* jive-pre */ .jive-pre { font-size: 70% !important; } }
ーーーーー
Safari 機能拡張「User CSS」用
その1
Name: ASC - Content URLs: https://discussionsjapan.apple.com/content* https://discussionsjapan.apple.com/people* /* Content と People のページ */ /* タイトル */ .j-td-title > div > a { font-size: 18px !important; } /* タイトル下段 */ .j-browse-content-location, .j-browse-content-location a { font-size: 16px !important; }
その2
Name: ASC - Thread URLs: https://discussionsjapan.apple.com/thread/* https://discussionsjapan.apple.com/message/* /* Tread と Message のページ */ /* 本文 */ .jive-rendered-content * { /* フォントサイズを指定する際は SyntaxHighlighter のところも忘れずに */ font-weight: 400 !important; } /* jive-pre */ .jive-pre { font-size: 70% !important; }
mNeji さん
Apple サポートコミュニティの英語版も新しくなりました。それに対応したスタイルシートもアップされてるので、試してみると良いでしょう。CSS の良い教材になると思いますよ。
Question for Hiroto -- user css
新しいサポート・コミュ二ティの本文表示
