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では不要なので、その後ろの「{」から対応する「}」までの間の部分だけをコピーして使おう。
このように、2ちゃんねるのスレッドの見た目を大幅に改造することもできてしまうぞ。
・usercontent.css – Mozilla Firefox まとめサイト
関連記事
Opera Mobileのユーザースクリプトでページの使い勝手を改良 特集その5
Opera Mobileのコンテンツブロック機能で邪魔なブログパーツなどを除去 特集その2
Opera MobileにoAutoPagerizeを導入して「次のページ」を自動読み込み 特集その6
Opera Mobileのターボ機能でページ読み込みを高速化 特集その5
Opera Mobileの上級カスタマイズの準備をしよう特集その1
Opera Mobileのサイト別設定機能でJavaScriptやモバイル表示の有無を制御 特集その3
Opera Mobileのリモートデバッグ機能で上級機能の設定を補助 特集その7
Opera Linkでパソコン版OperaとOperaMobileのデータを同期 特集その3
Opera Mobileの隠し設定を編集しプロキシサーバを使用する 特集その4
2011年08月05日15時03分 公開 | カテゴリー: ネット情報活用 | キーワード:特集 | Short URL
ツイート
最新記事
- キーホルダー型で持ち運びに便利!高速データ伝送にも急速充電にも対応!
- デスクで正座・あぐら・片膝立て!様々な座り方が出来るバランスチェア!
- 3in1ワイヤレス充電器!取り外せるモバイルバッテリーが付属!
- 超薄いモバイルバッテリー!iPhone背面に貼り付けて使える!
- コンセント搭載の小型モバイルバッテリー!折りたたみ式プラグで持ち運びも簡単!
- MacBookやiPad用のクラムシェルスタンド!もちろんWindowsパソコンでも!
- ベッドに寄りかかるときに使ってほしい三角クッション!ポケット付きでスマホを入れておける!
- 超軽量な背もたれクッション!持ち運んで家中どこでもくつろげる!
- 高反発な三角クッション!ソファやベッドで背もたれとして使える!
- 幅広のフットレストで快適にパソコン作業を!無段階に調節できるチルトフットレスト!
- シリコン編組ケーブルでながーく使える!タブレットやパソコンの充電に!
- 縦型ノートパソコンスタンドでスマートにパソコンを置いておける!スロット幅は簡単に調整できる!
- 家庭やオフィスに最適な木製の足踏み台!血流を良くしてリフレッシュにも!
- 足ふみ運動でリフレッシュ!パソコン作業にも最適な動くフットレスト!
- 足裏マッサージでリフレッシュ!デスク下を快適に過ごせるフットレスト!
- デスクワークの姿勢を改善!足を置くためのフットレスト!
- 気分に合わせて選べるアタッチメントホルダー!ストラップやネックストラップをスマホに手軽に取り付け!
- カラバリ豊富なスマホベルト!スマホ背面に貼り付けるだけ!
- 簡単取り付け簡単利用!高い粘着性能で安心して使えるスマホリング!
- スマホの充電もできるヘッドフォンスタンド!ケーブルホルダー付きで整理整頓できる!
- スマホサイズで携帯便利な自撮り棒!わずか140gの超軽量設計!
- ゲームを楽しむだけで無く、おしゃれにも使えるカラバリ!有線でも無線でも使えるゲームコントローラー!
- 小さく運ぶ、大きく使う!移動中も効率的に休める枕!
- 柔軟なケーブル管理!すべてのケーブルが絡まないようにする結束バンド!
- 一瞬でくるっとまとまる充電ケーブル!急速充電も高速データ伝送も対応!
- 小型化とスタイルの融合!テンキーレスで一日ゲームをするのも快適!
- 太めのケーブルも使えるマグネット式ケーブルクリップ!6個セットで家中どこでも使える!
- クランプで手軽に設置できるケーブルトレー!使い方によって小物入れとして使うことも!
- 配線を整理してスッキリ!デスク裏に設置する布製ケーブルトレー!
- 液晶ディスプレイの上を小物置きに!設置も取り外しも簡単なディスプレイボード!