でも、ログイン機能はつけられない。
このような悩みを解決します。
この記事を書いている僕は大手Web制作会社に努めて11年。
Webのスペシャリストです。
Webサイトを運用していると一度は出てくるのが「未読既読」機能です。
本記事では、CSSでできる手軽な「未読既読」機能を解説していきます。
コピペもOKなので、すぐに試していただけます。
目次
「未読既読」機能は難しい！
あなたがWebサイトの担当者なら、上司やクライアントから、
Lineの未読既読があるでしょ？
あんな感じで。
と言われて困ったことはありませんか？
もし「未読既読」機能をつけるとなると、
- ユーザーを特定するために会員制にする
- さらに記事閲覧時にログインさせる
- ユーザー毎、記事毎にデータベースにログを保存する
とかなり大掛かりなシステム改修が必要になります。
会員システムを導入するメリットとデメリット
元々そういった会員システムが導入されているWebサイトであれば良いのですが、通常のオウンドメディアやブログであればログインせずに記事を読めるようにしているサイトが多いです。
その状態で新規で会員システムを導入することは、Webサイトの方針を大きく変更することになります。
会員でしか読めないコンテンツにすると、コアなファン層にはロイヤリティ向上が見込めますが、一般的にはPV数は大幅に下がってしまうことが懸念されます。
Cookieで「未読既読」機能を実現するメリットとデメリット
会員システムを導入せずに「未読既読」機能を実現するためには、「Cookie」を使うことも考えられます。
Cookieとはブラウザに保存される情報のことです。
ユーザ識別やセッション管理を実現する目的などに利用されます。
Cookieを使うとユーザーが識別できるため、ユーザーとコンテンツとを紐付けて、未読既読の判別を行うことができます。
具体的には、既読の記事のIDとなるものをCookieに保存し、ページを表示した際にCookieから保存したIDのリストを読み込み、未読の記事に「未読マーク」をつけたり、反対に既読の記事に「既読マーク」をつけたりします。
この方法であれば、会員システムを導入せずに「未読既読」機能を実現することができるのですが、3つのデメリットがあります。
- Cookieに保存できる容量が決まっている
- 端末やブラウザをかえるとデータが引き継がれない
- セキュリティ対策でCookieをオフにされていると無効になる
Cookieに保存できる容量は、どの端末もおよそ4096byteとなっています。
1byte = 半角1文字
例えば、記事IDを保存しようとすると、区切り文字も含まれるため、
「1,2,3,4,5,6,7,8,9,10」
上記で20byteとなります。
実際の記事IDは2桁以上であることが多いと思いますので、あまり膨大なデータは保存できません。
個人のブログやあまり記事数の多くないWebサイトであれば、それでも問題ないかもしれません。
また、Cookieはブラウザに保存されるものなので、PCからスマホにかえたり、ChromeからFirefoxにブラウザをかえたりすると、データは引き継がれません。
さらに、昨今のセキュリティ対策でCookieをオフにしていたり、許可していないサイトでは無効になる設定をしているユーザーにはCookieを保存できません。
上記3つのデメリットもありますが、それでもカンタンに「未読既読」機能を実現することができるので、その実装方法を選択することも良いですね。
CSSで手軽に「未読既読」機能を実装する
会員システムやCookieで「未読既読」機能を実現する方法をご紹介しましたが、もっと手軽に導入できるCSSで実現する方法を解説します。
それは、「A:link」「A:visited」という
擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。
文章構造の範囲外にある情報によってスタイルを変化させることができます。
A:link・・・未訪問のリンク要素の指定
aタグに対して、そのリンクが未訪問の状態である場合を指定してスタイルを適用します。
A:visited・・・訪問済のリンク要素の指定
aタグに対して、そのリンクが訪問済の状態である場合を指定してスタイルを適用します。
つまり、未訪問のリンクにあてるスタイルと、訪問済のリンクにあてるスタイルをかえることで、未読既読を表現するのです。
この方法であれば、CSSを数行書くだけなので簡単です。
ただし、「A:visited」のみ注意点があります。
訪問済みリンクはセキュリティの問題で制限がかかっており、あてられるスタイルが限定されています。
利用できる CSS プロパティは、 color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color, text-emphasis-color となっています。
そのため上記のCSSプロパティを使用して表現しなければなりません。
コピペOKなCSSによる「未読既読」機能のサンプル
サンプルをご紹介します。
a:link {
border: 2px solid #FF0000;
}a:visited {
border-color: #FFFFFF;
}
未読記事には赤い2ピクセルの枠線がつくようになり、既読記事はその枠線を白にしているので事実上の非表示にしています。
上記サンプルはaタグ全てに対して適用されてしまうので、実際は下記のように適用範囲を指定してください。
a.post-list-link:link {
border: 2px solid #FF0000;
}a.post-list-link:visited {
border-color: #FFFFFF;
}
当ブログでは、下記のサムネイル画像にこのスタイルを適用しています。
未読の記事のみ赤枠がつき、既読の記事には枠がつきません。
まとめ：CSSで手軽に「未読既読」機能を実装する方法
本記事では、会員システムやCookieを使う方法ではなく、CSSの擬似クラスを使用することで簡易的な「未読既読」機能を実現する方法を解説しました。
「A:visited」にセキュリティ上の制限がかかっていて、変更できるのは「カラーのみ」なので表現の幅が狭くなってしまいますが、それでも未読の記事を目立たせることができるため、ユーザービリティの向上が見込めます。
コピペOKですので、ぜひ活用してみてください。
アフィリエイトを始めるなら、まず登録いただきたいASPが「A8.net」
豊富な広告と、使いやすい管理画面。
アフィリエイト満足度ランキングで9年連続1位を獲得！
成果報酬を即日振込申請できる、即時支払機能で報酬を即現金できます。
