ノヴム・オペラヌム

既に書いたと思っていたのですが書いていなかったので書きます。

概要

User CSSを利用すればWebページの見栄えを自分の望むように変更できます。例えばアクセシビリティを高めるとか、広告を消すとか、Operaが対応しているCSSでできることならば何でもできます。

手順

1. Operaを終了します。
2. CSSファイルを用意し、適当なディレクトリに置きます(例えば\Application Data\Opera\styles\user.css)。
3. opera.iniをUTF-8対応のテキストエディタで開き[User Prefs]セクションのLocal CSS Fileエントリに指定したいCSSファイルのパスを、[Author Display Mode]セクションのUser CSSエントリの値に1を設定します。

   例:

   [User Prefs]
   Local CSS File=\Application Data\Opera\styles\user.css
   
   [Author Display Mode]
   User CSS=1

手順自体はこれで終わりです。が、これだけでは殆ど使い物になりません。Opera 9ではドメインごとにUser CSSを設定する事ができるので問題は無いのですが、Opera Mobile 8.60ではそれができないのです。つまり、全てのページにUser CSSが適用されてしまう。これでは困ってしまいます。では、どうするか。

CSS Signaturesを使ってみる

CSS Signaturesとは、HTML文書内のbody要素にユニークなIDを設定し、そのIDを含んだセレクタを使うことによって任意のスタイルを適用する範囲を制限するというアイディアです。

具体的に説明します。

my.opera.comに表示される文字を標準より大きくしたい場合があったとします。 my.opera.comのHTML文書内にあるbody要素にmy-opera-comというIDを設定し、CSSファイルに例えばこのように

body#my-opera-com p { font-size: 2em; }

と書くことによって、そのIDを持つHTML文書以外にはスタイルが適用されなくなるようにする事ができるわけです。

これを行うにはUser JavaScriptを利用する必要があります。 HTML文書にCSS Signaturesを追加するUser JavaScriptはRijk氏が作成したものが既にあるのですが、なぜかこれがOpera Mobileでは動かないので私が作り直しました。これを使ってみて下さい。

css-signatures.js

なお、Opera MobileでUser JavaScriptを使う方法についてはOpera for W-ZERO3でUser JavaScriptを利用するを参照して下さい。

んじゃ実際に使ってみます。

例えばdel.icio.usのブックマークのページでサイドバーを消したい場合があるとします。先程のUser JavaScriptを使うことによってdel.icio.usのHTML文書のbody要素に「del-icio-us」というIDが設定されるので、

body#del-icio-us #sidebar { display: none; }

とUser CSSファイルに書けばサイドバーを消せます。

他にも色々できるので是非とも使ってみて下さい。