Youtubeで既に見たリンクの色をわかりやすくする

この記事のどこがK-popに関係するか?それは、K-popの流行は動画投稿サイトの存在と切り離せないからですよ。 😉

Youtubeでは未訪問のリンク先と既に訪問したリンク先の色が似ているため、見づらいですね。これを変化させる方法です。

このサイトではYoutubeで検索して、動画をダウンロードする方法を過去記事で紹介しています。推薦しているWebブラウザはインターネット・エクスプローラーではなくFirefoxです。

そのFirefoxでYoutbeでのみ、既に訪問したサイトへのリンク色を変更する方法です。

まず、必要なアドオンをインストールします。こちらをクリックしstylishをインストールしてください。

インストールはすぐに終了します。Firefoxを再起動してください。

続いて、ツール→アドオンをクリック。左側で「ユーザースタイル」をクリックします。

左上にある新しいスタイルを書くリンクをクリック。続いて開くウィンドウで、名前は「Youtube設定」とか適当なものを付けてください。内容には次の内容を全部コピーしてください。

/*
 * Author      : Hirohisa Kawase
 * Website     : http://blog.hiroqws.com/
 * Usage       : Use with Stylish Firefox extension
 */
 @namespace url(http://www.w3.org/1999/xhtml);
 @-moz-document
 /* 変更するYoutbueのdomain*/
 /* Youtube以外のサイトのURLを記述しても */
 /* 変化しない可能性が大きいです。 */
 /* 設定するにはCSSの知識が必要です。 */
 domain("youtube.com")
 {
 /* 色名については次のサイトが参考になります。 */
 /* http://memopad.bitter.jp/w3c/css/css_colornames.html */
 /* 後ろの色が真っ白ですと目に痛いので変更しています */
 /* lightgrayが色名です。 */
 /* 背景色 */
 body, #watch-headline-container, #watch-video-container,
 #watch-sidebar .watch-module-body, .feedmodule-anchor
 {
 background-color: lightgray !important;
 }
 /* 未訪問サイトのリンク色。ここではdarkblueを指定 */
 /* コメントにして無効にしています。*/
 /* 変更するとうざったいですよ */
 /* 変更したい方は、次の行の/と*を全部削除してください。
 /*   a {color: darkblue !important;} */
 /* 既に訪問したリンク先の色。ここではindeanredを指定 */
 a:visited {color: indianred !important;}
 /* 関連動画の部分は訪問したリンク色が変更できないため */
 /* カーソルを当てたときの背景色を変更して見ました。 */
 /* plumが背景色です。 */
 a.video-list-item-link:visited
 {
 background-color: plum !important;
 }
 /* 各ユーザーのチャンネルで、右側の動画を左クリックすると */
 /* 左側ですぐ再生されますが、これはブラウザの履歴に */
 /* 残らないため、色は変化しません。代わりに中ボタンで */
 /* 別のタグで開くことをお勧めします。通常のページとして */
 /* 表示されますので、チャネルでも訪問済みリンク色で */
 /* 表示されます。ダウンロードもしやすいですしね。 */
 }

そしたら、保存ボタンを押して、小さなウィンドウは全部閉じます。

Youtubeで見てみてください。一度訪れた、つまり見たり、確認したリンクは赤っぽくなっていますので、見分けが付きやすくなってます。

ちなみに、この拡張は特定のサイトの表示形式を決めている、CSSを変更します。今回は手動で設定しましたが、GoogleとかYoutubeとか有名なサイトであれば、変更ファイルが存在しています。派手になる物もあれば、見やすくしてくれるもの、コメントだけを取ってくれる物とかいろいろあります。もしかしたら、お気に入りが見つかるかもしれません。

例えば、Googleでしたら、派手な物が多い中で、地味ですが背景をオリーブ色、リンク色も抑え気味な、こちらのスキンなんか、目に優しいのでお勧めです。

ただ、内容がちょっと古くて、左のサイドが白のままになってしまいます。そこも色を付けたいときは、次の内容をコピペしてください。

@namespace url(http://www.w3.org/1999/xhtml);
 @-moz-document
 domain("google.com")
 {
 body, #leftnav {  background-color:#818F23 !important; }
 a:link { color: mediumblue !important }
 a:visited { color: purple !important }
 a:hover, a:active { color: #8F006A!important }
 }

それ以外のサイトの見た目を変えたい場合は、サイトを表示しておきます。一番下の行にアドオンバーが出ていれば、その左側にこの拡張のボタンがあります。クリックすると、「このサイト用のスタイルを探す」という項目がありますので、そこを選んでください。もし、あらかじめ作られた設定があれば、インストールのリンクが表示されます。

元のサイトの構成が変更になり、CSSも変更になると、古い設定ファイルでは、正しく表示ができなくなる可能性があることを覚えておいてください。ちなみに、今回youtube用に私が設定したのは、ただ、リンク色を変えるだけの設定ですので、変更になっても影響は少ないと思われます。

メジャーなサイトのスキンしかありません。ですから、当サイトのようなマイナーなところには、スキンなんぞ存在しません。このサイトをコアに利用するする人で、読んでいると目が疲れる人(たぶん世界中で私一人です。 😀 )は、以下の内容をコピペで、記事部分の背景色が変わります。

/* 当サイトの背景色変更 */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document
domain("hiroqws.com")
{
.main-content {  background-color:#e0e0e0 !important; }
}

追記:他のサイトの分も紹介しておきますね。あまり丁寧にコメント入れていません。
Facebook:背景色変更

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document
domain("facebook.com")
{
body,#contentCol {
background-color:#e0e0e0 !important;
}
}

Gmail、テーマはそのままに、メールの内容を読むときの背景色設定

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("mail.google.com")
{
.iY, .Bk .G2, .gA, .hi
{
background: lightgray !IMPORTANT;
}
}

まあ、色々設定しましたが、後はマイナーな用途です。

コメントを残す