読者です 読者をやめる 読者になる 読者になる

はりをきば

そこにピカマンがいる限り 私はテイッハットウッをやめない


Caution!!
この日記はバカな私(はりを)が何かを忘れない為に、バカの一つ覚えの如く色んな記事を投稿しています。…が、
あくまでもただの備忘録のひと握りに過ぎず、情報の信憑性や真偽までは保証していません。
極力正しい情報をまとめているつもりですが、万一誤った記事の内容を実行しトラブル等が発生しても
当方は如何なる責任を負いません。自己責任でご利用ください。

以上に同意する方のみ、この雑記帳の閲覧をお願いします。

初めての方はこちらも併せてお読みください。このブログについて (About)


…ちゃ、ちゃんと予防線張ったからな!! ホント何があっても知らねーからな!!!(小学生並の言い訳)

予防線(☢Caution!!☢)の表示
テキスト全般の表示に使うフォント (大抵は「メイリオ」か「ヒラギノ角ゴ ProN W3」) (マルチバイト文字はSource Han Sansと同じ) (マルチバイト文字はNoto Sansと同じ)
ソースコードの表示に使うフォント
ピカマンロケットの効果音

設定を保存キャンセル

Firefoxのツールチップの色合いを変えてみる

Firefox HTML / CSS

f:id:Gutyan:20131230001856p:plain

【追記】
URLツールチップのCSS修正しますた。
暗背景のサイトだと見づらくなるので外枠に白線つけてみますた。


FirefoxのツールチップはデフォルトでIEやChromeと同じ
白背景に黒字というシンプルなものだが、白背景のサイトだと見辛い。
f:id:Gutyan:20131230010409p:plain

ってなわけで

暗背景に変えてみた。
f:id:Gutyan:20131230002228p:plain
URLツールチップの方はフォントサイズを一回り大きくし、右上の角を丸くした。
気持ち程度グラデーションと透過をかけてある。

変更方法

言うまでもなくStylishを使用。
(userChrome.cssだと管理が面倒なので)

URLツールチップ

左下のURLツールチップにはstatuspanel-labelという
クラスが割り振られてるのでそこを弄る。

statuspanel > hbox.statuspanel-inner > label.statuspanel-label {
	background: linear-gradient(45deg, rgba(22, 22, 22, 0.9), rgba(99, 99, 99, 0.9)) !important;
	border-right: 1px solid whitesmoke !important;
	border-top: 1px solid whitesmoke !important;
	border-top-right-radius: 4px !important;
	color: whitesmoke !important;
	font-family: Verdana, メイリオ !important;
	font-size: 14px !important;
	line-height: 0 !important;
	margin: 0 !important;
	padding: 4px !important;
}

statuspanel > hbox.statuspanel-inner > label.statuspanel-label[mirror="true"] {
	background: linear-gradient(315deg, rgba(22, 22, 22, 0.9), rgba(99, 99, 99, 0.9)) !important;
	border-left: 1px solid whitesmoke !important;
	border-right: 0 !important;
	border-top-left-radius: 4px !important;
	border-top-right-radius: 0 !important;
}

あくまでもカスタマイズの一例。フォントとか色とかはお好みで。
(Macの人は「Verdana, メイリオ」部分を「"ヒラギノ角ゴ ProN W3"」に変更)

titleツールチップ

title属性のある要素にマウスオーバーした時に出てくる
ツールチップのスタイルを弄りたい場合、
tooltipという要素に対して指定する。

tooltip {
	background: linear-gradient(rgba(33, 33, 33, 0.9), rgba(77, 77, 77, 1), rgba(33, 33, 33, 0.9)) !important;
	border: 2px solid black !important;
	border-radius: 4px !important;
	color: whitesmoke !important;
	font-family: Verdana, メイリオ !important;
	font-size: 12px !important;
	padding: 4px !important;
	-moz-appearance: none !important;
}

あくまでも一例(ry


ここでちょっとつまづいた。
普通にCSSを書いたら何故か背景色やボーダーが適用されず1時間くらいハマった。


んで、わかったことは
Firefox独自要素にスタイルを適用する場合、
-moz-appearance: none !important;を指定しないと
一部のスタイルが無効化される、ということ。


このappearanceというプロパティ、CSS3から加わったものだそうで。

-moz-appearance - CSS | MDN

https://developer.mozilla.org/ja/docs/Web/CSS/-moz-appearance

(MDNいつもお世話になってまス。ありがとうMozilla。)
どういう効果があるのかはわかったが
どういう使い方するのかわからん…




…まぁ、↑でドヤ顔でCSS晒した訳だが
本格的に色変えしたいならStylishではなく
テーマという形でもっとちゃんと作った方が良さそう。




テーマか…
ピカマンのFirefoxテーマでも作ろうかな…