「target="_blank"」はリンク色が変わらない
3月末に、私のブログ環境で「訪問済リンク」の色が変わらない現象が、殆どのリンク・ページで生じました。 最初は DevToolsでチェックし、ページのHtmlやCSSをテスト的に書き換えてテストしたのですが、「訪問済リンク」の色が変わる場合はごく限られていて、「変わる場合」と「変わらない場合」の理由が判りませんでした。
しかし、本来なら新仕様であっても変化して良いはずが、殆どの箇所で変わらないため、頭を捻っていたのですが、昨日やっとその理由が判りました。 変わらないリンクは「a要素」に「target="_blank"」の属性が設定されていて、「別タブ」に開くリンクだったのです。
リンクの開き方と「訪問済リンク色」の変化
リンクの「開き方の条件」がややこしいので、整理します。
| 開き方の条件と操作結果 | ※ | |
| ① | 「target="_blank"」の属性がない「a要素」を「Click」 | |
| ➔ 現在の「タブ」にリンク先が開く 「リンク先」に移動 | 〇 | |
| ➁ | 「target="_blank"」の属性が設定された「a要素」を「Click」 | |
| ➔「別タブ」にリンク先が開く 「リンク先」に移動 | ✖ | |
| ➂ | 「a要素」を「右Click」して「新しいタブで開く」 | |
| 「a要素」を「Ctrl+Click」しても同じ | ||
| ➔「別タブ」にリンク先が開く 「元画面」から移動しない | 〇 | |
| ④ | 「a要素」を「右Click」して「新しいウインドウで開く」 | |
| 「a要素」を「Shift+Click」しても同じ | ||
| ➔「別ウインドウ」にリンク先が開く 「リンク先」に移動 | 〇 |
「※」：「〇 / ✖」は「訪問済リンク色」が変化するか変化しないかを表します。
実用的なユーザーインターフェイスから見た現状
私の場合、特に問題にしたのはブログの「HOME」画面の「フォローフィード」の操作上で、今回の Chromeの変更で「既読リンク」が判断出来なくなった事です。「フォローフィード」は「X」のタイムラインと同様で、フォローしたブログの新着記事のリンクがリスト表示される仕組みです。 このリンク群の「訪問済」「未訪問」が、区別できなくなりました。
原因は、リンク群の全てが上表 ➁ の「target="_blank"」の属性があるためでした。 通常のPCユーザーは、「フォローフィード」のリストからリンク先の記事を開いて、再びリストに戻って来る場合が多く、それを想定してリストの「HOME」画面のタブを閉じずに「別タブ」でリンク先を開く様に、アメーバのデフォルトでリンクがデザインされています。 この目的で、リストのリンクは全て「target="_blank"」の属性が指定されているわけです。
① の「target="_blank"」が無い場合は、リストのブログを開く度に「HOME」のタブはそのページに遷移し、元の「HOME」に少し戻り難くなります。 それを気分的なものと思う人も、困ると思う人も居ると思いますが。
やはり、私は普通の「Click」で「別タブ」にリンク先のブログが開き、そのタブに移動する ➁ の状態が、最も使い易いと思います。 しかし、既読・未読を判断したければ、代替の方法は ➂ ④ を使うしかないのが現状です。
その場合、➂ は開いた「別タブ」に移動しないので、一番ましな候補は ④ かなと思います。
打開策についての考察
これは、アメーバブログに限った事ではなく、ネットの各所で生じている問題で、今後に他のブラウザが同様の新仕様を採り入れる可能性が大です。 つまり、リンクに関系するサイトデザインで、新仕様に対応した変更が必要になるかも知れません。
で、具体的な事ですが、これまで ➁ の様に、
▪ リスト「a要素」の「左Click」で「別タブ」にリンク先が開くこと
▪ 開いた「別タブ」の「リンク先」の画面に移動すること
これと同時に、リンクの「a要素」が「訪問済」になる事を可能にしたいわけです。 何か打開策は無いか考えると、
▪ 通常の「左Click」の操作を受けて ➂ の「Ctrl+左Click」と似た結果となる様に、スクリプトで「window.open()」のメソッドを実行しても、「a要素」は何も操作されないので、「訪問済」にはなりません。
▪ ➂の操作を「dispach」すればと思いますが、「Ctrl+左Click」のイベントを生成する事は出来ない様です。 従って、ユーザーのこの操作を JavaScriptに実行させる事は出来ません。
▪ そうなると、「a要素」から「target="_blank"」をスクリプトで削除して、これでユーザーの「a要素」の「Click」で「元タブ」の遷移が生じますが、無くなってしまった「HOME」の「元タブ」の代わりに、「別タブ」に「HOME」を開くという、出来たとしても妙な策しか、改善方法は無さそうな気がします。
以上の様に、色々と考えて見ましたが、新仕様となった状態で、元の様に「訪問済リンク色」を「target="_blank"」の「a要素」に適用することは困難です。
やはり、独自に「訪問済URL」を記録して、そのデータとリストを照合して「既読」を表示するのが、一番スマートな方法の様です。