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



All times are UTC + 9 hours

新しいトピックを投稿する トピックへ返信する  [ 3 件の記事 ] 
作成者 メッセージ
投稿記事Posted: 2015年10月07日(水) 14:06 
黒いサイトをレスポンシブデザインビューで表示すると
境界の判別が付きづらく不便です。

開発ツールのテーマをlightに変更てみましたが、レスポンシブデザインビューの背景色はそのままでした。
about:configなどから変更する方法はありますでしょうか?

_________________
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:41.0) Gecko/20100101 Firefox/41.0


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2015年10月08日(木) 16:20 
オフライン

登録日時: 2013年12月26日(木) 09:33
記事: 686
お住まい: 太陽系、地球、日本、ふてニャン県
レスポンシブデザインビューを使えて、開発ツールのテーマをlightに変更、なんてなことを簡単に試せるんだから、
DOM Inspectorで背景となっている要素とか背景色のCSSの設定を見つけ、
Custom Buttonsというアドオンでツールバーにボタンを追加し、ボタンのスクリプトで背景色をトグル、
とかいうのは、楽にできそう...
XULの要素のIDを見つければ、document.getElementById("xx").style.backGroundColor="#FEFEFE" ; ってなことが可能です。


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2015年10月08日(木) 20:34 
※質問するときは、「フォーラムの利用に関するご案内」、とりわけ「質問するときは」に目を通し、OS の種類や Firefox のバージョンといった使用環境についての最低限の情報を書き添えることをお勧めします。

横から失礼します。WADA さんからのアドバイスの延長線上の話なのですが......。

about:config から変更する方法は知りませんが、背景色など静的(Static)な要素ならユーザースタイルで調整できるかと思います。
ごくシンプルなものですが、例えば次のような感じです。

/* レスポンシブモードで開いたタブの背景色 */
.browserContainer[responsivemode] {
background-color: teal !important;}

注意すべき点は、レスポンシブデザインビューはタブ内に表示されますが、Content 要素ではなく Chrome 要素だということです。
ユーザースタイルは userChrome.css に書いてください。
([アドオンマネージャ] や [トラブルシューティング情報] などもタブ内に開かれ、これらのカスタマイズは userContent.css で処理しますが、レスポンシブデザインビューは、これらとは異なることに注意してください。)

ただし、ユーザースタイルで背景色を固定すると、それと同じような背景色の Web ページを表示したときは、また境界がわかりにくくなります。
WADA さんからご助言があるように、表示するページの背景色によって、レスポンシブモードで開いたタブの背景色を切り替えられるトグル式のツールバーボタンを作るといったことができるなら、そのほうがいいかもしれません。

あるいは、元から指定されているボックスシャドーの初期値であるブラックの色を他に変更することで、暗色の Web ページを読み込んだときの境界を判別しやすくできるかもしれません。これで納得できるのなら、必ずしも上記のスタイルを使わなくても(つまり背景色は既定のままでも)かまわないと思いますし、2つを組み合わせて自身が見やすいと思う工夫をするのもアリだと思います。
(例)
/* レスポンシブデザインビューのボックスシャドー指定 */
.browserStack[responsivemode] {
box-shadow: 4px 4px 12px yellow !important;}

いずれも、上記の配色等は仮の指定です。分かりやすさのため標準 16 色のカラーネームで書いてありますが、RGB 16 進でも 10 進でもユーザーの好みで指定してください。

とりあえず以上です。的外れだったらすみません。

_________________
Mozilla/5.0 (Windows NT 6.2; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0


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

All times are UTC + 9 hours


オンラインデータ

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


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

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