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

               ----- Contents -----

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

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

・ ブラウザのバージョン
FireFox Portable Quantum
Chrome Portable
Microsoft Edge
Dragon Portable
Opera USB
Safari
ver79
ver83
ver83
ver36
ver42
ver5.1

※ 2020年08月01日にスタイルが改変された YouTube に適用できます。
※ 2020年08月15日にスタイルが改変された YouTube に適用できます。



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



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


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

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

■ 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 下のコードを入力します。(スクリーンショットのコードよりもこちらが最新)
↓ ここから
.ytp-chrome-bottom {
opacity: 1 !important; /* コントロールバーを常時表示 */
background: gray !important; /* コントロールバーの背景色 */
width: 100% !important; /*   コントロールバーの幅 */
left: 0 !important; /*     コントロールバーの左マージン */
height: 22px !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% - 22px) !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-left-controls { margin-top: 0px !important } /* コントロールボタンの垂直位置 */
div.ytp-chrome-controls{ height: 26px !important; } /* コントロールバーのボタンの大きさ */
div.ytp-time-display{ margin-top: -5px !important; } /* 演奏時間(分:秒)の垂直位置 */
div.ytp-progress-bar-container { bottom: 20px !important; } /* プログレスバーの垂直位置 */
div.ytp-volume-panel{ margin-top:-5px !important } /* ボリュームスライダーの垂直位置 */
↑ ここまで
  C 次で始まる URL を選択します。
  D https://www.youtube.com/ ドメインを指定します。
  E〔保存〕をクリックします。

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






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





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


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

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

【佐藤栞里さん】

▲ 彼女に『しーちゃん、可愛い〜』(YouTube) と声掛けすると、この顔をして大喜びします。天然自然そのまんまっ!







Google Chrome・Microsoft Edge ブラウザで
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〔保存〕をクリックします。

■ YouTube のスタイルが頻繁に更新されてしまうので、この方法がいつまで利用できるかわかりません。


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


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







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



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

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


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


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




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

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






Google Chrome・Microsoft Edge ブラウザで
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: 22px !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% - 22px) !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-left-controls { margin-top: 0px !important } /* コントロールボタンの垂直位置 */
div.ytp-chrome-controls{ height: 26px !important; } /* コントロールバーのボタンの大きさ */
div.ytp-time-display{ margin-top: -5px !important; } /* 演奏時間(分:秒)の垂直位置 */
div.ytp-progress-bar-container { bottom: 20px !important; } /* プログレスバーの垂直位置 */
div.ytp-volume-panel{ margin-top:-5px !important } /* ボリュームスライダーの垂直位置 */
↑ ここまで
  C 次で始まる URL を選択します。
  D https://www.youtube.com/ ドメインを指定します。
  E〔保存〕をクリックします。

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






Google Chrome・Microsoft Edge ブラウザで
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〕を選択してから
  ページを再読込すると設定が反映されます。






Google Chrome・Microsoft Edge ブラウザで
要素名を取得する方法







■ Chrome・Edge で要素名を取得するには Chrome 拡張機能 Stylebot をインストールして、
  @ 画面の何も無い所を右クリック。
  A ポップアップメニューの Stylebot をクリック。
  B Style Element をクリック。
  C もし の場合はこのボタンをクリックして 領域(要素)選択モードにします。
  D 調べたい要素の上へマウスオーバーします。
  E 要素名が表示されます。

■ 陸上自衛隊の歌姫 鶫 真衣(つぐみ まい)さん。