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

はりをきば

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


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

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

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


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

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

設定を保存キャンセル

Firefoxで透過画像の背景を市松模様にしてみる

f:id:Gutyan:20131228214416p:plain


FirefoxはIEやChromeと違い、画像を直接開くと中央寄せされ
周りが黒に近いグレーで覆われて表示される。
f:id:Gutyan:20131228214548p:plain


個人的にこの仕様すごく好きだ。
左上だと視線移動が辛い(特に小さい画像)し、
周りが暗背景だから目に優しいし、
白背景の画像の場合どこまでが画像による白なのかがはっきりわかる。


が、強いて言うなら不満が1つ。
背景が透過なのかそうでないのかがパッと見でわからない
(これはIEやChromeもそうだが)
f:id:Gutyan:20131228214951p:plain
このグレー部分は透過なのか? 元からこういう色なのか?

ってなわけで

我らがリーダーStylish様を使用し、透過部分を市松模様にしてみる。

【追記 2017/03/10】
最新のFIrefoxで動かなくなってたのを修正。
尚、記事中の画像は古いまま。

@media not print {
	html > body > img.transparent:hover:only-child {
		background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAGUExURf///8jIyFziA0IAAAAQSURBVAjXY2D4z4AV4RAGAH6/D/FazXqaAAAAAElFTkSuQmCC") scroll repeat left top !important;
	}
}

このユーザースタイルを入れると

単体で直接透過画像(GIFやPNG)を開き、マウスオーバーした際の背景が市松模様になる。
f:id:Gutyan:20131228220247p:plain


どの部分が透過されてるのか一目瞭然。
f:id:Gutyan:20131228220322p:plain


もちろん、透過されてない画像は普通に単色で表示される。
f:id:Gutyan:20131228220418p:plain

サンプル画像

以下にサンプルとしてFirefoxのロゴ画像うpしたんで
上記のユーザースタイルを導入した際の確認にどうぞ。


GIFやAPNGもこの通り。

このユーザースタイルのただ1つの欠点

言うまでもなく、全サイト全ページに適用される為
このユーザースタイルを適用した状態で
bodyタグ直下にtransparentというクラスが付いてる
imgタグが1つだけ存在するページにアクセスすると
その画像の背景が市松模様になってしまう。


そんなページまずないとは思うが、どうしても気になるって人は
Firefoxインストールフォルダにあるomni.jaファイル(実体はJAR=ZIP)を展開し
中にあるTopLevelImageDocument.cssというファイルに
上記のユーザースタイルを書き足し、再度ZIPで固め直すと良い。


但しこの方法はFirefoxの内部ファイルを直接弄る事になる為
バージョンアップした際に本家の新しいomni.jaで上書きされ
変更内容が元に戻ってしまう可能性が高い。



余談

こういう細かいところまで弄れるのはFirefoxの強みってか特権だよね。
私がChromeをメインに使ってないのもこんな感じの理由。