【Stylus】 ユーザーCSSを「iframe」の中身に適用したい

この記事は約2分で読めます。

ニコニコ

こんにちは、さち です。

先日、サイトのデザインを変えられるアドオン「Stylus(Stylish の代替)」を使って、ニコニコ生放送の「タイムシフトの予約一覧」ページに CSS を適用しようとしたのですが、上手くいきませんでした。

どうして……?

スポンサーリンク

Stylus の CSS が適用されない

  1. タイムシフトの予約一覧ページです。こちらに予約件数(予約数/最大数)が出ているのですが、この文字サイズを大きくしてみます。
    ニコニコ
  2. Stylus で、「適用先」を予約一覧ページの URL である https://www.nicovideo.jp/my/timeshift-reservations にして、「文字サイズ」を大きく&「文字の色」を赤色にします。
    Stylus の編集画面
  3. しかし、Stylus で書いた CSS が適用されません。何でだよぉーーー!?
    ニコニコ
  4. ウェブブラウザーの「開発ツールCtrl + Shift + I キー)」で調べてみると、予約一覧は別の URL のページが iframe で読み込まれているのがわかりました。原因はこれですね。
    ニコニコ

でも、iframe に Stylus の CSS を適用するにはどうしたらいいの……?

解決方法

どうしたらいいのか少し悩んだんですが、解決方法は簡単でした。Stylus の適用先を iframe の URL にすれば良いだけです。

  1. ウェブブラウザーの「開発ツールCtrl + Shift + I キー)」で iframe を選択します。
    ニコニコ
  2. HTMLソース から、iframe が読み込んでいる URL である src をコピーします。
    開発ツール
  3. Stylus の「適用先」に貼り付けて https://live.nicovideo.jp/embed/timeshift-reservations にします。
    Stylus の編集画面
  4. Stylus の CSS が適用されました。
    ニコニコ

コメント

タイトルとURLをコピーしました