--- title: "外部リンクをクリック不可にして見せるときの手順と注意点" description: "デザインレビュー用HTMLの外部リンクをクリック不可にして共有したいWeb制作者向け。準備から送付文面まで、失敗しやすいポイントを押さえながら手順を解説します。" image: "https://giga-site.com/og-image.png" canonical: "https://giga-site.com/articles/how-to-disable-external-links-steps-note" markdown: "https://giga-site.com/articles/how-to-disable-external-links-steps-note/index.md" category: "ハウツー" publishedAt: "2026-06-25" updatedAt: "2026-06-25" readingMinutes: 4 --- # 外部リンクをクリック不可にして見せるときの手順と注意点クライアントにデザインカンプや制作物をHTMLで見せる際、外部リンクをうっかりクリックさせてしまうとレビューが中断し、迷子になるリスクがあります。リンクを視覚的に残しつつクリック不可にする処理は数行のCSSで実現できますが、準備不足のまま共有すると別の問題が起きることも。この記事では手順と陥りやすい注意点を順番に整理します。 > Source HTML: https://giga-site.com/articles/how-to-disable-external-links-steps-note > Article index: https://giga-site.com/articles/index.md ## 準備するもの共有前に、レビュアーがパスワードや会員登録なしでURLを開けるか確認します。ギガサイト便などの認証付き共有サービスを使う場合は、招待メールが届いているかテスト送信しておくと当日のトラブルを防げます。 PCとスマートフォンの両方で表示を1回ずつ確認してください。外部リンクを`pointer-events:none`で無効化するCSSは、モバイルのタップ操作でも機能しますが、iOSのSafariでは長押しメニューが出る場合があるため、実機確認が必須です。 HTML内に個人情報（氏名・メールアドレスなど）や社内APIキーがソースコードに埋め込まれていないか、ブラウザの開発者ツールでソースを表示してチェックします。外部リンクを無効化しても、ソース内の情報は閲覧者がコピーできます。 - 相手がログインなしで開ける状態か確認する - PCとスマホで最低1回ずつ表示を確認する - 内部情報・個人情報・不要な外部送信が残っていないか見る - レビュー期限と修正時の差し替え方を決めておく ## 実際の手順外部リンクをクリック不可にするには、``内に``を追記します。`opacity:0.5`を加えると視覚的にも「押せない」とわかりやすくなり、レビュアーの混乱を防げます。次に、変更したHTMLファイルをギガサイト便にドラッグ＆ドロップしてアップロードします。アップロード後に発行されるプレビューURLを自分のブラウザで開き、外部リンクのホバー時にカーソルが矢印のままになっているか、クリックしても遷移しないかを確認してからクライアントに送付します。差し替えが発生した場合は、修正済みのHTMLを同じプロジェクトに再アップロードするだけでURLは変わらずに内容が更新されます。クライアントにURLの再送が不要なため、レビューサイクルがスムーズになります。 ## 失敗しやすい点最も多い失敗は、`href`が相対パスで書かれた内部リンクまで一緒に無効化してしまうケースです。`a[href^='http']`のセレクタは絶対URLのみを対象にしますが、`href='//example.com'`のようなプロトコル相対URLは除外されるため、別途`a[href^='//']`も追記する必要があります。もう一つの落とし穴は、JavaScriptで動的に生成されるリンクです。フレームワーク製のSPAをHTMLとして書き出した場合、CSSだけでは制御しきれないことがあります。その場合はJSで`document.querySelectorAll('a[href]')`を取得し、`e.preventDefault()`を追加するアプローチを検討してください。 ## テンプレ文面「お疲れ様です。デザインレビュー用のプレビューURLをご共有します。ページ内のリンクはレビュー用に無効化しておりますので、クリックしても別ページには遷移しません。確認期限は〇月〇日です。ご意見はこのメールへの返信でお知らせください。」期限を明記することで、リンクを停止するタイミングをあらかじめ合意できます。また「リンクが動かない」という問い合わせを防ぐために、意図的に無効化している旨を一文加えるのがポイントです。修正版を差し替えた場合は「URLは同じです」と一言添えると親切です。 ## よくある質問 ### 外部リンクを無効化したまま印刷させることはできますか？印刷CSSで`@media print{a[href^='http']::after{content:none;}}`を追記すれば、印刷時にURLが表示されなくなります。pointer-eventsは印刷には影響しないため、視覚的な装飾だけ別途調整してください。 ### スマホのSafariで長押しメニューが出てしまうのを防ぐには？ CSSに`-webkit-touch-callout:none;`と`user-select:none;`をリンク要素へ追加すると、長押しによるコンテキストメニューをほぼ抑止できます。ただしアクセシビリティへの影響があるため、レビュー専用URLにのみ適用してください。 ### プレビューURLを送ったあとにリンクを有効に戻せますか？ CSSのpointer-events指定を削除したHTMLを再アップロードするだけで即時反映されます。URLを変えずに内容を差し替えられるサービスであれば、クライアントへの再通知は不要です。 ## 関連記事 - [差し替え履歴をメモするときの手順と注意点](https://giga-site.com/articles/how-to-version-note-steps-note/index.md) - [フォームを無効化して共有するときの手順と注意点](https://giga-site.com/articles/how-to-disable-form-before-share-steps-note/index.md) - [外部リンクをクリック不可にして見せる方法](https://giga-site.com/articles/how-to-disable-external-links-method/index.md) - [外部リンクをクリック不可にして見せるためのチェックリスト](https://giga-site.com/articles/how-to-disable-external-links-checklist/index.md) - [レビュー用URLをSlackで配るときの手順と注意点](https://giga-site.com/articles/how-to-slack-distribute-steps-note/index.md) - [レビュー用URLをTeamsで配るときの手順と注意点](https://giga-site.com/articles/how-to-teams-distribute-steps-note/index.md) ```json { "@context": "https://schema.org", "@type": "Article", "headline": "外部リンクをクリック不可にして見せるときの手順と注意点", "description": "デザインレビュー用HTMLの外部リンクをクリック不可にして共有したいWeb制作者向け。準備から送付文面まで、失敗しやすいポイントを押さえながら手順を解説します。", "datePublished": "2026-06-25", "dateModified": "2026-06-25", "mainEntityOfPage": "https://giga-site.com/articles/how-to-disable-external-links-steps-note", "url": "https://giga-site.com/articles/how-to-disable-external-links-steps-note", "inLanguage": "ja", "image": "https://giga-site.com/og-image.png", "articleSection": "ハウツー", "author": { "@type": "Organization", "name": "ギガサイト便" }, "publisher": { "@type": "Organization", "name": "ギガサイト便" }, "mainEntity": [ { "@type": "Question", "name": "外部リンクを無効化したまま印刷させることはできますか？", "acceptedAnswer": { "@type": "Answer", "text": "印刷CSSで`@media print{a[href^='http']::after{content:none;}}`を追記すれば、印刷時にURLが表示されなくなります。pointer-eventsは印刷には影響しないため、視覚的な装飾だけ別途調整してください。" } }, { "@type": "Question", "name": "スマホのSafariで長押しメニューが出てしまうのを防ぐには？", "acceptedAnswer": { "@type": "Answer", "text": "CSSに`-webkit-touch-callout:none;`と`user-select:none;`をリンク要素へ追加すると、長押しによるコンテキストメニューをほぼ抑止できます。ただしアクセシビリティへの影響があるため、レビュー専用URLにのみ適用してください。" } }, { "@type": "Question", "name": "プレビューURLを送ったあとにリンクを有効に戻せますか？", "acceptedAnswer": { "@type": "Answer", "text": "CSSのpointer-events指定を削除したHTMLを再アップロードするだけで即時反映されます。URLを変えずに内容を差し替えられるサービスであれば、クライアントへの再通知は不要です。" } } ] } ```