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

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

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

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

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

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


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

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

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

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

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

opera_407このように、2ちゃんねるのスレッドの見た目を大幅に改造することもできてしまうぞ。

usercontent.css – Mozilla Firefox まとめサイト


関連記事

2011年08月05日15時03分 公開 | カテゴリー: ネット情報活用 | キーワード: | Short URL
このエントリーをはてなブックマークに追加

最新記事