今年ももうすぐアメリカのフォーミュラカーレースのトップカテゴリーであるインディカー・シリーズが開催される。
佐藤琢磨のほかにも日本でも走っていたローゼンクヴィストがフル参戦するし、インディ500には今年もアロンソが参戦するし、楽しみ。
僕はスカパー！オンデマンドの インディカー・シリーズ PPV（ペイ・パー・ビュー） 全話パック（税抜 9,980円） を購入して視聴する。
レースのライブ中継が見られるし（日本時間の深夜・早朝にあることが多いので、ライブで見ることはあまりないけど）、ライブ中継後も翌年2月末まではオンデマンドでいつでもレースを見られるので、インディカー・シリーズに興味がある人はぜひ。
ただ、スカパー！オンデマンドで不満なのは、再生時の画面表示がごちゃごちゃしていたり、ボタンの配置場所などのレイアウトが僕好みでないことだ。
再生中にマウスを動かすと、以下のように再生ボタンなどのアイコンが出てくるのと同時に、番組情報なども表示されて画面の半分近くが隠れてしまう…。
スカパー！オンデマンド再生時デフォルト
そこでユーザースタイルシートを適用させて、自分好みのシンプルな画面表示にしてみた。
環境は以下の通り。
たぶんWindowsのFirefoxでもできると思う。
※追記：Vivaldiブラウザでも同様のことが可能。
なぜFirefoxなのにchromeフォルダなのかは知らない…。場所は以下の通り。
/home/（ユーザー名）/.mozilla/firefox/xxxxx.default/chrome
「xxxxx.default」のところは、環境によってそれぞれ違っていると思うが、それに類するフォルダがすでに存在しているはず。
その中にchromeフォルダを作成する。
userContent.css ファイルを作成
chromeフォルダ内に、以下の内容の userContent.css ファイルを作成する。
@-moz-document domain(vod.skyperfectv.co.jp) {
/*番組情報 非表示*/
.metadata-info-row{
display:none !important;
}
/*シークバー周囲余白*/
.progress-controls-row{
padding: 0.5em 0 1em 0 !important;
}
/*再生ボタン周り調整*/
.button-controls-row{
width:0 !important;
margin:0.5em 0 0.5em 0 !important;
left:43%;
}
.spod-miniplayer .bottom-controls, .spod-player .bottom-controls{
padding-top:0 !important;
}
.button-controls-row a img.ch-img{
display:none !important;
}
.player-control-spacer-element{
display:none !important;
}
.zapping-arrow.left{margin-top:-3.5em !important;}
.zapping-arrow.right{margin-top:-3.5em !important;}
}
なお、上記ソース内の!importantは、サイト側設定のスタイルよりもここで設定したスタイルの方を優先させるために必要。
Firefoxを起動していたら、一度終了させて、再起動する。
結果
こんな感じに！マウスを動かして再生ボタン等のアイコンが出てきても画面の大半が見えている！
スカパー！オンデマンド再生時ユーザースタイルシート適用
デフォルトに戻したいときは、userContent.css ファイルを削除すればいいし、他にもいじりたい人はFirefoxでページを表示中に右クリック＞「要素を調査」でどこにどんなスタイルが適用されているかを確認して、userContent.css ファイルで調整すればいい。
