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



All times are UTC + 9 hours

新しいトピックを投稿する トピックへ返信する  [ 12 件の記事 ] 
作成者 メッセージ
投稿記事Posted: 2010年10月17日(日) 23:01 
google などのテキストボックスで
オートコンプリート機能により候補が現れ
反転色のカーソルにより候補を選択できますが、
この反転色の色を変えるにはどのようにすればよいのでしょうか

userChrome.css に書いて変更できるのか
探してみましたがわかりません

やり方をどうかお教えください。


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2010年10月18日(月) 23:31 
userContent.cssにこのような感じのCSSを書いてはいかがでしょうか。

コード:
@-moz-document url(http://www.google.co.jp/) {
.gac_m { color:white !important; background-color:black !important; }
}


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2010年10月18日(月) 23:34 
失礼しました。今の投稿は間違いです。これでは全体の背景色が変更されてしまいます。


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2010年10月19日(火) 05:09 
回答ありがとうございます。
content.css というもので個別に対応する方法もあるのですねー。
勉強になります。

google いろいろバージョンアップするのはいいのですが
候補選択の反転色カーソルが淡い水色になって、見にくくなってしまいました。

yahoo では濃い紺色なので大変見やすいのですが
ソースコードを見るもどの部分を参考にすればよいのかさっぱりでした。

すみませんが引き続きアドバイスをお願いいたします。


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

登録日時: 2008年5月26日(月) 01:41
記事: 1345
お住まい: 冥府
googleの場合の検索フォームのオートコンプリートはデフォルトではoffに成ってるので何とも云えませんが・・・
理論上は「input」要素で「hover」で指定するのが基本だと思いますが、googleの場合は「.lst」に指定しても何も変化が無い(汗

少々観点を変える方法としてはコントラストの強い「テーマ」の適応で解決すると云う方法も在るのでは?
フォームに干渉して影響すると思うのですが・・・
当方は「PitchDark」~ https://addons.mozilla.org/ja/firefox/addon/1529/ ~を適応してますが、結構判り易く成ってます。

根本的な解決では有りませんが、方向性の一つとして提示しました。

_________________

*Windows 10 21H1 64bit/*GoogleJapaneseInput:ATOK2017:MS-IME
Firefox 95.0:Beta 96:Developer Edition 96:Nightly 97.0a1:
Thunderbird 91.4.0:Earlybird 96:Daily 97.0a1:SeaMonkey 2.53.10/2.58a1:
Opera 82.0.4227.23:Google Chrome 96.0.4664.93/98.0.4756.0(Official Build)canary:
SRWare Iron 96.0.4900.0:Lunascape 6.15.2:Avant Ultimate 2020 build 3, 3.17.2020


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2010年10月20日(水) 18:57 
ありがとうございます。

aides さんが書きました:
根本的な解決では有りませんが、方向性の一つとして提示しました。

www.google.co.jp から入力せずに
firefox の検索からやるのですね.....
確かにこれならスキンを変えて見やすくなりますね。
操作性が変わるのは仕方ないですが

実は年配の人間からの要望でしたので
なるべく今までの形でと思いましたがなかなか難しいですね。

でもこのスキン、見やすくていいですね。


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2010年10月20日(水) 19:55 
これで
@-moz-document url-prefix(http://www.google.co.jp/) {
.gac_b:hover td.gac_c { color:white !important; background-color:black !important; }
}


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

登録日時: 2008年5月26日(月) 01:41
記事: 1345
お住まい: 冥府
いや・・・
検索バーからのでも、サイトのからでも候補はテーマの文字色・背景色と同じに成ってます。
又、カーソルが重なった時の「hover」の挙動もナビゲーションツールバーと同じ扱いに成ってますから・・・

_________________

*Windows 10 21H1 64bit/*GoogleJapaneseInput:ATOK2017:MS-IME
Firefox 95.0:Beta 96:Developer Edition 96:Nightly 97.0a1:
Thunderbird 91.4.0:Earlybird 96:Daily 97.0a1:SeaMonkey 2.53.10/2.58a1:
Opera 82.0.4227.23:Google Chrome 96.0.4664.93/98.0.4756.0(Official Build)canary:
SRWare Iron 96.0.4900.0:Lunascape 6.15.2:Avant Ultimate 2020 build 3, 3.17.2020


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2010年10月21日(木) 06:53 
>>aides さん
>検索バーからのでも、サイトのからでも候補はテーマの文字色・背景色と同じに成ってます。

...なぜかうちでは別になっているようです。不思議です
[/url]


>>tet さん
>>A さん

C:\Users\ユーザ名\AppData\Roaming\Mozilla\Firefox\Profiles\xxxx.default\chrome
の下に、userContent.css を作り試してみました。

すごい!!願いが叶いました!
これで iGoogle であきらめていたテーマが使えます。サイト側の問題なのに
コントロールできたのには感服です。きっと喜んで使ってもらえます。

ただ...マウス操作ではOKで、カーソルキーではNGなのが惜しいであります。
一応、カーソルキーでも操作できないか私も探してみたいと思います。

おかげさまで大変たすかりました。みなさま本当にありがとうございました。
簡単ですがお礼申し上げます。


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2010年10月21日(木) 09:10 
すでに解決済みと見ていい段階ですが、ちょっと横から失礼します。
ぼくも、Web 検索でのオートコンプリートは通常オフにしているので、あまり自信はないのですが......。

hover(と文字色の指定)を省略しただけですが、下記ではどうでしょう。カーソルでの選択も効きませんか。
コード:
/* Google 検索のオートコンプリートのドロップダウンリストの選択背景色 */
@-moz-document url-prefix("http://www.google.co.jp/") {
.gac_b td.gac_c {background-color: red !important;}
}

ここではサンプル的に目立たせるためわざと「red」で指定してありますが、実際の使用ではご自身の好みの色を指定してください。16 進コード指定でも RGB 指定でもかまいません。文字色も変えたいなら A さんのコードを参考に組み合わせを工夫してみてください。

また、最初に tet さんからご提案があったように、選択背景色はそのままにドロップダウンリスト全体の背景色と文字色を変更することで、相対的に選択時の視認性を向上させることも可能でしょう。
ポイントは、全背景色に選択背景色が埋没せず、選択・非選択どちらでも可読性を確保できる文字色という三者の配色バランスでしょうか。
例えば、選択背景色は Google の指定をそのまま活かして、
コード:
/* Google 検索のオートコンプリートのドロップダウンリストの全背景色と文字色 */
@-moz-document url-prefix("http://www.google.co.jp/") {
.gac_m {color: navy !important; background-color: gray !important;}
}

とか......。

@-moz-document url-prefix("http://www.google.co.jp/")
は、http://www.google.co.jp/ を先頭に含むすべてのページを対象にすることを指定しています。
したがって、http://www.google.co.jp/search?hl= ~ などの検索結果のページに対しても有効です。
しかし、http://www.google.com/ など先頭の指定 URL に一致しないサイトにはこのスタイルは適用されません。
  | ダブルクォーテーションは、あってもなくても機能するようですが、
  | 本当はどっちが望ましいのかよくわかりません...。

(補足)
Firefox で表示された Google の検索ページのスタイルと、Firefox のインターフェイスの一部を構成する検索バーのスタイルは別物だと考えてください。(スタイルの書式は似たようなものですが......。)
userChrome.css は、Firefox 本体のユーザーインターフェイスのスタイルをカスタマイズするときに使われます。
userContent.css は、Firefox のコンテンツエリアに表示される内容(通常は Web ページ)のスタイルをカスタマイズするときに使われます。
今回のご質問は、Firefox 本体の検索バーではなく、Firefox で表示した Google の Web ページの話なので、 userContent.css での対応になります。


以上です。間違ってたり余計な話だったらすみません。


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2010年10月21日(木) 12:56 
>偶然的通行人さん
回答ありがとうございます。
おかげさまで目的を達成できました!! :lol: :lol: :lol:

/* Google 検索のオートコンプリートのドロップダウンリストの選択背景色 */
@-moz-document
url-prefix(http://www.google.),
url-prefix(http://image.google.),
url-prefix(http://video.google.)
{
.gac_b td.gac_c {
color: white !important;
background-color:darkblue !important;}
}


>(補足)
>Firefox で表示された Google の検索ページのスタイルと、

ご心配いただいた内容はすべて的を得ております。勉強になります。
tet さんの内容を何気に.gac_b td.gac_cに変更したところ、
偶然にも思い通りにできました。URLもクォーテーションなしにできました。

ただ、ワイルドカードの類は使えないようなで、また省略は.comなどの後半部分
のみとなるようで上記の形になりました。

一年間悩んでいた問題があっさりと解決できました。
みなさま本当にありがとうございました。


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

登録日時: 2008年5月26日(月) 01:41
記事: 1345
お住まい: 冥府
解決した旨良かったですね。
当方ではweb上のフォームのオートコンプリート等やコンキストメニューの背景色等がテーマのソレとは違ってた場合は別のアドオンの影響が関係してました。
因みに「CuteMenus」~ https://addons.mozilla.jp/firefox/details/1330 ~がソレでした。

一応スクリーンショットは以下を参照で。
http://5.dtiblog.com/a/aides/file/20101021firefox.png

_________________

*Windows 10 21H1 64bit/*GoogleJapaneseInput:ATOK2017:MS-IME
Firefox 95.0:Beta 96:Developer Edition 96:Nightly 97.0a1:
Thunderbird 91.4.0:Earlybird 96:Daily 97.0a1:SeaMonkey 2.53.10/2.58a1:
Opera 82.0.4227.23:Google Chrome 96.0.4664.93/98.0.4756.0(Official Build)canary:
SRWare Iron 96.0.4900.0:Lunascape 6.15.2:Avant Ultimate 2020 build 3, 3.17.2020


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

All times are UTC + 9 hours


オンラインデータ

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


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

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