DAZNのFanZoneは公式では非表示にできない
2026年3月更新
ライブ配信のときのFanZoneについて更新
以前書いていたこの記事で
公式DAZNでウィンドウサイズが柔軟に変わった！
と喜んでいたところ、今度はライブ配信のときのFanZoneが少し邪魔で
それに、前の「ウィンドウ拡大問題」と同じく、選択すらさせてくれない。。。
お願いします。DAZNさん。。。
そのため、前と似た内容になりますが
- パソコン環境＆ブラウザ視聴
- ブラウザのCSS(見た目のルール)を一時的に変更
これをやって、一時的に対応しようと思います
注意点もこの記事の真ん中くらいに書いてますので、これも確認してください
★ 先に少し注意点
(記事内リンク)
特に注意点２つ目
別にパソコンの設定変更をしてるわけじゃなく「見え方を変えているだけ」なので、「保存もできない」＝「毎回やる」みたいな面倒なやり方です
たぶん毎回やるにはきついので、その旨はご了承ください
◆ 二つ目
このやり方は、「CSS」というブラウザの画面表示を決めている「ルール」みたいなものを一時的に変更して見え方を変えてるだけです。あくまで「見せかけるだけ」なので注意してください。
何か修正を失敗してもページを更新したら元に戻るので、そこは安心してください
逆に、「設定が保存されるわけではない」ので、やるなら毎回やることになります
あまりに面倒なので、集中したい試合だけ！とか必要な時だけおススメします
以前再生画面が大きくならなかった時も、みんなが不満を言っていたら解決されたみたいだし、FanZoneも、有り無しを選択できるようになればいいのになぁ。。。
では早速やり方を書いていきます
FanZoneを一時的に非表示にする方法
今回は、かなり簡単に書いていきます。
細かい流れは、かなり似ているので、これも同じ記事の下の方流れを確認してください。
★ 再生画面をウィンドウサイズに調整する方法
(記事内リンク)
「全くわからない！」とか、希望があればもう少し細かく書こうと思いますので、その時はコメントでも下さい。(アドレスも何もいらないコメント欄ですので）
◆１． DAZNでライブ配信を開く
◆２．「FanZone」タブの真上で右クリック→ メニューから「検証」を選択する
◆３．たぶん下のテキスト(tabText …)の場所で開く
<span class=”tabText …(略)
◆４．マウスで少し上にあるテキスト(main__player-aside…)をクリックする
<aside class=”main__player-aside …(略)
◆５．「スタイル」タブの中にある、青字「width: var(–player-layout-panel-aside-width);」をクリックしてリンク先に飛ぶ
◆ ６．リンク先で以下２か所を「0px」にする
→これで、FanZoneが簡易的に小さくなります。
「これでも良い」 場合はこれでOKです。
→ちょっと見えてるのが気持ち悪い、の人は、次もやってください。
◆変更前
–player-layout-panel-aside-margin-left: 24px;
–player-layout-panel-aside-width: 375px;
◆変更後
–player-layout-panel-aside-margin-left: 0px;
–player-layout-panel-aside-width: 0px;
◆７．（もうちょっと完璧に消したい人向け）
「スタイル」タブの一番上にスクロールする（さっきの上の５．と同じ場所）
以下の１か所を「0px」にする
◆変更前
margin-right: 16px;
◆変更後
margin-right: 0px;
◆8．終わり
→ 簡単に書いてみました
→ もしかすると、ウィンドウの幅とか、条件によって場所が変わるかもしれないので、それもコメントとかもらえたら、できれば調べてみます
2024年６月更新
なんと公式DAZNでウィンドウサイズが柔軟になりました
上で書いた通り、２０２４年６月時点で、いつの間にかDAZNのウィンドウサイズが柔軟になっていました。
のでここで書いたやり方はもう必要なくなりました！！
すこし残念だけれど、それ以上にストレスがなくなっていい感じなので、良しとします！！
最初は雑談なので不要な方は記事真ん中へ
DAZN
昔はプレミアリーグとラ・リーガもあるわ、CLも見れるわ、金額も980円だわで、とんでもなくおトクだった
始まった当初はメニュー画面とか再生画面も扱いづらかったものの「いつかは改善されてよくなっていくだろう」
そう思っていた時期が自分にもあったもんだ
そして時間がたった今、メニュー画面もやりづらいままだし、動作ももっさりしているし、価格なんて何度も何度も改訂されてもうすでに「嘘だろ？？？」ってまで上がってる
あ！！
とにかく料金払ってるんだから再生前にＣＭいれないでくれ！！！
「スポーツでライブ」見るのにリアルタイムに見れないなんてそりゃないだろ。。。
ふぅ、いったん愚痴るのやめよう
もう価格はしょうがないとして「せめてここだけは改善して欲しい、他の動画サイトとかだったらやってるでしょ」という少しかゆいところにすら、改善される気がしない
それが今回の書いた記事を書こうと思ったきっかけで「DAZNのパソコン再生画面はいい感じに調整できない」というところがすごい不満だった
もうDAZNに加入している人ならわかると思うけれど、パソコンで見るDAZNの再生画面はある一定の大きさまで行くと、それ以上画面サイズが大きくならない
ウィンドウに合わせてどんどん大きくなってくれない
その「ある一定の大きさ」以上に大きくしたかったら全画面にするしかない
「微妙に小さい画面」か「全画面」かどっちか
これ、すんごいストレス
YoutubeでもHuluでもU-nextでもAmazon PrimeVideoでも、だいたい表示仮面（ブラウザのウィンドウ）の幅を大きくすればそれに合わせて高さも変わるようになる（Huluはちょっと微妙かな？）
文字だとわかりずらいから、みんな知ってるやつで言うと「Youtubeのシアターモード」。これにならない
もう少し大きな画面で見たいのに、見れない
すんごいストレス
ちなみに自分のモニター環境は27インチの4K(3840×2160)なんだけど、パソコンでみるDAZN画面は小さい
→もう少し大きくみたい
→全画面にする
→他の操作ができない、ながら見ができない
→やっぱり画面サイズを戻す
→画面小さ、、、
すんごい
すんごい
すんごいストレス
他の動画サイトでは当たり前にできている分、もうDAZN辞めてもいいくらいストレスを感じるんだけど、見たいスポーツがあるから続けている、という状態
で、ようやく今回の話題で
「パソコンでDAZNの再生画面のサイズを調整する方法」ができたので共有したいと思います。
先に少し注意点
先に注意点をいくつか
◆ 一つ目
一番大事なところで、今回は「サッカー」＆「ライブ配信」を前提に書きます
右側にメンバーリストがある画面ですね
たぶんそれ以外だと、あまり上手くいかないかも
◆ 二つ目
このやり方は、「CSS」というブラウザの画面表示を決めている「ルール」みたいなものを一時的に変更して見え方を変えてるだけです。あくまで「見せかけるだけ」なので注意してください。
何か修正を失敗してもページを更新したら元に戻るので、そこは安心してください
逆に、「設定が保存されるわけではない」ので、やるなら毎回やることになります
あまりに面倒なので、集中したい試合だけ！とか必要な時だけおススメします
◆ 三つ目
私の環境でやっただけなので、他にもっとより良いやり方があるかもしれません
もし「上手くいった！」「こっちの方が楽！」とか「メンバーリストがない動画もよろしく」とかあれば、ここのコメント欄はメールアドレス不要なので、ユーザ名「匿名」にでもして、アドバイスください
もし役に立ったならSNSシェアもよろしくです
再生画面をウィンドウサイズに調整する方法
てことで、実際に方法を書いていきます
◆ ブラウザ
Chormeのデベロッパーツールを使います。EdgeでもFirefoxでも似たような機能があるはずなので、そこらへんは各自で確認してください
◆ウインドウサイズ(幅)
1440px以上が前提です。4Kディスプレイならある程度横幅を大きく取っていればOK
今回は幅を1600pxとして書いてます
それぞれ、値は調整してください
◆1．DAZNで見たい試合を開く
◆２．一番上の「メニュー」と「試合画面の間」くらいで右クリック （下の画像の位置）→ メニューから「検証」を選択する
◆３．「DevTools」というウィンドウが開く
おそらく「section class=”main__player-layout___32auo main__player-layout-with-panel___2zrYN”」と書かれた場所に飛んでいるはず（人によって違う？）
このリストを開く（横▼をクリックすると、下に２行開く）
◆４．今回使うのは、下の３つ（上の画像に出てる３つ）
自分の環境なので全く同じ表示になるかわからないけど、似た感じの表示があるはず
(1) section class=”main__player-layout___32auo main__player-layout-with-panel___2zrYN”
(2) main class=”main__player-main___34tcP main__player-main-overrides___udExH”
(3) aside class=”main__player-aside___zkzRP”
画面の表示は上から(1)→(2)→(3)だけど、値を変更するのは(3)→(2)→(1)の順番でやると、わかりやすい感じで画面の変化が分かるのでおススメ
◆5-1．(3) aside class=”main__player-aside___zkzRP”をクリック
おそらく上のまとまりの中に、
margin-left: var(–player-layout-panel-aside-margin-left);
という青いリンク表示があるのでクリック
◆5-2．リンク先で下の表示があるので、「〇〇px」と書いてあるところを→「0px」に置き換える。置き換えるときはTabキーで次に飛べるので、こっちの方がやりやすいかも
◆変更前
–player-layout-panel-padding-left-right-1024: 32px;
–player-layout-panel-padding-left-right-1440: 64px;
–player-layout-panel-aside-margin-left: 24px;
–player-layout-panel-aside-width: 375px;
–player-layout-panel-aside-fullscreen-scale: 1vw / 16;
◆変更後
–player-layout-panel-padding-left-right-1024: 0px;
–player-layout-panel-padding-left-right-1440: 0px;
–player-layout-panel-aside-margin-left: 0px;
–player-layout-panel-aside-width: 0px;
–player-layout-panel-aside-fullscreen-scale: 1vw / 16;
→この時点で、画面右にメンバーリストとかスタッツ表示がある場合は、なんか画面が動く
→(3) の数字の変更はこれで終わり
◆6-1． 次に(2) main class=”main__player-main___34tcP main__player-main-overrides___udExH” をクリック
◆6-2．右ウィンドウの一番上に行く（(3)の位置を覚えていて、下の位置にいるので）
◆6-3．以下のように置き換える
◆変更前
.main__player-main-overrides___udExH {
max-width: 1180px;
width: 100%;
margin: 0 auto;
}
◆変更後
.main__player-main-overrides___udExH {
max-width: 1600px;
width: 100%;
margin: 0;
}
→「max-width: 1600px;」は、最大幅なので、もっと大きくしたい場合はその数字にしてください
→1600pxは、ただウィンドウの幅に合わせているだけ
→この時点で、再生画面も多少動いているはず
→(2) の数字の変更はこれで終わり
◆7-1．(1) section class=”main__player-layout___32auo main__player-layout-with-panel___2zrYN”をクリック
◆7-2．以下のように置き換える
◆変更前(１つ目)
@media (min-width: 1440px)
styles-dca1…a2.css:3389
.main__player-layout-with-panel___2zrYN {
padding-left: 0;
padding-right: 0;
width: 1366px;
margin: 0 auto;
}
◆変更前(２つ目)
.main__player-layout-with-panel___2zrYN {
padding-top: 24px;
max-height: 100%;
}
◆変更前(１つ目)
@media (min-width: 1440px)
styles-dca1…a2.css:3389
.main__player-layout-with-panel___2zrYN {
padding-left: 0;
padding-right: 0;
width: 1600px;
margin: 0 auto;
}
◆変更前(２つ目)
.main__player-layout-with-panel___2zrYN {
padding-top: 0px;
max-height: 100%;
}
→「width: 1600px;」は、さっきの「max-width: 1600px;」と合わせる。ので、大きくしたい場合はどっちもその値に合わせる（ここら辺は、それぞれ試してみて）
→「padding-top: 0px;」はメニューと画面の間をなくしてるだけ。隙間があってもよいなら修正しななくてもいい
→値を変えるのはこの箇所でおわり
◆8．終わり
→あいまいで申し訳ないけれど、ウインドウの幅数字はいい感じに調整してください
→うまく調整しないと、再生画面の右が切れたり、左にスペースができてたりします。ここら辺は直接数字をいじって試してみてください
おわりに
さてさて、どうだったでしょうか？
できたでしょうか？
まぁ、正直DAZNさんがそもそも仕様を変えてくれれば何の問題もないわけだけれども、数年たってもここは変わっていないので、すぐ変わるのは難しいのかな
今回のやり方は、画面の大きさは変わるものの引き伸ばしているから多少画像は汚くなってしまうはずで、画質も求める人にはあまりおススメできないやり方かも
毎回やらないといけない、とか
デメリットは正直あるものの
自分としては「なんかちょうどいい画面サイズで見たい」という欲求は満たせるのでこれは！という試合は画面サイズを変えてみてたりします
ぜひに、お試しください
コメント