ユーザースタイルシートでGo!

最終更新:
2003-12-12
初出:
2003-12-06

旧Opera6用ユーザースタイルシート >


前説

 先代のOpera6は、画面表示のためのスタイルシートをワンアクションで作成者モードとユーザーモードを切り替えることができる、非常に優れたブラウザでした。

 おかげで当時のOpera6のユーザーは、アクセスしたページがゴマ粒のように文字サイズを小さくした『極小フォント決め打ち』や、淡い色の背景にこじゃれた薄い文字色の『ステルスグレー』といった、訪問者に対する配慮が著しく欠落した前世魔人なサイトであっても、『汝の正体見たり!』とユーザーモードに切り替えるだけでいつでも自分好みの文字サイズと配色を選択することができました。

 しかしユーザーモードに設定できるスタイルシートはひとつだけなので、ページによっては文字の大きさだけを変えたり、行間ピッチだけを変えたりできればいいのにと思うこともありました。

 Opera6の跡を受けて登場したOpera7は、従来からのユーザースタイルシートの他に別系統で複数のスタイルシートを扱えるようになりました。つまり一つのページに対して複数の異なるスタイルシートから選択したり、あるいは同時に複数のスタイルシートを適用したりすることができるようになり、スタイルシートの応用範囲が飛躍的に広がりました。

 さしずめ例のあの番組にたとえるのなら「シリーズ中盤で従来の必殺ワザが通用しない強敵が出現、辛くも窮地を脱出したもののこのままでは敗北は必至なので、滝に打たれたり鉄球のついたクレーン車を相手に特訓をしたりと、厳しい修行を重ねた末に新しい必殺ワザ『七色の外道照身霊波光線(仮称)』を会得した、ダイヤモンドi」というところでしょうか:p。

 本稿はそんなきめの細かいスタイルシート制御ができるようになったOpera7のWindows版7.2xを対象に、ユーザースタイルシートを適用させるための手順を、個人的な設定例を基に紹介するものです。工夫次第ではNetscape7/MozillaやIEにも応用できると思います。

IEにスタイルシート切替機能を追加するス切りボ >

 なお本稿の内容を実践した結果いかなる損失・問題が発生しようと作者は一切関知しません。うまくいかなくても笑ってリカバリーできる方以外は手を出さない方がよろしいです。


ユーザーCSSを設定する

二つのユーザースタイルシート

 まず二系統あるユーザースタイルシートを区別しましょう。

 従来からのメニューバーから[ファイル]>[設定]>[フォントスタイル]>[ユーザースタイルシート]で辿り着いたウィンドウの下の方にある一行入力欄にフルパスで指定するものの方を本稿では便宜上「ユーザーCSS」、もうひとつの新しいユーザースタイルシートの方を「オルト(alternative=代替)CSS」と呼称することにします。

ユーザーCSS設定画面のPNG画像(7.5KB) >

謎のユーザーCSS

 初期状態では入力欄に[C:\PROGRAM FILES\OPERA7\profile\styles\user.css]とフルパスで設定されているので、本来ならuser.cssというユーザーCSSがデフォルトのユーザーCSSとして存在するハズですが、どういう訳かこの[profile]フォルダ以下には、該当するファイルどころか[styles]フォルダすら見つかりません。

 ならばと、検索しても見つからないそのファイルと同じパスになるように、[profile]フォルダ内に[styles]という同じ名前のフォルダを新規に作り、その中にuser.cssという名前にした仮のユーザーCSSのファイルを置いて、ユーザーモードで表示させたところ、とくにスタイルの衝突や不具合が起きることもなく、仮のユーザーCSSで設定した内容がOpera7の画面表示に反映されました。

 では『そんなものは初めから存在しない』のかというとそうでもなく、パスはそのままにして仮のユーザーCSSをどかしてみると、今度はデフォルトのユーザーCSSが画面に反映されますから、きっとユーザーからは見えないし触れないだけで、ファイルはどこかに存在するのでしょう。

 とりあえず、デフォルトに戻すときはこのパスを入力すれば良いということにしておきましょう。

ユーザーCSSを変更する

 Opera7で改悪されたかもしれないと思うことのひとつが、デフォルトのユーザーCSSで表示される行間ピッチがOpera6よりも狭くなってしまったことです。

 Opera6の行間ピッチが概ねIEと同じ文字高の1.2倍だったとすると、Opera7ではあたかも旧NetScapeCommunicator4.xxのように、1.1倍か1.0倍くらいに狭められています。

初期状態のユーザーCSS画面のPNG画像(6.0KB) >

 そうなったいきさつは知る由もありませんが、行間の空きをゼロにしても行の半分が空白になるアルファベット文化圏と異なり、空間密度の高い文字を多用する漢字文化圏では文字が上下でくっついた文章など、到底読む気になれるシロモノではありません。

 個人的には、行間ピッチは問答無用で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設定画面のPNG画像(7.5KB) >

 本来パスさえ正しければCSSファイルはどこにあってもいいのですが、バージョンアップ等でOperaをアンインストールする可能性を考えると、間違って消さないためにも[C:\PROGRAM FILES\OPERA7\]以下には入れない方が良いと個人的には思います。

 このユーザーCSSで設定している項目は以下の通り。

 ユーザーCSS本体の文字コードはシフトJISです。

 Opera7が稼働中にユーザーCSSを変更して画面表示には反映されないときは、一旦Opera7を終了してから再度起動して下さい。終了時に表示中だったページがあれば、再起動後メニューバーの[更新]ボタンを押して下さい。

 ユーザーCSSの書式その他に問題がなければ、これで反映されるはずです。


[背景の色]を変更する

 先ほどまでの作業で、ユーザーモードでの行間ピッチが少しだけ広く表示されるようになったはずです。

 少しだけ文章が読み易くなったと思いますが、白地に黒文字という配色は清潔で美しいと感じる反面、お使いのディスプレイによっては眩しいと感じる方もいると思います。実は私もそうです。

 そこで今度は背景色を少しだけ淡く、明度を下げてみましょう。

 [ファイル]>[設定]>[ページスタイル]>[背景の色]で白い四角をクリックするとカラーパレットが出現しますので、適当に眩しくない色を作ってみましょう。

 ちなみに私のディスプレイ上では、以下のような濃いめのアイボリーというか山吹色というか、そんなカンジの黄色系に設定してあります。

カラーパレット画面のPNG画像(25KB) >

赤(R):245
緑(G):247
青(B):187

 この赤青緑の数値は、スタイルシートで背景色を指定するときにRGBの数値としてそのまま使えます。

 例:body{background-color:rgb(245,247,187) !important}

 但しユーザー背景色(便宜上そう呼ぶ)を白以外に設定してしまうと、『背景色を指定していなくても問答無用で白い背景が表示されるだろう』と思い込んでいる横着なページでは、作成者モードにしても背景がユーザー背景色になってしまいます。気になる方は元の白に戻すなり、試行錯誤してみて下さい。

背景色を変更したユーザーCSS画面のPNG画像(14KB) >


ユーザーモードと作成者モードを融合させる

 これでユーザーモードにしたときの行間ピッチは広くできましたが、初期状態のままでは作成者モードにまでは反映されないので、行間ピッチの指定がないページを作成者モードで表示すると、相変わらず行間ピッチがつまったままです。

 そこで行間ピッチを含めたユーザーモードの設定が作成者モードにも反映するようにしましょう。

 [ファイル]>[設定]>[ページスタイル]>[表示モード]ボタンをクリックすると、プレゼンテーションモードというダイアログが出ます。作成者モードとユーザーモードが二列、それぞれ同じ項目が表示されるので、[作成者モード]側の[ユーザースタイルシート]と[ユーザーフォントと配色]のチェックボックスにチェックを入れます。

 オルトCSSメニュー画面のPNG画像(9.4KB) >

 こうすると、作成者モードでもユーザーCSSやオルトCSSが有効になるので、作成者モードでも文字サイズや行間ピッチを変更できるようになります。

どっちの表示を標準にしよう?

 [ファイル]>[設定]>[ページスタイル]>[標準の表示モード]からユーザーモードと作成者モードを選択できますが、初期状態では作成者モードになっています。

 これをユーザーモードにするとどうなるか? 実は自分では便利だと思っている機能があって、[ホットリスト]の[ページ情報]を表示したときの背景色が[背景の色]で変更したときの色になるのです。リロードしたらちゃんとユーザー背景色になりました。従ってここのくだりを含めていずれ改稿します。(2003-12-12:追記)

 つまり長い文章を読むのにホットリストを使って画面を分割したときにも両方の背景色が同じなので、この方が読んでいてイライラを感じにくいのです。

ユーザーモードを標準にした場合(25KB) >

作成者モードを標準にした場合(26KB) >

 果たしてこれが私以外の方にとってどれほどの役に立つのかは解りませんが、そういう使い方もできるということです。


オルトCSSを設定する

 それではOpera7で新設されたオルトCSSを設定してみましょう。

 Opera7には標準で複数のオルトCSSが用意されていますが、一応試した限りではあまり使い途がなさそうだったので、新規に作ってみました。文字コードはシフトJISです。

CSS『全部入り』

 先ほど作ってユーザー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のメニュー

 標準のオルトCSSはプルダウンメニューに表示されないよう、行頭に;(セミコロン)を挟んでコメントアウトしました。必要なら番号がダブらないようにして適宜復活させて下さい。

 メニューに表示される文字列となる[Name]項目を日本語で書いたのは、日本語を含む2バイト文字も通るということを示したかっただけなので、「センスのないネーミング……」と思った方は任意に変更して下さい。

 スタイルが同じで数値が異なるオルトCSSが複数有効になった場合、Nameの番号が大きい方が有効になります。

 たとえば[Name 1=行間を広く(1.6)]と[Name 2=行間を少し広く(1.4)]の両方にチェックを入れると、[Name 2]が優先されるので、行間ピッチは1.4倍になります。ですから順番は結構重要です。

 オルトCSSメニュー画面のPNG画像(9.4KB) >

オルトCSS12種類+1の特長

ダッシュ1:usr_opera16.css 行間を広く(1.6)
行間ピッチを文字高の1.6倍に広げて表示します。
通常はココにだけチェックを入れておけば事は足りると思います。
ダッシュ2:usr_opera14.css 行間を少し広く(1.4)
行間ピッチを文字高の1.4倍に広げて表示します。
長文の見通しを良くしたいときはこちらの方がいいかもしれません。
ダッシュ3:border.css ワク線を表示
そのページに使われているブロック系要素をワク線で表示します。
<div>要素は茶色の1ピクセルの直線で表示します。
<table>要素はアイボリーの1ピクセルの直線で表示します。
<tr><th><td>要素は薄いグレーの1ピクセルの破線で表示します。
<dt>要素の前後を【】で挟む。
<dd>要素を濃いグレーの1ピクセルの破線で表示します。
<blockquote>要素を濃いグレーの1ピクセルの点線で表示します。
<li>要素を濃いグレーの1ピクセルの点線で表示します。
ダッシュ4:fontcolor.css 脱色
レイアウト・文字サイズを変更せずに配色のみをアイボリー地に黒文字で表示します。
かの『なんたらビルダー』の『どこでも配置モード』で作られたページのように、文字サイズや行間ピッチやレイアウトが絶対指定されていて、画面サイズや解像度が作者の見ているもの以外のものに変更されるかもしれないことを全く考えていないページを表示するとき、せめて配色だけでも地味に表示します。
またユーザーモードでは無視されてしまう、段落を改めるときの一文字空けを全角スペースではなくスタイルシートのtext-indentを用いているページにも有効です。
ダッシュ5:font12.css 文字統一(12pt)
基準となる本文の文字サイズをMS Pゴシックの12ptで表示します。
マウスジェスチャーでCtrlキーを押しながらマウスホイールを回転させても文字サイズを変更することは可能なのですが、<table>要素内だと文字サイズだけでなく横幅も変化してしまいます。これは純粋に文字サイズのみを変更します。
ソースの下の方にはコメントアウトして無効化した記述がムダに長くあります。削除してしまえば短く軽くなるのですが、なぜかそうやって必要な記述だけにしてしまうとOpera側にオルトCSSとして認識されなくなってしまう現象が発生します。今回はバグかどうかの原因究明よりも実を取りました。
ダッシュ6:font13.css 文字拡大(13pt)
基準となる本文の文字サイズをMS Pゴシックの13ptで表示します。
他はダッシュ5と同じです。
ダッシュ7:font11.css 文字縮小(11pt)
基準となる本文の文字サイズをMS Pゴシックの11ptで表示します。
他はダッシュ5と同じです。
ダッシュ8:font10.css 文字極小(10pt)
基準となる本文の文字サイズをMS Pゴシックの10ptで表示します。
他はダッシュ5と同じです。
ダッシュ9:imgcenter.css 画像センタリング
ユーザーモードで画像のみを表示したとき画面の中心に表示します。
Opera7.2xで画像のみを画面に表示したときに作成者モードでは画面の中央に表示されますが、ユーザーモードにすると左上に寄せて表示されてしまうので、擬似的ながら中央寄せを再現してみました。
ダッシュ10:titlecite.css title属性とcite属性をインライン表示
ツールチップで表示されるtitle属性とcite属性を文章中の文字列として表示します。
CSSコミュニティ界隈のひとが作る、W3Cにキッチリと準拠したページ用以外に出番はないかもしれません。
ダッシュ11:targetlink.css リンクサーチ
<a>要素を青い下線で明示します。
リンク先が新しいウィンドを開くときはリンク文字列の末尾に『⇒』を表示します。
ページ内の隠しリンクを発掘するときにでも。
ダッシュ12:gedou.css 外道照身霊波光線!
Opera6時代に使っていたユーザーCSS
ダッシュ1〜11までほぼ全部入り。
番外・ダッシュ0:アスキーアートを表示する
全てのチェックをはずすと、IE同様に行間ピッチが文字高の1.2倍で表示されるので、2ちゃんねるのアスキーアートを表示するときに間延びせずに済みます。

トラブルシューティング

表示が変わらないときは?

 ユーザーCSSと作成者CSSを交互に切り替えたり、一旦どちらかで表示させたページをモード切り替えすると、キャッシュの都合なのか、たまに表示が切り替わらなかったりすることもあります。

 そういうときは慌てずに[更新]ボタンを押すか、一旦ユーザーCSSのチェックをはずしてから再度チェックを入れてみて下さい。大抵の場合それでうまく表示されるはずです。

的が小さい?

 オルトCSSを切り替えるとき、老眼でなくても「的が小さい」と思うことはすくなくないハズ(根拠ナシ)。

 ツールバーにアイコンで表示するとすこしだけマシにはなるかもしれません。私は[小さなアイコン画像]を[設定]>[スキン]>[サイズ]で120%に拡大して使っています。

 オルトCSSメニュー画面のPNG画像(9.4KB) >

 スキン設定画面のPNG画像(8.4KB) >


Presented by あくつ / e-mail:gfd04163@nifty.com / Copyright(c)1999-2015 acts labo〈アーカイブ〉 (無断転載を禁じます)
inserted by FC2 system