Opera Mobileのユーザースタイルシートでサイトの見栄えを変更特集その4

Webページの配色やレイアウトは、「スタイルシート」というデータで指定されている。これをブラウザ側で勝手に追加してページの見栄えを改造してしまう機能が「ユーザースタイルシート」だ。小さすぎて見づらいテキストを大きくしたり、不要な部分を非表示にするなど、行きつけのサイトにさまざまな改造を施して、見やすさを向上させられるぞ。

スタイルシートを自分で記述するのは大変だが、ネットで公開されているスタイルシートを入手して使うだけなら簡単だ。改造したいサイト名と「ユーザースタイルシート」などの語句で検索して、ユーザースタイルシートを公開しているサイトを探してみよう。

なお、現在の「あんスマ」（AndroidSmart）トップページをOperaで表示すると、上部の特集一覧のアコーディオンボタンの表示が崩れてしまう。これはアコーディオンのスタイルシートに標準規格にない機能が使われており、Opera向けの定義が記述されていないのが原因だが、ユーザースタイルシートを導入すれば、崩れないように修正できるぞ。

まず、スタイルシートをテキストエディタに入力する。AndroidSmartの表示の崩れを直すには、以下のスタイルシートを入力すればいいぞ。

.easy-accordion dt{
-o-transform: rotate(-90deg);
-o-transform-origin:10px 10px;
top:225px;
}

記述したスタイルシートを、分かりやすい名前の後ろに「.css」を付けた名前で保存しよう。保存場所はどこでもよいが、SDカード直下に作成したOpera Mobileの設定ファイル用のフォルダ内に、「css」などの名前でサブフォルダを作成し、その中に保存するといいぞ。

次に、「Opera Mobileのサイト別設定機能でJavaScriptやモバイル表示の有無を制御」で作成した「override.ini」を開き、スタイルシートを適用したいドメインのセクションに、「User Prefs|Local CSS File=/sdcard/opera/css/FILENAME.css」のような行を記述しよう。(「FILENAME」の部分は実際のファイル名に置き換える)

AndroidSmartのトップページの特集一覧は、標準状態のOperaではこのように表示がおかしくなってしまうが……

ユーザースタイルシートを使えば、このように正しく表示させられるぞ。

Firefoxまとめサイトの「usercontent.css」のページなど、ネット上にはユーザースタイルシートを公開しているページが多数存在するので、行きつけのサイトに対応したスタイルシートを探して使ってみよう。Firefox用の定義例では、「@-moz-document」という構文が使われていることがあるが、Opera Mobileでは不要なので、その後ろの「{」から対応する「}」までの間の部分だけをコピーして使おう。