― 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: レスポンシブデザインビューの背景色を変更する方法  引用付きで返信する
※質問するときは、「フォーラムの利用に関するご案内」、とりわけ「質問するときは」に目を通し、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 進でもユーザーの好みで指定してください。

とりあえず以上です。的外れだったらすみません。
投稿記事 Posted: 2015年10月08日(木) 20:34
  記事の件名:  Re: レスポンシブデザインビューの背景色を変更する方法  引用付きで返信する
レスポンシブデザインビューを使えて、開発ツールのテーマをlightに変更、なんてなことを簡単に試せるんだから、
DOM Inspectorで背景となっている要素とか背景色のCSSの設定を見つけ、
Custom Buttonsというアドオンでツールバーにボタンを追加し、ボタンのスクリプトで背景色をトグル、
とかいうのは、楽にできそう...
XULの要素のIDを見つければ、document.getElementById("xx").style.backGroundColor="#FEFEFE" ; ってなことが可能です。
投稿記事 Posted: 2015年10月08日(木) 16:20
  記事の件名:  レスポンシブデザインビューの背景色を変更する方法  引用付きで返信する
黒いサイトをレスポンシブデザインビューで表示すると
境界の判別が付きづらく不便です。

開発ツールのテーマをlightに変更てみましたが、レスポンシブデザインビューの背景色はそのままでした。
about:configなどから変更する方法はありますでしょうか?
投稿記事 Posted: 2015年10月07日(水) 14:06

All times are UTC + 9 hours


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