先代のOpera6は、画面表示のためのスタイルシートをワンアクションで作成者モードとユーザーモードを切り替えることができる、非常に優れたブラウザでした。
おかげで当時のOpera6のユーザーは、アクセスしたページがゴマ粒のように文字サイズを小さくした『極小フォント決め打ち』や、淡い色の背景にこじゃれた薄い文字色の『ステルスグレー』といった、訪問者に対する配慮が著しく欠落した前世魔人なサイトであっても、『汝の正体見たり！』とユーザーモードに切り替えるだけでいつでも自分好みの文字サイズと配色を選択することができました。
しかしユーザーモードに設定できるスタイルシートはひとつだけなので、ページによっては文字の大きさだけを変えたり、行間ピッチだけを変えたりできればいいのにと思うこともありました。
Opera6の跡を受けて登場したOpera7は、従来からのユーザースタイルシートの他に別系統で複数のスタイルシートを扱えるようになりました。つまり一つのページに対して複数の異なるスタイルシートから選択したり、あるいは同時に複数のスタイルシートを適用したりすることができるようになり、スタイルシートの応用範囲が飛躍的に広がりました。
さしずめ例のあの番組にたとえるのなら「シリーズ中盤で従来の必殺ワザが通用しない強敵が出現、辛くも窮地を脱出したもののこのままでは敗北は必至なので、滝に打たれたり鉄球のついたクレーン車を相手に特訓をしたりと、厳しい修行を重ねた末に新しい必殺ワザ『七色の外道照身霊波光線（仮称）』を会得した、ダイヤモンドi」というところでしょうか:p。
本稿はそんなきめの細かいスタイルシート制御ができるようになったOpera7のWindows版7.2xを対象に、ユーザースタイルシートを適用させるための手順を、個人的な設定例を基に紹介するものです。工夫次第ではNetscape7/MozillaやIEにも応用できると思います。
IEにスタイルシート切替機能を追加するス切りボ >
なお本稿の内容を実践した結果いかなる損失・問題が発生しようと作者は一切関知しません。うまくいかなくても笑ってリカバリーできる方以外は手を出さない方がよろしいです。
まず二系統あるユーザースタイルシートを区別しましょう。
従来からのメニューバーから［ファイル］＞［設定］＞［フォントスタイル］＞［ユーザースタイルシート］で辿り着いたウィンドウの下の方にある一行入力欄にフルパスで指定するものの方を本稿では便宜上「ユーザーCSS」、もうひとつの新しいユーザースタイルシートの方を「オルト（alternative＝代替）CSS」と呼称することにします。
初期状態では入力欄に［C:\PROGRAM FILES\OPERA7\profile\styles\user.css］とフルパスで設定されているので、本来ならuser.cssというユーザーCSSがデフォルトのユーザーCSSとして存在するハズですが、どういう訳かこの［profile］フォルダ以下には、該当するファイルどころか［styles］フォルダすら見つかりません。
ならばと、検索しても見つからないそのファイルと同じパスになるように、［profile］フォルダ内に［styles］という同じ名前のフォルダを新規に作り、その中にuser.cssという名前にした仮のユーザーCSSのファイルを置いて、ユーザーモードで表示させたところ、とくにスタイルの衝突や不具合が起きることもなく、仮のユーザーCSSで設定した内容がOpera7の画面表示に反映されました。
では『そんなものは初めから存在しない』のかというとそうでもなく、パスはそのままにして仮のユーザーCSSをどかしてみると、今度はデフォルトのユーザーCSSが画面に反映されますから、きっとユーザーからは見えないし触れないだけで、ファイルはどこかに存在するのでしょう。
とりあえず、デフォルトに戻すときはこのパスを入力すれば良いということにしておきましょう。
Opera7で改悪されたかもしれないと思うことのひとつが、デフォルトのユーザーCSSで表示される行間ピッチがOpera6よりも狭くなってしまったことです。
Opera6の行間ピッチが概ねIEと同じ文字高の1.2倍だったとすると、Opera7ではあたかも旧NetScapeCommunicator4.xxのように、1.1倍か1.0倍くらいに狭められています。
そうなったいきさつは知る由もありませんが、行間の空きをゼロにしても行の半分が空白になるアルファベット文化圏と異なり、空間密度の高い文字を多用する漢字文化圏では文字が上下でくっついた文章など、到底読む気になれるシロモノではありません。
個人的には、行間ピッチは問答無用で1.4倍か1.6倍にしたいところですが、文字で絵を描くアスキーアートを表示する機会も考慮すると、まずIEの初期状態並みに行間ピッチを広げておきましょう。
行間ピッチを1.2倍にしたユーザーCSS画面のPNG画像(5.4KB) >
お使いのパソコンのCドライブにopera-cssという名前のフォルダを作って、その中に以下のユーザーCSSファイルを保存して下さい（フォルダ名に不都合があれば適宜読み替えて設定して下さい）。CSS『全部入り』の圧縮ファイルを用意しました。解凍すればフォルダごと全部揃っています。(2004-03-10：追記)
フルパスで表すと、［C:\opera-css\asciiart12.css］となります。
次にメニューバーの［ファイル］＞［設定］＞［フォントスタイル］＞［ユーザースタイルシート］の下の方ある一行入力欄にキーボードから［C:\opera-css\asciiart12.css］と入力するか、カット＆ペーストで貼り付けて下さい。
本来パスさえ正しければCSSファイルはどこにあってもいいのですが、バージョンアップ等でOperaをアンインストールする可能性を考えると、間違って消さないためにも［C:\PROGRAM FILES\OPERA7\］以下には入れない方が良いと個人的には思います。
このユーザーCSSで設定している項目は以下の通り。
ユーザーCSS本体の文字コードはシフトJISです。
Opera7が稼働中にユーザーCSSを変更して画面表示には反映されないときは、一旦Opera7を終了してから再度起動して下さい。終了時に表示中だったページがあれば、再起動後メニューバーの［更新］ボタンを押して下さい。
ユーザーCSSの書式その他に問題がなければ、これで反映されるはずです。
先ほどまでの作業で、ユーザーモードでの行間ピッチが少しだけ広く表示されるようになったはずです。
少しだけ文章が読み易くなったと思いますが、白地に黒文字という配色は清潔で美しいと感じる反面、お使いのディスプレイによっては眩しいと感じる方もいると思います。実は私もそうです。
そこで今度は背景色を少しだけ淡く、明度を下げてみましょう。
［ファイル］＞［設定］＞［ページスタイル］＞［背景の色］で白い四角をクリックするとカラーパレットが出現しますので、適当に眩しくない色を作ってみましょう。
ちなみに私のディスプレイ上では、以下のような濃いめのアイボリーというか山吹色というか、そんなカンジの黄色系に設定してあります。
赤(R):245 緑(G):247 青(B):187
この赤青緑の数値は、スタイルシートで背景色を指定するときにRGBの数値としてそのまま使えます。
例：body{background-color:rgb(245,247,187) !important}
但しユーザー背景色（便宜上そう呼ぶ）を白以外に設定してしまうと、『背景色を指定していなくても問答無用で白い背景が表示されるだろう』と思い込んでいる横着なページでは、作成者モードにしても背景がユーザー背景色になってしまいます。気になる方は元の白に戻すなり、試行錯誤してみて下さい。
これでユーザーモードにしたときの行間ピッチは広くできましたが、初期状態のままでは作成者モードにまでは反映されないので、行間ピッチの指定がないページを作成者モードで表示すると、相変わらず行間ピッチがつまったままです。
そこで行間ピッチを含めたユーザーモードの設定が作成者モードにも反映するようにしましょう。
［ファイル］＞［設定］＞［ページスタイル］＞［表示モード］ボタンをクリックすると、プレゼンテーションモードというダイアログが出ます。作成者モードとユーザーモードが二列、それぞれ同じ項目が表示されるので、［作成者モード］側の［ユーザースタイルシート］と［ユーザーフォントと配色］のチェックボックスにチェックを入れます。
こうすると、作成者モードでもユーザーCSSやオルトCSSが有効になるので、作成者モードでも文字サイズや行間ピッチを変更できるようになります。
［ファイル］＞［設定］＞［ページスタイル］＞［標準の表示モード］からユーザーモードと作成者モードを選択できますが、初期状態では作成者モードになっています。
これをユーザーモードにするとどうなるか？ 実は自分では便利だと思っている機能があって、［ホットリスト］の［ページ情報］を表示したときの背景色が［背景の色］で変更したときの色になるのです。リロードしたらちゃんとユーザー背景色になりました。従ってここのくだりを含めていずれ改稿します。(2003-12-12：追記)
つまり長い文章を読むのにホットリストを使って画面を分割したときにも両方の背景色が同じなので、この方が読んでいてイライラを感じにくいのです。
果たしてこれが私以外の方にとってどれほどの役に立つのかは解りませんが、そういう使い方もできるということです。
それではOpera7で新設されたオルトCSSを設定してみましょう。
Opera7には標準で複数のオルトCSSが用意されていますが、一応試した限りではあまり使い途がなさそうだったので、新規に作ってみました。文字コードはシフトJISです。
先ほど作ってユーザーCSSを入れた［C:\opera-css］フォルダ内にオルトCSSたちも入れて下さい。 自分で試してみたら、個別にチマチマとダウンロードするのは面倒くさいので、『全部入り』の圧縮ファイル作りました。LHA対応の解凍ツール（国産ので対応していないのってあるの？）で展開して下さい。(2003-12-12：追記)
次にOpera7をインストールしたフォルダ（インストール時に変更していなければ［C:\Program Files\Opera7］にあります）の中にOperaDef6.iniというイニシャルファイルがありますので、Windows2000/XPの［メモ帳］で開くか、UTF-8という文字コードに対応したテキストエディタ（今どきのなら大抵は対応しています）で開き、ファイルの下の方にある[Local CSS Files]以下の該当する文字列を書き換えるか、カット＆ペーストして変更して、UTF-8で保存して下さい。
標準のオルトCSSはプルダウンメニューに表示されないよう、行頭に;（セミコロン）を挟んでコメントアウトしました。必要なら番号がダブらないようにして適宜復活させて下さい。
メニューに表示される文字列となる［Name］項目を日本語で書いたのは、日本語を含む2バイト文字も通るということを示したかっただけなので、「センスのないネーミング……」と思った方は任意に変更して下さい。
スタイルが同じで数値が異なるオルトCSSが複数有効になった場合、Nameの番号が大きい方が有効になります。
たとえば［Name 1=行間を広く（1.6）］と［Name 2=行間を少し広く（1.4）］の両方にチェックを入れると、［Name 2］が優先されるので、行間ピッチは1.4倍になります。ですから順番は結構重要です。
<div>要素は茶色の1ピクセルの直線で表示します。<table>要素はアイボリーの1ピクセルの直線で表示します。<tr><th><td>要素は薄いグレーの1ピクセルの破線で表示します。<dt>要素の前後を【】で挟む。<dd>要素を濃いグレーの1ピクセルの破線で表示します。<blockquote>要素を濃いグレーの1ピクセルの点線で表示します。<li>要素を濃いグレーの1ピクセルの点線で表示します。text-indentを用いているページにも有効です。<table>要素内だと文字サイズだけでなく横幅も変化してしまいます。これは純粋に文字サイズのみを変更します。ユーザーCSSと作成者CSSを交互に切り替えたり、一旦どちらかで表示させたページをモード切り替えすると、キャッシュの都合なのか、たまに表示が切り替わらなかったりすることもあります。
そういうときは慌てずに［更新］ボタンを押すか、一旦ユーザーCSSのチェックをはずしてから再度チェックを入れてみて下さい。大抵の場合それでうまく表示されるはずです。
オルトCSSを切り替えるとき、老眼でなくても「的が小さい」と思うことはすくなくないハズ（根拠ナシ）。
ツールバーにアイコンで表示するとすこしだけマシにはなるかもしれません。私は［小さなアイコン画像］を［設定］＞［スキン］＞［サイズ］で120%に拡大して使っています。
