Style Sheet


Emacs-W3 は CSS Style Sheet という手法で 表示のカスタマイズを実現しています. タグごとに使用するフォントや色,サイズなどを指定します.

Style Sheet について理解するには, 実際のファイルを見てみるのが近道です. Emacs-W3 は以下のディレクトリを順に探していきます.

インストールでは stylesheet というファイル名になります. 実際にはそれ以外に stylesheet-lightstylesheet-darklight.cssdark.css という ファイルも検索します. light と dark の違いは,背景が白っぽい色か黒っぽい色かの違いです.

ファイルを見れば,指定の方法はすぐに理解できるでしょう. 例えばデフォルトの Style Sheet では, 50 行めほどのところに次のような記述があります.

@media emacs {
h1,h2,h3,
h4,h5,h6  { text-decoration: underline; }
       h1 { color: rgb(0,255,255); }   // cyan
       h2 { color: rgb(70,130,180); }  // steelblue
       h3 { color: rgb(106,90,205); }  // slateblue
       h4 { color: rgb(135,206,235); } // skyblue
       h5 { color: rgb(0,0,128); }     // navy
       h6 { color: rgb(173,216,230); } // lightblue

strong,em { color: red         }
      dfn { font-style: italic }
 s,strike { color: green       }

} // @media emacs

先頭の @media emacs は, XEmacs 以外の Emacs で表示する際の定義であることを示します. 続いて <h1> から <h6> までは アンダーラインを引くよう指定しています. その後,<h1> から <h6> まで順に 表示色を定義しています. その後には <strong> をはじめとするタグの 表示色の定義があります.

同じタグに対する指定が複数あると,順に追加されます. Style Sheet ファイルは複数ありえますが, 上で書いたディレクトリの順に検索し, 見つかった順に追加していきます. ~/.w3/stylesheet は最後ですから, ここで定義した内容はシステムが持つ設定を上書きします.

Style Sheet を変更する際には,まず個人の Style Sheet を用意しましょう. ~/.w3/stylesheet が既にあれば,それを変更します. なければ,上記のディレクトリのどこかにあるはずなので, それを ~/.w3/stylesheet としてコピーします.

簡単な例として,<h1> タグの色を変えてみましょう. rgb(0,255,255)rgb(255,0,0) にすると, 赤く表示されるはずです. ただし Style Sheet は Emacs-W3 の起動時にしか読み込まれません. 途中で変更する場合は,M-x w3-refresh-stylesheets を 実行します.

nagae は普段 Mule を使う際, 背景色を黒に,文字色を白にしています. しかしこのまま Emacs-W3 を使うと,よく困ったことになります. それというのも,背景色として白を指定し, 文字色を何も指定していないページが多いからです. Emacs-W3 を使用するときだけ色の指定を変えてもよいのですが, これでは通常のエディタとして使用する場合との切替が面倒になります. こんなときは Style Sheet を使ってみましょう.

body	{
	color: black;
	background: gray;
	}

全体の設定を変更するために <body> タグを使用しました. 画面全体でなく,文字を表示している部分だけの背景色が変わるので ちょっと格好悪い表示になりますが, 読めないことはなくなりました. このままでは <h1> などが見にくいので, 適当に変更する必要があります. あとはカーソルの色が変更できれば完璧ですけどね.

Style Sheet については Info ファイルで詳しく説明されていますので, そちらを参照してください. また,ページを表示した状態で M-x w3-display-stylesheet で 現在のページを表示するのに使用した Style Sheet の設定が表示されます.


[Japanese] [English]
[Emacs-W3]
nagae@tk.airnet.ne.jp