ABEMATVの動画の背景色 黒以外に変更する方法 デザイン変更をパソコン環境で

ABEMAで、次のことができるようになります。パソコン環境用です。

• 動画配信ページの背景色を黒以外に変更
• 自分の顔を画面に映したくない！

CSSをすぐに確認する

変更のための準備

ABEMAの設定では変更することができません。そこで、ブラウザの拡張機能Stylusを利用して背景色を変更します。

Stylusをすでに導入している場合はこの項目を飛ばして進んでください。

Stylusのインストール

次のサイトに行って、ブラウザにStylusをインストールします。

Stylus - Chrome ウェブストア

Stylus でウェブのデザインを変更しましょう。これは、ユーザースタイルを管理するツールです。Stylus を利用すると、多くの人気サイト向けのテーマやスキンを簡単にインストールできます。

chromewebstore.google.com

詳しいインストール手順の説明は以下をご覧ください。

Stylusの使用方法 パソコン環境でデザイン変更

CSSを変更するStylusの使用方法を実例を用いて説明します。StylusのインストールStylusのインストール手順 次のサイトに行って、ブラウザにStylusをインストールします。 chromeに追加をクリックします。(Edgeの場合は許可の確認画面が表示されます。)※Firefoxをご利用の場合はこちらから追加...

programming-cafe.com

チャット欄の背景や文字色を変更する方法

チャット欄の背景色や文字色を変更する手順

1. ABEMAをブラウザで再生し、ブラウザ右上のSのマークをクリックします。
2. 表示されているアドレス(「次のスタイルを書く」の下)の ABEMA の部分をクリックします。
3. 次のような画面が表示されます。
   
4. CSSコードコード記入欄に以下を記入します。(コピペでよいです。)#ffffffを別の数値に変更れば他の色になります。
   文字の色も変更しています。別の色に変更する場合は、#444444の部分を変更してください。

   .com-vod-VODResponsiveMainContent__container{
     background-color:#ffffff;
   }
   .c-video-EpisodeContainerView-breadcrumb {
     background-color: #FFFFFF;
   }
   .com-vod-VODRecommendedContentsContainerView{
     background-color: #ffffff;
   }
   .com-vod-VODRecommendedContentsContainerView__player {
     background-color: #ffffff;
   }
   .com-vod-VODRecommendedContentsContainerView__details{
     background-color: #ffffff;
   }
   .com-m-BreadcrumbList__link,span.com-video-EpisodeTitleBlock__series-info,span.com-video-EpisodeTitleBlock__title,p.com-video-EpisodeTitleBlock__supplement,p.com-content-list-ContentListEpisodeItem__title,p.com-feature-area-SeriesCardItem__title{
     color:#444444;
   }
   .com-content-list-ContentList {
     background-color: #FFFFFF;
     border-radius: 4px;
   }

   ※冒頭のcom-○○～の前の . の付け忘れ、{と}による囲い忘れ、空白にご注意ください。全て半角です。
5. 左側の保存をクリックします。ブラウザのウィンドウを小さく表示している場合は左側に表示されませんので大きく表示してください。
   
6. 以上で終了です。
7. 編集する場合は、削除する(元に戻す)場合は右上のSのマーク、管理、abema.tv の順でクリックしておこなってください。削除は該当するアドレスの右側の×をクリックします。

他にもできるデザイン変更

relation

ABEMATVのチャット背景色と文字色 黒以外に変更する方法 デザイン変更をパソコン環境で CSSの::selectionでユーザーが選択したテキストのスタイルをカスタマイズする方法をわかりやすく解説 プライムビデオの背景色 黒以外に変更する方法 デザイン変更をパソコン環境で Stylusの使用方法 パソコン環境でデザイン変更 Twitterの「今どうしてる？」 トレンドを表示しない方法 デザイン変更をパソコン環境で x.com対応 Twitterの「おすすめユーザー」 表示しない方法 デザイン変更をパソコン環境で Twitterの通知アイコン 表示しない方法 デザイン変更をパソコン環境で Twitterの通知アイコンの右上の数値 表示しない方法 デザイン変更をパソコン環境で TwitterのＸロゴを消す方法 パソコン版 デザイン変更をパソコン環境で

色のサンプル

カラーはRGBの16進数(HEX)で表記されます。つまりそれぞれの桁について0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,fとなります。その上で２桁づつ、00～FFが配置され、左から赤、緑、青が割り当てられます。例えば赤の場合は、赤(R)が最大値のffで緑(G)と青(B)が最小値の00となりますから、ff0000となります。実際に指定する際は、#をつけて#ff0000となります。#ff000099のようにさらに2桁を追記して透明度を指定することもできます。

以下にカラーピッカーと、主要なカラーコードを掲載しました。

カラーピッカー

モノクロ色サンプル

カラー色サンプル