色が変わらないポイントサイトやそのコンテンツがあります。上掲スクリーンショットはクリックポイントが豊富なことで名高いライフマイル。トップページ下方に設置されているクリックポイントの箇所です。どれがクリック済みのリンクなのか分かるでしょうか?もちろん分かりません。クリック済みのリンクであっても、未読のものと同じ外見のままなので見分けが付かないのです。初回のみが獲得対象であるクリックポイントを再度クリックしたところでポイントはもらえません。取り忘れているかもしれない。そんなふうに思い、確認のために重複上等でクリックしているという人は案外いるのではないでしょうか。この記事では、そのような非効率的なクリックを省く方法を紹介します。ライフマイルは、クリック単価がアップするという素晴らしいステータスシステムをせっかく採用しているのですから、わざわざこちらから単価を下げるような振る舞いはナンセンスでしょう。どなたでも簡単に実践できますので是非参考にしてみてください。既読リンクの色の変更方法これは、一度クリックしたリンクの色を変更するように設定して重複クリックを避けるという方法です。ブラウザに実装されているユーザー定義スタイルシートを活用します。!important;}上のコードをユーザー定義スタイルシートに記述して適用すると、こうなります。青い色のままのリンクが新たに追加されたクリックポイントです。確認のためのクリックをする必要はもうありません。各ブラウザでの適用例ではライフマイルを例にスタイルを実際に設定してみましょう。ユーザー定義スタイルシートを管理できるアドオンを使うとこの作業は非常に楽になります。Firefoxアドオン「Stylish」をインストールしてブラウザを再起動します。設定ができる「S」のアイコンが追加されていますので、これをクリック。「新しいスタイルを書く」から「白紙のスタイル」を選択します。名前の欄には切り替える時に分かりやすい名前を入れておきましょう。以下のコードを貼り付けて保存すれば完了です。行目に記述されている適用対象があらかじめ入力されます。色は見やすいものを指定しておきましょう。デフォルトの既読リンク色です。Chromeアドオン「Stylish」をインストールします。書かれている青い部分をクリックしてください。設定ができる「S」のアイコンが追加されていますので、これを右クリックして「オプション」を選択。表示されたページにある「新しいスタイルを作成」をクリックします。適当な名前を付け、有効のチェックボックスをチェック。コード入力欄に以下のコードを貼り付けます。!important;}スタイル適用先はコード欄の下の箇所から指定可能です。「個別指定」ボタンをクリックすると入力項目が表示されます。URL」を選び、その右の欄に「www.lifemile.jp」と入力。最後に左にある「保存」をクリックすれば完了です。「stylish」のようなアドオンはありませんが、ユーザー定義スタイルシートの設定は可能です。ドメインごとの指定ができません。必要になったら切り替えるという作業になるわけですから、それならブラウザ側の色指定を反映させるだけで良いでしょう。ページで指定された色を使用しない」をチェックし、「OK」すれば完了です。既読リンクの色変更という課題は実現できました。次世代ブラウザでの利用をオススメします。便利なアドオンが沢山リリースされています。Redux」は、そのリンク先にいつ訪問したのかを表示してくれます。履歴情報が追記されます。「Visited」は、既読リンクのボーダーや色を変更するだけのシンプルなアドオン。ボーダーラインの有無も指定できます。ショートカットでオンオフの切り替えができるので簡易チェックをする分には良いかもしれません。スタイルシートを使用しない既読リンクのデザインは、後述するようにスタイルシートによって指定されています。いうことは、スタイルシート自体を無効にしてしまえばその指定も無効になるということです。この場合ブラウザに内蔵されているデフォルトスタイルシートによる配色が適用されるため、既読・未読が色で識別できるようになります。いえ、スタイルシートによる全ての指定が無効になるわけですから、さすがにこれは使い勝手が悪いと思います。Redux」にしろ、そのリンクが既読なのか未読なのかの判定にはブラウザの閲覧履歴が参照されています。したがって、その履歴のクリアを行ってしまうとリンクは全て未読扱いになってしまいます。履歴をクリアする際にはよく考えてから実行してください。以上、既読リンクの色の変更方法を説明しました。これで重複クリックをする必要はもうありません。クリック単価を下げず、効率良くクリックポイントを回収していきましょう。ここからは、既読リンクの色が変わらない理由について簡単に説明したいと思います。上記の方法で変えることができたのか。件のライフマイルを具体例として取り上げることにします。ライフマイルのリンク色の設定クリック済みであってもライフマイルのクリックポイントの色が変わらないのは、スタイルシートに次のように書かれていることが原因です。:hover擬似クラスを使って要素にカーソルが合わさった時のアクションを指定しています。変える、というような指示がされています。この記述はクリックポイントのリンクだけを指示しているわけではありません。個別に指示する記述も他にありませんので、そのままこれがクリックポイントの箇所に適用されることになります。:visited擬似クラスを追加し、既読リンクの色を変えてしまおう、という対策になったわけです。ユーザー定義スタイルシートとは?ウェブサイトの閲覧者は、複数のスタイルシートの中から好みのものを選択することができます。標準で内蔵しているもの、制作者スタイルシートはそのウェブページの製作者が作成したものです。ユーザー定義スタイルシートは、ユーザー側で作成するスタイルシートのことです。詳しくは触れませんが、最終的に適用されるスタイルは、スタイルシートの種類や書式などによって決定されます。スタイルの指示が競合している場合、あらかじめ定められている優先順位に従って処理がなされます。今回の方法も、ユーザー定義スタイルシートを使ったことだけが理由なのではなく、優先されるようにユーザー定義スタイルシートに記入したことによって実現しています。関連リンクライフマイル会員ステータスを上げるとクリック単価が劇的に上昇します。ワードホットペッパーリクルートカード楽天カードEPARK楽天市場ショップやサービス名を入力して送信してください。ポイントサイトに掲載されている案件を高還元順にソートして表出力します。iroha2p.net。