外部リンクをクリック不可にして見せる方法

準備するもの

外部リンクのクリック不可化を行う前に、HTMLファイル内でどのリンクが外部リンク（http://またはhttps://で始まりかつ自分のドメイン以外）で、どのリンクが内部リンク（相対パス・同一ドメイン）かを分類する。内部リンクは生かしたまま外部リンクだけを止めるのが一般的な要件だ。

使用する手法を決めるために「視覚的に無効化をわかりやすくしたいか」を確認する。CSSでpointer-events:noneにすると外観は変わらないためレビュアーが「クリックできない」と気づかない場合がある。無効化したことを視覚的に示したいなら、text-decorationをlinethrough（打ち消し線）にするか、カーソルをnot-allowedに変えるスタイルを追加する。

外部リンクに使うURLパターンを確認しておく。全て絶対URLなのか、一部が相対パスで書かれているのかによって、JavaScriptでの選択条件が変わる。「href属性がhttp://またはhttps://で始まるリンク」というセレクタで通常は対応できるが、//で始まるプロトコル相対URLが混在していないかも合わせて確認する。

• 相手がログインなしで開ける状態か確認する
• PCとスマホで最低1回ずつ表示を確認する
• 内部情報・個人情報・不要な外部送信が残っていないか見る
• レビュー期限と修正時の差し替え方を決めておく

実際の手順

最もシンプルなCSS方法は<style>a[href^='http']{pointer-events:none;cursor:not-allowed;opacity:0.7;}</style>をheadに追加する方法だ。外部リンクがグレーアウトされてカーソルが禁止マークになるため、レビュアーが一目でクリック不可とわかる。ただし内部リンク（相対パス）には適用されないため内部遷移の確認は引き続き可能だ。

JavaScriptを使う方法は、外部リンクのhref属性を「#」に書き換えてクリック時のデフォルト動作を止める。</body>の前に<script>document.querySelectorAll('a[href^="http"]').forEach(a=>{a.dataset.originalHref=a.href;a.setAttribute('href','#');a.addEventListener('click',e=>e.preventDefault());});</script>を追加する。data-original-href属性に元のURLを保存しているため、後で復元することも可能だ。

修正後はローカルで全ての外部リンクをクリックして動作を確認してから、ギガサイト便にアップロードしてURLを発行する。共有メッセージには「外部リンクはレビュー用にクリック不可にしています。内部ページへの遷移は通常通り動作します」と明記して、意図的な仕様と説明する。

失敗しやすい点

CSSのpointer-events:noneはタッチデバイスでも有効だが、一部のモバイルブラウザではタップが貫通することがある。モバイルでのレビューが必要な場合はJavaScriptのpreventDefaultと組み合わせて確実に止める。

JavaScriptによるhref書き換えをDOMContentLoadedの前に実行すると、リンクが書き換わる前にユーザーがクリックした場合に外部リンクが開いてしまう。スクリプトは</body>直前に配置するか、DOMContentLoadedイベントのコールバック内で実行するように書く。

外部リンクを全て無効化したつもりが、画像のaタグラップや、SVGアイコン内の<a>要素などを見落とすケースがある。a[href^='http']セレクタはSVG内のアンカーには適用されないブラウザもあるため、SVGを多用しているページでは追加で確認が必要だ。

テンプレ文面

〇〇ページのレビュー版をお送りします。外部サイトへのリンクはレビュー中の誤遷移防止のためクリック不可にしています。ページ内リンク・同サイト内リンクは通常通りご利用いただけます。ご確認ポイント：①リンクテキストの言い回しが自然か ②リンク色のコントラスト比が十分か。URL：[プレビューURL]

「外部リンクはクリック不可」と伝えつつ「内部リンクは通常通り」と補足することで、レビュアーがページ内遷移を試みるのを妨げない。レビューに必要な操作と無効化している操作を明確に分けて伝えることが、スムーズなフィードバックを得る上で重要だ。