【小技 / げん玉】「詳しく見て1pt」のクリック済みリンクが見分けられる

* 2018/1/8 毎日必ず1ptの表示色がクリック後も切り替わらないようコードを改善。

げん玉の「詳しく見て1pt」は、ポイントを獲得できるのは最初の1回だけですが、クリック前とクリック後でリンクの表示色に違いがありません。
そのため、ポイントを獲得済みかどうか見分けがつかず、定期的に全てのリンクをクリックしているという方も多いのではないかと思います。
でも、ポイントが獲得できるかどうかもわからないリンクをクリックして回るのは、効率がいいとは言えませんよね。

通常、1度でもリンク先のページを訪問すると、リンクの表示色は未訪問リンクの規定色から訪問済みリンクの規定色に切り替わります。
ただし、これは標準的な仕様として規定されているだけに過ぎず、守らなければならないルールというわけではありません。

リンクの表示色を規定から変更するには、「スタイルシート」という技術が用いられています。
スタイルシートは、インターネットに関わる様々な技術の中でも、文字の大きさや罫線の太さ、背景色、画像の表示位置など、サイトデザインのあらゆる部分に関わる技術です。
実は、この記事で解説するテクニックも、このスタイルシートを使用して実現することができます。




[PR]
コツコツと確実に貯めたい方、広告利用でガッツリ稼ぎたい方、どちらにもオススメ!コチラからご登録いただけると、特典として1,000ポイント獲得できます
暮らしをおトクにかえていく|ポイントインカム
ポイントインカム

[PR]



使用するのは「ユーザースタイルシート」というスタイルシートの一種で、ユーザースタイルシートを使用すると、サイト設計者が指定したスタイルに優先して、サイトデザインを指定することが可能になります。
リンクの表示色が規定と異なるのは、サイト設計者がスタイルシートを用いて規定と異なる表示色を指定しているからですが、ユーザースタイルシートで規定通りに表示するよう指定することで、規定の表示色に戻すことができるわけです。

この記事で紹介している方法を適用すると、「詳しく見て1pt」と「毎日必ず1pt」のアイコンに、下記のような縁取り線が表示されるようになります。
詳しく見て1ptの縁取り線は、未訪問リンクと訪問済みリンクで表示色が切り替わりますが、毎日必ず1ptの縁取り線は、クリック後も表示色は切り替わりません。
つまり、未訪問リンクの表示色で縁取られているアイコンを探して、それだけをクリックすればOKということになります。

げん玉 詳しく見て1pt 未訪問 未訪問リンク

げん玉 詳しく見て1pt 訪問済み 訪問済みリンク

なお、リンク先を訪問済みかどうかは、ブラウザの履歴を元に判定されます。
履歴を保存しない設定になっていたり、履歴を削除した場合、指定通りに表示されませんので、ご注意下さい。

具体的な手順は下記の通りとなります。
ブラウザによって手順が異なりますので、ご利用のブラウザに合わせて手順を進めて下さい。
画像はクリックすると拡大します。
Firefox
Google Chrome
Internet Explorer



Firefox

まず、拡張機能の「Stylus」をインストールします。

コチラからダウンロードいただけます。
Stylus



メニューバーの「ツール」から「アドオン」を選択します。

Firefox ツール アドオン

インストール済みのアドオンがアルファベット順で一覧表示されますので、その中からStylusを探して「設定」をクリック、続けて、ページ下部にある「スタイルを管理」をクリックして下さい。



新しいスタイルを作成」をクリックします。

Firefox Stylus 新しいスタイルを作成



コード」欄に下記のコードをコピーして貼り付けて下さい。
加えて、「個別指定」をクリックして、適用先が「URL」になっていることを確認の上、下記の2つのURLを1つずつコピーして貼り付けます。
追加」をクリックすると、適用先の入力欄を追加できます。

Stylus スタイルを追加

コード
/* 未訪問リンクの表示色 */
a:link img[src="//img.gendama.jp/img/renew/common/btn_detail.png"],
a:link img[src="//img.gendama.jp/img/neo/index/click_pt.png"],
a:link img[src="http://img.gendama.jp/img/forest/forest_bt1.gif"],
a:link img[src^="//img.gendama.jp/img/renew/common/btn_detail_daily.gif"],
a:link img[src="http://img.gendama.jp/img/forest/bt_day1.gif"] {
border: blue solid 3px !important;
}
/* 詳しく見て1pt 訪問済みリンクの表示色 */
a:visited img[src="//img.gendama.jp/img/renew/common/btn_detail.png"],
a:visited img[src="//img.gendama.jp/img/neo/index/click_pt.png"],
a:visited img[src="http://img.gendama.jp/img/forest/forest_bt1.gif"] {
color: purple !important;
}
/* 毎日必ず1pt 訪問済みリンクの表示色 */
a:visited img[src^="//img.gendama.jp/img/renew/common/btn_detail_daily.gif"],
a:visited img[src="http://img.gendama.jp/img/forest/bt_day1.gif"] {
color: blue !important;
}

適用先
http://www.gendama.jp/forest/
http://www.gendama.jp/mypage/

名前を入力して「保存」をクリックすれば完了です。

また、上記のコードでは、わかりやすさを重視して、未訪問リンクを「blue」、訪問済みリンクを「purple」としてありますが、お好みに応じて表示色を指定することも可能です。
詳細は記事末尾をご参照下さい。



Google Chrome

まず、拡張機能の「Stylus」をインストールします。

コチラからダウンロードいただけます。
Stylus



右上のアイコンをクリックしてメニューから「その他のツール」を選択、続けて、「拡張機能」をクリックします。

GoogleChrome その他のツール 拡張機能

インストール済みのアドオンがアルファベット順で一覧表示されますので、その中からStylusを探して「オプション」をクリック、さらに、「スタイルを管理」をクリックして下さい。



新しいスタイルを作成」をクリックします。

GoogleChrome Stylus 新しいスタイルを作成



コード」欄に下記のコードをコピーして貼り付けて下さい。
加えて、「個別指定」をクリックして、適用先が「URL」になっていることを確認の上、下記の2つのURLを1つずつコピーして貼り付けます。
追加」をクリックすると、適用先の入力欄を追加できます。

Stylus スタイルを追加

コード
/* 未訪問リンクの表示色 */
a:link img[src="//img.gendama.jp/img/renew/common/btn_detail.png"],
a:link img[src="//img.gendama.jp/img/neo/index/click_pt.png"],
a:link img[src="http://img.gendama.jp/img/forest/forest_bt1.gif"],
a:link img[src^="//img.gendama.jp/img/renew/common/btn_detail_daily.gif"],
a:link img[src="http://img.gendama.jp/img/forest/bt_day1.gif"] {
border: blue solid 3px !important;
}
/* 詳しく見て1pt 訪問済みリンクの表示色 */
a:visited img[src="//img.gendama.jp/img/renew/common/btn_detail.png"],
a:visited img[src="//img.gendama.jp/img/neo/index/click_pt.png"],
a:visited img[src="http://img.gendama.jp/img/forest/forest_bt1.gif"] {
color: purple !important;
}
/* 毎日必ず1pt 訪問済みリンクの表示色 */
a:visited img[src^="//img.gendama.jp/img/renew/common/btn_detail_daily.gif"],
a:visited img[src="http://img.gendama.jp/img/forest/bt_day1.gif"] {
color: blue !important;
}

適用先
http://www.gendama.jp/forest/
http://www.gendama.jp/mypage/

名前を入力して「保存」をクリックすれば完了です。

また、上記のコードでは、わかりやすさを重視して、未訪問リンクを「blue」、訪問済みリンクを「purple」としてありますが、お好みに応じて表示色を指定することも可能です。
詳細は記事末尾をご参照下さい。



Internet Explorer

Internet Explorerについては、この小技をお使いになる前にご了承いただきたい重要な注意点があります。
Internet Explorerでは、FirefoxやGoogle Chromeとは異なり、特定のドメインやURLに限定してユーザースタイルシートを適用することができません。

全てのWEBサイトでクリック済みリンクの表示色を統一することになるため、ユーザースタイルシートを使用した結果、表示が崩れるなどの問題が間違いなく発生します。
その場合でも、ユーザースタイルシートの使用を停止すれば、ユーザースタイルシートに起因する不具合は解消されますが、表示の崩れを避けることはできないということだけは、ご理解の上でご使用下さい。

まず「メモ帳」を開いて、以下のコードをコピーして貼り付け、わかりやすい場所に保存して下さい。

/* 未訪問リンクの表示色 */
a:link img[src="//img.gendama.jp/img/renew/common/btn_detail.png"],
a:link img[src="//img.gendama.jp/img/neo/index/click_pt.png"],
a:link img[src="http://img.gendama.jp/img/forest/forest_bt1.gif"],
a:link img[src^="//img.gendama.jp/img/renew/common/btn_detail_daily.gif"],
a:link img[src="http://img.gendama.jp/img/forest/bt_day1.gif"] {
border: blue solid 3px !important;
}
/* 詳しく見て1pt 訪問済みリンクの表示色 */
a:visited img[src="//img.gendama.jp/img/renew/common/btn_detail.png"],
a:visited img[src="//img.gendama.jp/img/neo/index/click_pt.png"],
a:visited img[src="http://img.gendama.jp/img/forest/forest_bt1.gif"] {
color: purple !important;
}
/* 毎日必ず1pt 訪問済みリンクの表示色 */
a:visited img[src^="//img.gendama.jp/img/renew/common/btn_detail_daily.gif"],
a:visited img[src="http://img.gendama.jp/img/forest/bt_day1.gif"] {
color: blue !important;
}

ファイル名は何でもOKですが、拡張子を「txt」ではなく「css」に変更しておきます。
例:user_style_sheet.css



Internet Explorer右上の歯車のアイコン、もしくは、メニューバーの「ツール」をクリックして、メニューから「インターネットオプション」を選択します。

IE インターネットオプション



インターネットオプションの「全般」タブにある「ユーザー補助」ボタンをクリックします。

IE インターネットオプション ユーザー補助



ユーザー補助の「自分のスタイルシートでドキュメントの書式を設定する」にチェックを入れて「参照」ボタンをクリックします。

IE インターネットオプション ユーザー補助 自分のスタイルシートでドキュメントの書式を設定する

最初にメモ帳で保存したファイルを選択すれば完了です。
ユーザースタイルシートはInternet Explorerの再起動後に有効となります。

また、上記のコードでは、わかりやすさを重視して、訪問済みリンクを「purple」、未訪問リンクを「blue」としてありますが、お好みに応じて表示色を指定することも可能です。
詳細は記事末尾をご参照下さい。



上記の手順では、訪問済みリンクを「purple」、未訪問リンクを「blue」としましたが、お好みに応じて表示色を指定することもできます。

表示色の指定には、上記の手順のように色名をキーワードで指定する方法と、RGBで指定する方法があります。
使用できるキーワードは以下の16種類ですが、飽くまで原則であり、実際には多くのブラウザが拡張キーワード(例えば、orangeやpinkなど)に対応しています。

blacksilvergraywhitemaroonredpurplefuchsia
greenlimeoliveyellownavybluetealaqua

RGBについてはこの記事では詳しく触れませんので、表示色を細かく指定したい(1,600万色以上から設定可能です)という方は、ご自身でお調べになって下さい。

コチラもご参照下さい。
おこづかいサイトで稼ぐための【裏技 / 小技】

なお、掲載されている情報は執筆当時におけるものであり、最新の状況とは異なる可能性がありますので、ご注意下さい。



おこづかいサイト部門の通算獲得額ランキングで1位に輝くげん玉は、おこづかいサイトの王様とも言えるサイトです。
その特徴は、頻繁に開催される各種のキャンペーン、この新鮮味を失わせないサプライズがあるからこそ、げん玉が人気サイトであり続けているのだと思います。
げん玉に未登録の方は、この機会に是非ご登録をご検討下さい。

コチラもご参照下さい。
PCでもスマホでも稼げるおこづかいサイトの王様【げん玉】

↓コチラからご登録いただけると、特典として250ポイント獲得できます↓

げん玉
このエントリーをはてなブックマークに追加
関連記事

関連キーワード

この記事にトラックバックする(FC2ブログユーザー)
http://bee-dash.com/tb.php/79-2d67023d

トラックバック

コメント

[C9] ありがとうございます!

おおぉ~!
出来ました。一見難しそうな作業ですが、大変丁寧にわかりやすくかかれていたので、こういった知識がほとんどない私にも出来ました。
早速グルプレのクリックに役立たせてもらっています。
ありがとうございましたm(._.)m
  • 2014-11-01 11:32
  • Tati

[C116]

ダメです・・
変わってません _| ̄|○
どこを間違っているのかな (?_?)
  • 2018-03-26 16:04
  • 匿名

[C117] 匿名さん

コメントありがとうございます。
実際に確認してみましたが、Chrome / Firefox / IEのいずれも、意図した通りに色が切り替わりました。
具体的にどこに問題があるのか私にはわかりませんが、どこかを間違えているはずです。
  • 2018-03-26 17:03
  • ハタラキバチ

コメントの投稿 *「コメント」以外は空欄のままでもご投稿いただけます

管理者にだけ表示を許可する

すぐたま 期間限定 ここから登録で600mile(300円相当)GET!

各種クイズの答えを検索できます

最新記事

プロフィール

ハタラキバチ


ブログ管理者:ハタラキバチ

支出や個人情報が必要な案件は、極力ノータッチというスタンスでおこづかい稼ぎに臨んでいるため、広告利用は控えめ。
得意分野は、ブラウザの拡張機能やソフトウェアを活用した裏技 / 小技です。

  • 通算獲得額 (2014/1~)
    :2,642,611円
  • 2018年3月度 獲得額
    :63,886円



獲得額ランキング

2018年3月度 獲得額:63,886 円
順位サイト名獲得額
1クラウドワークス18,016円
2ランサーズ11,837円
3A8.net4,100円
4忍者AdMax4,091円
5キューモニター2,398円
6ポイントインカム2,213円
7infoQ2,001円
8マクロミル1,879円
9ECナビ /
リサーチパネル
1,826円
10げん玉1,443円

通算獲得額(2014/1~):2,642,611円
順位サイト名獲得額
1クラウドワークス620,072円
2ランサーズ415,747円
3infoQ153,680円
4げん玉110,941円
5A8.net103,947円
6キューモニター87,644円
7ポイントタウン77,941円
8ECナビ /
リサーチパネル
64,394円
9マクロミル54,152円
10ちょびリッチ46,947円

ブログランキング参加中

くる天 人気ブログランキング

メールフォーム

名前:
メール:
件名:
本文:

免責事項

当ブログに掲載されている情報は、当該記事の執筆当時におけるものであり、最新の情報とは異なる可能性がございます。
特に、友達紹介特典については、キャンペーン開催や制度改定により、特典内容が変更されることがございますので、ご注意下さい。

また、掲載する情報の確認には十分に配慮しておりますが、その正確性を保証するものではございません。
当ブログの利用により生じた、いかなる損害についても、その責任は負いかねますので、情報の取り扱いは自己責任にてお願い致します。