直接当ページへの来訪者は

               ----- Contents -----

● FireFox ブラウザで YouTube の未読/既読リンク文字色を設定する方法
● FireFox ブラウザで YouTube の背景色を設定する方法 
● FireFox ブラウザで YouTube のコントロールバーを動画の外へ移動する方法
● FireFox ブラウザで Google 検索結果の未読/既読リンク文字色を設定する方法 

● Chrome ブラウザで YouTube の未読/既読リンク文字色を設定する方法 
● Chrome ブラウザで YouTube の背景色を設定する方法 
● Chrome ブラウザで YouTube のコントロールバーを動画の外へ移動する方法 
● Chrome ブラウザで Google 検索結果の未読/既読リンク文字色を設定する方法

・ ブラウザのバージョン
FireFox Portable Quantum
Chrome Portable
Dragon Portable
Opera USB
Safari
ver58.0 及び ver67.0
ver64.0 及び ver74.0
ver36.1
ver42
ver5.1

・Stylish のバージョン
   旧 ver3.0.1
   新 ver3.1.8



    FireFox ブラウザで YouTube の未読/既読リンク文字色を設定する方法



▲ このように、未読/既読のリンク色を設定します。


▲ 拡張機能 Firefox 用 Stylish にて次のスタイルを作成します。

【Firefox Quantum 以降のバージョン用】

  @ スタイルの名前をつけます。
  A 有効をチェックします。
  B 下のコードを入力します。
↓ ここから
@-moz-document url-prefix("https://www.youtube.com/") { /* 新バージョンの Stylish の場合は、この行を削除 */
    /* 検索結果画面用 */
    a:link {             color:#80a0f0 !important; }
    a:visited {         color:#c0c0c0 !important; }
    /* 動画再生画面用 */
    a:link span {     color:#80a0f0 !important; }
    a:visited span { color:#c0c0c0 !important; }
} /* 新バージョンの Stylish の場合は、この行を削除 */
↑ ここまで
  C 次で始まる URL を選択します。
  D https://www.youtube.com/ ドメインを指定します。
  E〔保存〕をクリックします。


▲ 未読リンク色をスクリーンショットの値(#0000f0 濃青色)よりもテキストで示した値(#80a0f0 薄青色)にした方が、タイムが見易くなります。
■ YouTube のスタイルが頻繁に更新されてしまうので、この方法がいつまで利用できるかわかりません。
■ 色の名前とカラーコードは“原色大辞典”をご覧ください。(勝手にリンク)


▲ このように、YouTube 検索結果画面の未読/既読リンク色も変わります。






    FireFox ブラウザで YouTube の背景色を設定する方法



▲ YouTube 標準の背景色ではコントラストが強すぎるので、このように背景色を薄灰色にしました。


▲ 拡張機能 Firefox 用 Stylish にて次のスタイルを作成します。

  @ スタイルの名前をつけます。
  A 有効をチェックします。
  B 下のコードを入力します。
↓ ここから
ytd-watch-flexy{
    background-color: #f0f0f0 !important; /* ページ左右の空白領域の背景色 */
}
#columns{
    background-color: #f0f0f0 !important; /* 動画領域とコメント領域と次の動画領域の背景色 */
}
↑ ここまで
  C 次で始まる URL を選択します。
  D https://www.youtube.com/ ドメインを指定します。
  E〔保存〕をクリックします。






FireFox ブラウザで
YouTube のコントロールバーを動画の外へ移動する方法





▲ デフォルトでは コントロール バー が動画に被ってしまいます。
  動画再生の進捗状況を常時視認したいのですが、シークバーで動画が分断されてしまいます。


▲ このように、コントロールバーが動画に被ることがないようにします。
  拡張機能 Stylish で以下のスタイルを作成してシークバーとコントロールバーを動画ウィンドウの外の直下へ移動しました。
  及びボタンを小型化して、コントロールバーの高さと背景色も変更しました。
  刺激が強い黒色から灰色にしておとなしくしました。(コントロールバーが動画より目立ってどうするの?)


▲ 拡張機能 Firefox 用 Stylish にて次のスタイルを作成します。

  @ スタイルの名前をつけます。
  A 有効をチェックします。
  B 下のコードを入力します。
↓ ここから
@-moz-document domain(youtube.com) { /* YouTube.com ドメインを指定 */ /* 新バージョンの Stylish の場合は、この行を削除 */
    .ytp-chrome-bottom { opacity: 1 !important;
    background: gray !important; /* コントロールバーの背景色 */
    width: 100% !important; /*   コントロールバーの幅 */
    left: 0 !important; /*        コントロールバーの左マージン */
    height: 21px !important; /*    コントロールバーの高さ */
    bottom: 0px !important;
    }

    .ytp-gradient-bottom { display: none !important; }
    #movie_player { height: calc(100% + 22px); } /* 動画画面の幅 */
    body:not(.ytwp-window-player) .watch-stage-mode #watch7-sidebar-contents,
    body:not(.ytwp-window-player) #watch7-content { transform: translateY(40px); }
    .html5-video-container { height: 100% !important; }
    #movie_player:not(.ytp-big-mode) video { height: calc(100% - 21px) !important; } /* コントロールバーの底辺の垂直位置 */
    .ytp-big-mode video { height: calc(100% - 60px) !important; }
    .ytp-subtitles-player-content { bottom: 49px !important; }
    .watch-stage-mode #theater-background::after {
    content: ''; bottom: -40px; left: 0px; position: absolute;
    background-color: black; height: 40px; width: 100%;
    }

    div.ytp-chrome-controls{ height: 22px !important; } /* コントロールバーのボタンの大きさ */
    div.ytp-time-display{ line-height: 27px !important; } /* 演奏時間(分:秒)の垂直位置 */
    div.ytp-progress-bar-container { bottom: 19px !important; } /* プログレスバーの垂直位置 */
} /* 新バージョンの Stylish の場合は、この行を削除 */
↑ ここまで
  C 次で始まる URL を選択します。
  D https://www.youtube.com/ ドメインを指定します。
  E〔保存〕をクリックします。

  コードは Youtube Controls Under Player を参考にしました。

■ シークバー(プログレスバー)の進捗状況と経過時間を常時表示させるには、マウスカーソルを の辺りに置いて、
  カーソル形状を ではなく にさせておくことが必要です。






FireFox ブラウザで
Google 検索結果の未読/既読リンク文字色を設定する方法





▲ このように、Google 検索結果の未読/既読のリンク色を設定しました。背景色を薄灰色にしてコントラストを下げて眼に優しくしました。


▲ 拡張機能 Firefox 用 Stylish にて次のスタイルを作成します。

  @ スタイルの名前をつけます。
  A 有効をチェックします。
  B 下のコードを入力します。
↓ ここから
@-moz-document url-prefix("https://www.google.com/") { /* 新バージョンの Stylish の場合は、この行を削除 */
    a:visited {              color:#c0c0c0; }               /* 既読リンク色 */
    a:link {                  color:#0000f0; }               /* 未読リンク色 */
    body { background-color:#f4f4f4 !important; } /* 背景色 */
} /* 新バージョンの Stylish の場合は、この行を削除 */
↑ ここまで
  C 次で始まる URL を選択します。
  D https://www.google.com/ ドメインを指定します。
  E〔保存〕をクリックします。







Chrome ブラウザで
YouTube の未読/既読リンク色を設定する方法




▲ このように、未読/既読のリンク色を設定します。


▲ 拡張機能 Chrome 用 Stylish にて次のスタイルを作成します。
  Opera で Chrome 拡張機能を利用するには、先に拡張機能 Download Chrome Extension を組込む必要があります。

  @ スタイルの名前をつけます。
  A 有効をチェックします。
  B 下のコードを入力します。
↓ ここから
/* 検索結果画面用 */
a:link {             color:#80a0f0 !important; }
a:visited {         color:#606060 !important; }
/* 動画再生画面用 */
a:link span {     color:#80a0f0 !important; }
a:visited span { color:#606060 !important; }
↑ ここまで
  C 次で始まる URL を選択します。
  D https://www.youtube.com/ ドメインを指定します。
  E〔保存〕をクリックします。


▲ 未読リンク色をスクリーンショットの値(#0000f0 濃青色)よりもテキストで示した値(#80a0f0 薄青色)にした方が、タイムが見易くなります。
■ YouTube のスタイルが頻繁に更新されてしまうので、この方法がいつまで利用できるかわかりません。


▲ このように、YouTube 検索結果画面の未読/既読リンク色も変わります。


▲ Chrome ver.74 の場合は を右クリックすると開くダイアログで〔サイトデータの読み取りと変更〕→〔●Youtube.com〕を選択してから
  ページを再読込すると設定が反映されます。







Chrome ブラウザで
YouTube の背景色を設定する方法(その1)又は(その2)



(その1) Stylebot を利用する方法

▲ デフォルトの背景色ではコントラストが強すぎて眼に良くないので、このように背景色を薄灰色にしました。


▲ 拡張機能 Stylebot にて次の如くに背景色を設定します。
  1番目に、両サイドの空白部分を薄灰色にします。
  @ 〔CSS〕をクリックします。
  A 〔Open Stylebot〕をクリックします。
  B もし の場合はこのボタンをクリックして 領域(要素)選択モードにします。
       は、領域(要素)選択モードです。
       は、色データ入力モードです。
  C 所望の領域でマウスクリックすると 色データ入力モードになります。
  D 所望の色データを入力します。入力した色データは即反映されます。


▲ 2番目に、動画の背景部分を薄灰色にします。
  動画の色彩に影響を及ぼさないように無彩色にしました。




(その2) Stylish を利用する方法
■ 拡張機能 Chrome 用 Stylish にて次のスタイルを作成します。
  Opera で Chrome 拡張機能を利用するには、先に拡張機能 Download Chrome Extension を組込む必要があります。

拡張機能 Stylish にて次のコードを作成して登録します。
↓ ここから
ytd-watch-flexy{
    background-color: #f0f0f0 !important; /* ページ左右の空白領域の背景色 */
}
#columns{
    background-color: #f0f0f0 !important; /* 動画領域とコメント領域と次の動画領域の背景色 */
}
↑ ここまで






Chrome ブラウザで
YouTube のコントロール バーを動画の外へ移動する方法





▲ デフォルトでは コントロール バー が動画に被ってしまいます。
  動画再生の進捗状況を常時視認したいのですが、シークバーで動画が分断されてしまいます。


▲ このように、コントロールバーが動画に被ることがないようにします。
  拡張機能 Chrome 用 Stylish にて次のスタイルを作成してシークバーとコントロールバーを動画ウィンドウの外の直下へ移動しました。
  及びボタンを小型化して、コントロールバーの高さと背景色も変更しました。
  刺激が強い黒色から灰色にしておとなしくしました。(コントロールバーが動画より目立ってどうするの?)
  Opera で Chrome 拡張機能を利用するには、先に拡張機能 Download Chrome Extension を組込む必要があります。


▲ 拡張機能 Chrome 用 Stylish にて次のスタイルを作成します。
  Opera で Chrome 拡張機能を利用するには、先に拡張機能 Download Chrome Extension を組込む必要があります。

  @ スタイルの名前をつけます。
  A 有効をチェックします。
  B 下のコードを入力します。
↓ ここから
.ytp-chrome-bottom { opacity: 1 !important;
    background: gray !important; /* コントロールバーの背景色 */
    width: 100% !important; /*   コントロールバーの幅 */
    left: 0 !important; /*        コントロールバーの左マージン */
    height: 21px !important; /*    コントロールバーの高さ */
    bottom: 0px !important;
}

.ytp-gradient-bottom { display: none !important; }
#movie_player { height: calc(100% + 22px); } /* 動画画面の幅 */
body:not(.ytwp-window-player) .watch-stage-mode #watch7-sidebar-contents,
body:not(.ytwp-window-player) #watch7-content { transform: translateY(40px); }
.html5-video-container { height: 100% !important; }
#movie_player:not(.ytp-big-mode) video { height: calc(100% - 21px) !important; } /* コントロールバーの底辺の垂直位置 */
.ytp-big-mode video { height: calc(100% - 60px) !important; }
.ytp-subtitles-player-content { bottom: 49px !important; }
.watch-stage-mode #theater-background::after {
    content: ''; bottom: -40px; left: 0px; position: absolute;
    background-color: black; height: 40px; width: 100%;
}

div.ytp-chrome-controls{ height: 22px !important; } /* コントロールバーのボタンの大きさ */
div.ytp-time-display{ line-height: 27px !important; } /* 演奏時間(分:秒)の垂直位置 */
div.ytp-progress-bar-container { bottom: 19px !important; } /* プログレスバーの垂直位置 */
↑ ここまで
  C 次で始まる URL を選択します。
  D https://www.youtube.com/ ドメインを指定します。
  E〔保存〕をクリックします。

■ シークバー(プログレスバー)の進捗状況と経過時間を常時表示させるには、マウスカーソルを の辺りに置いて、
  カーソル形状を ではなく にさせておくことが必要です。






Chrome ブラウザで
Google 検索結果の未読/既読リンク文字色を設定する方法





▲ このように、Google 検索結果の未読/既読のリンク色を設定しました。背景色を薄灰色にしてコントラストを下げて眼に優しくしました。


▲ 拡張機能 Chrome 用 Stylish にて次のスタイルを作成します。
  Opera で Chrome 拡張機能を利用するには、先に拡張機能 Download Chrome Extension を組込む必要があります。

  @ スタイルの名前をつけます。
  A 有効をチェックします。
  B 下のコードを入力します。
↓ ここから
a:visited {              color:#c0c0c0; }    /* 既読リンク色 */
a:link {                  color:#0000f0; }    /* 未読リンク色 */
body { background-color:#f4f4f4;  }    /* 背景色 */
↑ ここまで
  C 次で始まる URL を選択します。
  D https://www.google.com/ ドメインを指定します。
  E〔保存〕をクリックします。


▲ Chrome ver.74 の場合は を右クリックすると開くダイアログで〔サイトデータの読み取りと変更〕→〔●google.com〕を選択してから
  ページを再読込すると設定が反映されます。






【佐藤栞里さん】

▲ 彼女に『しーちゃん、可愛い〜』(YouTube) と声掛けすると、この顔をして大喜びします。天然自然そのまんまっ!
  彼女の指は、パーツモデルに勝るほど美形です。
  元気を貰える佐藤栞里さんのインスタグラムはこちら。