朝顔日記

Firefox のユーザスタイルシートで背景画像指定

publish
2006-01-19T14:42:10+09:00
tags
はてぶ

Repetitive Restructure - ユーザースタイルシートで背景画像指定ってできないのか にて、Firefox のユーザスタイルシートで背景画像を指定できないのかと困って(?)おられるようなのですが、そうだっけと試してみました。

おそらく、ローカルファイルを指定してもセキュリティ上の理由とやらで駄目だろうということで、web の画像を背景画像にしてみました。userContent.css に以下のスタイルを定義。


@-moz-document domain("cogwheel.vis.ne.jp") {
body, #content{
  background:#333 url("http://diary.noasobi.net/style/fx_bg1.jpg") no-repeat fixed;
  }
.text{
  background:#333 url("http://diary.noasobi.net/style/fx_bg2.jpg") no-repeat fixed;
  color:#fff;
  }
}

最初の @-moz-document というのは、Firefox 1.5 から使えるようになったサイト別スタイルシートを指定するおまじないです。ここらの書き方については、@-moz-documentルール にあるとおりです。

で、実際に適応させてみたところのスクリーンショットのサムネイルは以下のとおりです。

背景画像をユーザスタイルシートに使った Firefox のスクリーンショットのサムネイル

ちなみに、背景画像を web 上に置くと言っても、ローカルにサーバを立てている場合はローカルアドレスでも大丈夫です。

ローカルでサーバを立てていないという場合はデータスキームを使って、css ファイル内に画像を直接記述するという方法もあります。背景画像ではありませんが私が userContent.css で使っているのは、こんなのです。


a[target="_blank"], a[target="_antenna"], a[_base_target="_blank"], a[href^="javascript"] {
  cursor:url("data:image/cur;base64,AAACAAEAFBgQAAAAAADoAQAAFgAAACgAAAAUAAAAMAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///8AAAAAAP///wAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREREREREREREQAAEREREREREREREQAAERERESIiIiIREQAAERERESERESIREQAAEREREiEiISIREQAAEREREiEjMSIhEQAAERERIiEjMyMhEQAAERERIiERMzMiEQAAERESIiIiIzMiEQAAERESEiIiMzMiEQAAEREiEiIiIiIiEQAAERIiEiIiIiIiEQAAERIhEiIiIiEiEQAAEREREiEiEiEiEQAAEREREiEiEiEhEQAAEREREiEiEiEREQAAEREREiEiEREREQAAEREREiEREREREQAAEREREiEREREREQAAEREREiEREREREQAAEREREiEREREREQAAEREREiEREREREQAAEREREREREREREQAAEREREREREREREQAA///wAP4AcAD+AHAA/gBwAPwAcAD8ADAA+AAwAPgAEADwABAA8AAQAOAAEADAABAAwAAQAMQAEAD8ADAA/ABwAPwB8AD8D/AA/D/wAPw/8AD8P/AA/D/wAP5/8AD///AA"), pointer;
}

「Firefox のユーザスタイルシートで背景画像指定」へコメントをつける

書き込み時の挙動について
URI らしき文字列には自動的にリンクが張られます。また "<" や、">" は実体参照化されます。
スパム対策のため、リファラを切っていると投稿できません。

この記事へのツッコミ

1: hYagni (2010-04-11T21:57:53+09:00) hyagni@gmail.com
はじめまして。
私の環境ではURLの指定を
url(file://ローカルのパス)
としても動きましたが、いかがでしょうか。
この記事の永続的 URI ならびに トラックバック ping URI
http://diary.noasobi.net/2006/01/diary_060119a.html