【決定版】HTMLでコピー禁止を実装する方法！CSS・JS・スマホ対応からSEOへの影響まで完全解説

HTML
記事内に広告が含まれています。

「自分のサイトの文章や画像を簡単にコピーされないようにしたい」「右クリックやテキストコピーを禁止する方法はあるの？」と考えたことはありませんか。ブログ記事や企業サイトなど、時間をかけて作ったコンテンツがそのままコピーされてしまうと、とても残念ですよね。実際、HTMLの仕組み上コピーを完全に防ぐことは難しいですが、CSSやJavaScriptを使うことで“簡単にはコピーできない状態”にする対策は可能です。

例えば、CSSの「user-select: none;」でテキスト選択を制限したり、JavaScriptの「oncopy」や「oncontextmenu」を使って右クリックやコピー操作を無効化したりすることで、コピーのハードルを上げることができます。また、記事本文だけコピー禁止にする、画像の右クリック保存を防ぐ、スマホの長押しコピーを制限するなど、用途に応じた実装方法もあります。

この記事では、HTML・CSS・JavaScriptを使ったコピー禁止の実装方法を初心者にも分かりやすく解説します。コピペで使えるコード例も紹介しながら、画像コピー対策やスマホ対応、WordPressでの実装方法までまとめて解説します。さらに、コピー禁止の限界やSEOへの影響、もしコンテンツを無断転載された場合の対処方法についても紹介します。

この記事を読んでわかること

  • HTML・CSS・JavaScriptでコピー禁止を実装する基本的な方法
  • CSS「user-select: none;」でテキスト選択を禁止する方法
  • JavaScriptで右クリックやコピー操作を無効化する方法
  • 特定の文章・画像・フォームだけコピー禁止にする実装方法
  • スマホ（iPhone・Android）の長押しコピーを防ぐ方法
  • WordPressサイトでコピー禁止を設定する方法
  • コピー禁止の限界やSEO・ユーザビリティへの影響
  • コンテンツが無断転載された場合の対処方法（DMCA申請など）

「HTMLでコピー禁止にするにはどうすればいいの？」という疑問を解決できるよう、実装手順を順番に解説していきます。ぜひ参考にしてみてください。

  1. HTMLでコピー禁止する方法（CSS・JavaScript対応）
    1. HTMLだけでコピー禁止は可能？初心者が最短で対策する3つの方法
    2. CSS「user-select: none;」でテキスト選択を禁止する方法
    3. JavaScript「oncopy / oncontextmenu」で右クリックとコピーを無効化する方法
  2. 特定の要素だけコピー禁止にする方法
    1. 特定の文章だけコピー禁止にするセレクタ指定の書き方
    2. input・textareaのコピー＆ペーストを禁止する方法（フォーム対策）
    3. メールアドレスや電話番号だけコピー禁止にする実装例
  3. 画像（imgタグ）のコピー・保存を禁止する方法
    1. 右クリック保存を防ぐJavaScript実装
    2. 画像ドラッグ保存を防ぐCSS設定
    3. 透過オーバーレイを使った画像コピー防止テクニック
  4. スマホ（iPhone・Android）でコピー禁止を機能させる方法
    1. スマホの長押しコピーを防ぐCSSとJavaScript
    2. PCとスマホでコピー禁止の挙動が違う理由
    3. タッチデバイス向けの追加ガード方法
  5. WordPressでコピー禁止を実装する方法
    1. header.phpにJavaScriptを追加して右クリック禁止にする方法
    2. WP Content Copy Protectionなどプラグインで対策する方法
    3. WordPressで特定ページだけコピー禁止にする方法
  6. コピー禁止を解除する方法（動作確認・デバッグ用）
    1. JavaScriptを無効化してコピー禁止を解除する方法
    2. Chrome DevToolsでコピー制限を解除する仕組み
    3. CSSのuser-select制限を解除する方法
  7. HTMLコピー禁止の限界とSEO・UXへの影響
    1. コピー禁止は完全防止できる？スクショ・ソース表示の限界
    2. Google検索順位への影響は？SEOペナルティの可能性
    3. コピー禁止のメリット・デメリット（ユーザビリティとのバランス）
  8. コンテンツ盗用された場合の対処法
    1. 無断転載を発見したときの問い合わせテンプレート
    2. Google DMCA侵害申し立ての手順
    3. 著作権表示・利用規約でコンテンツを守る方法
  9. よくある質問（FAQ）
  10. まとめ

HTMLでコピー禁止する方法（CSS・JavaScript対応）

HTMLだけでコピー禁止は可能？初心者が最短で対策する3つの方法

結論から言うと、HTMLタグだけではコピー禁止を実現できません。 HTMLはあくまでページの「構造」を定義するものであり、ブラウザの操作を制御する機能を持っていないからです。

しかし心配しないでください。HTMLと組み合わせて使う CSS と JavaScript を活用すれば、コピー禁止・右クリック禁止・テキスト選択禁止を短いコードで実装できます。まずは全体像を把握しましょう。

方法使う技術難易度対象
テキスト選択を禁止CSS★☆☆ 簡単文字・段落
右クリックメニューを無効化JavaScript★★☆ 普通ページ全体・特定要素
コピーショートカットを無効化JavaScript★★☆ 普通ページ全体

💡 3つを組み合わせるのが最も効果的です。 CSSだけでは Ctrl+A → Ctrl+C でコピーできてしまいます。JavaScriptだけでは右クリック禁止でもドラッグ選択が残ります。両方実装することで、コピー禁止の抜け穴を最小化できます。

CSS「user-select: none;」でテキスト選択を禁止する方法

CSSの user-select: none; は、マウスでドラッグしてもテキストが反転（選択状態）にならないようにするプロパティです。イメージとしては「ページ全体にガラスを貼って触れなくする」感覚に近いです。

以下のコードを CSSファイル（例：style.css）またはHTMLの <head> 内の <style> タグ に追加するだけで動作します。

/* ページ全体のテキスト選択を禁止する */
body {
  user-select: none;
  -webkit-user-select: none; /* Safari / iOS Chrome 対応 */
  -moz-user-select: none;    /* Firefox 対応（念のため） */
  -ms-user-select: none;     /* 旧Edge / IE 対応 */
}

特定の要素だけを選択禁止にしたい場合は、body の部分をクラス名やIDに変えるだけです。フォームの入力欄など「選択できないと困る」場所には user-select: text; で個別に選択を許可できます。

/* 全体を禁止しつつ、フォームだけ許可する例 */
body {
  user-select: none;
  -webkit-user-select: none;
}

input,
textarea,
select {
  user-select: text; /* フォームは選択・入力できるようにする */
  -webkit-user-select: text;
}

⚠️ 注意：CSSだけでは完全なコピー禁止にはなりません。 テキストを選択できなくても、Ctrl+A でページ全体を選択してからCtrl+Cを押すとコピーできます。次のJavaScript対策と組み合わせて使いましょう。

JavaScript「oncopy / oncontextmenu」で右クリックとコピーを無効化する方法

JavaScriptを使うと、右クリックメニューの表示をブロックしたり、Ctrl+C / Command+C によるコピー操作そのものを無効化することができます。CSSのテキスト選択禁止と組み合わせることで、より強固なコピー禁止対策が実現します。

以下のコードを、HTMLの </body> 直前に貼り付けてください。

<script>
  // ① 右クリックメニューを無効化する
  document.oncontextmenu = function() {
    return false;
  };

  // ② コピー操作（Ctrl+C / Command+C）を無効化する
  document.oncopy = function() {
    return false;
  };

  // ③ カット操作（Ctrl+X）も合わせて無効化する（任意）
  document.oncut = function() {
    return false;
  };
</script>

さらに、「コピーしようとした人へメッセージを表示したい」 という場合は、以下のように変更することで右クリック時にアラートを出すこともできます。ただし、頻繁にアラートが出るとユーザーにとって煩わしい場合があるため、メッセージは控えめにするか省略するのがおすすめです。

<script>
  // 右クリックをブロックしてメッセージ表示する例
  document.addEventListener('contextmenu', function(e) {
    e.preventDefault(); // ブラウザのデフォルト動作を止める
    alert('このサイトのコンテンツは著作権により保護されています。');
  });

  // コピーをブロックする例（アラートは省略してもOK）
  document.addEventListener('copy', function(e) {
    e.preventDefault();
  });
</script>

✅ CSSとJavaScriptを組み合わせたコピー禁止の最終形がこちらです。 まず上で紹介したCSSを <head> 内に追記し、次にJavaScriptコードを </body> 直前に追記するだけで、テキスト選択・右クリック・コピーショートカットの3つをまとめて対策できます。コピペするだけで実装できるので、ぜひ試してみてください。

Element: copy イベント - Web API | MDN
copy イベントは、ユーザーがブラウザーのユーザーインターフェイスからコピー操作を実行したときに発生します。
developer.mozilla.org

次のセクションでは、ページ全体ではなく特定の要素だけをコピー禁止にする方法を解説します。「重要な文章だけ守りたい」「フォームは普通に使わせたい」という方はぜひ続けてお読みください。

特定の要素だけコピー禁止にする方法

特定の文章だけコピー禁止にするセレクタ指定の書き方

前のセクションでは body に対してコピー禁止を設定しました。しかし実際のサイト運営では、「記事本文だけ守りたい」「ヘッダーやフッターは普通に使わせたい」 という場面も多いはずです。

CSSのセレクタを使えば、クラス名やIDを指定するだけで特定の要素だけをピンポイントでコピー禁止にできます。

/* クラス名で指定する例（例：.protected というクラスを付けた要素だけ禁止） */
.protected {
  user-select: none;
  -webkit-user-select: none;
}

HTML側は、保護したい要素に class="protected" を追加するだけです。

<!-- この段落だけコピー禁止にする -->
<p class="protected">この文章は無断転載を禁止しています。</p>

<!-- この段落は普通にコピーできる -->
<p>お気軽にシェアしてください。</p>

IDで特定のブロックごと禁止したい場合は、以下のように書きます。

/* 記事本文エリアだけコピー禁止にする例 */
#article-body {
  user-select: none;
  -webkit-user-select: none;
}
<div id="article-body">
  <p>ここに記事本文が入ります。このエリア全体がコピー禁止になります。</p>
  <p>見出しや本文、リストなど、div内のすべての要素が対象です。</p>
</div>

💡 クラスは複数の要素に使い回せるのが利点です。サイト内で保護したい箇所すべてに class="protected" を付けておけば、CSS側の1行を変更するだけで一括管理できます。

input・textareaのコピー＆ペーストを禁止する方法（フォーム対策）

お問い合わせフォームや会員登録フォームで、パスワードや個人情報のコピー＆ペーストを制限したいというケースがあります。たとえば「パスワード確認欄に貼り付けを禁止して、必ず手入力させたい」という場合です。

以下のJavaScriptを </body> 直前に追記することで、特定の input や textarea のコピー・ペースト・カットをまとめて無効化できます。

<script>
  // IDが "confirm-password" のinputだけコピペを禁止する例
  const targetInput = document.getElementById('confirm-password');

  if (targetInput) {
    // ペースト禁止
    targetInput.addEventListener('paste', function(e) {
      e.preventDefault();
    });

    // コピー禁止
    targetInput.addEventListener('copy', function(e) {
      e.preventDefault();
    });

    // カット禁止
    targetInput.addEventListener('cut', function(e) {
      e.preventDefault();
    });
  }
</script>

HTMLのフォーム側は、対応するIDを付けるだけです。

<label>パスワード（確認用）</label>
<input type="password" id="confirm-password" placeholder="もう一度入力してください">

クラス名を使って複数のフィールドをまとめて禁止したい場合は、getElementById の代わりに querySelectorAll を使います。

<script>
  // class="no-paste" が付いたすべての入力欄にペースト禁止を適用する
  const noPasteFields = document.querySelectorAll('.no-paste');

  noPasteFields.forEach(function(field) {
    field.addEventListener('paste', function(e) {
      e.preventDefault();
    });
    field.addEventListener('copy', function(e) {
      e.preventDefault();
    });
  });
</script>

⚠️ ユーザビリティに注意してください。 パスワードマネージャーを利用しているユーザーにとって、ペースト禁止は大きなストレスになります。セキュリティ上の強い理由がない限り、ペースト禁止の実装は慎重に検討しましょう。

メールアドレスや電話番号だけコピー禁止にする実装例

問い合わせ先のメールアドレスや電話番号は、スパムボットに収集されるリスクがあります。かといってコピー禁止にしすぎると、スマホで電話番号をタップしてかけるといった正当な操作まで妨げてしまうことになりかねません。

ここでは、表示はしつつ、テキストとしての選択・コピーだけをブロックする実装例を紹介します。

まずHTMLで、メールアドレスや電話番号に専用のクラスを付けます。

<!-- メールアドレスと電話番号に保護クラスを付ける -->
<p>お問い合わせ：<span class="protected-contact">info@example.com</span></p>
<p>電話番号：<span class="protected-contact">03-XXXX-XXXX</span></p>

次にCSSでテキスト選択を禁止します。

/* メールアドレス・電話番号のテキスト選択を禁止 */
.protected-contact {
  user-select: none;
  -webkit-user-select: none;
}

さらに、右クリックのみその要素に限定して禁止したい場合はJavaScriptを追加します。

<script>
  // class="protected-contact" が付いた要素の右クリックだけ無効化する
  const contacts = document.querySelectorAll('.protected-contact');

  contacts.forEach(function(el) {
    el.addEventListener('contextmenu', function(e) {
      e.preventDefault();
    });
  });
</script>
対策防げること防げないこと
user-select: noneマウスでのドラッグ選択ソースコードからの確認
右クリック禁止（JS）右クリック→コピーキーボードショートカット
CSS＋JS の組み合わせ一般ユーザーの操作的な転用開発者ツールによる取得

✅ 「完全防止」よりも「気軽なコピーを防ぐ」という意識で実装するのがポイントです。 スパムボットへの対策としては、メールアドレスをJavaScriptで動的に組み立てて表示する方法も有効です。次のセクションでは、画像のコピー・保存防止について解説します。

画像（imgタグ）のコピー・保存を禁止する方法

右クリック保存を防ぐJavaScript実装

画像の無断転載対策として、まず思い浮かぶのが右クリックからの「名前を付けて画像を保存」をブロックする方法です。テキストのコピー禁止と同じく、contextmenu イベントを使って実装します。

ページ内のすべての画像に対して右クリックを禁止する場合は、以下のコードを </body> 直前に追記してください。

<script>
  // ページ内のすべての画像の右クリックを禁止する
  const images = document.querySelectorAll('img');

  images.forEach(function(img) {
    img.addEventListener('contextmenu', function(e) {
      e.preventDefault();
    });
  });
</script>

特定の画像だけを保護したい場合は、クラス名で絞り込みます。

<!-- 保護したい画像にクラスを付ける -->
<img src="photo.jpg" alt="オリジナル写真" class="protected-img">

<!-- このサムネイルは保護しない -->
<img src="thumb.jpg" alt="サムネイル">
<script>
  // class="protected-img" の画像だけ右クリックを禁止する
  const protectedImages = document.querySelectorAll('.protected-img');

  protectedImages.forEach(function(img) {
    img.addEventListener('contextmenu', function(e) {
      e.preventDefault();
    });
  });
</script>

⚠️ 右クリック禁止だけでは「完全な保存防止」にはなりません。 ブラウザのアドレスバーに画像URLを直接入力したり、開発者ツールからURLを取得すれば保存できてしまいます。あくまで「ライトユーザーへの抑止力」として捉え、後述の対策と組み合わせて使いましょう。

画像ドラッグ保存を防ぐCSS設定

デスクトップブラウザでは、画像をデスクトップや別のフォルダへドラッグ＆ドロップするだけで保存できてしまいます。 右クリック禁止だけではこのルートを防げないため、CSSとHTMLの属性で合わせてブロックします。

まずCSSで、画像のドラッグ操作そのものを無効化します。

/* すべての画像のドラッグを禁止する */
img {
  -webkit-user-drag: none; /* Safari / Chrome 対応 */
  user-drag: none;         /* 標準プロパティ（将来的な対応） */
  pointer-events: none;    /* クリック・ドラッグなどのマウス操作を無効化 */
}
/* 特定クラスの画像だけドラッグを禁止する場合 */
.protected-img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

さらに、HTMLの draggable 属性を "false" に設定しておくと、より確実にドラッグを防ぐことができます。

<!-- draggable="false" でドラッグによる保存を防ぐ -->
<img src="photo.jpg" alt="オリジナル写真" draggable="false" class="protected-img">

💡 pointer-events: none; を使うと、画像へのクリック・ホバーなどのマウス操作がすべて無効になります。 画像にリンクを貼っている場合はリンクもクリックできなくなるため、リンク付き画像には使わず、代わりに user-drag: none; と draggable="false" の組み合わせに留めましょう。

透過オーバーレイを使った画像コピー防止テクニック

より実践的な画像保護として広く使われているのが、画像の上に透明な要素を重ねて覆う「オーバーレイ方式」です。ユーザーが右クリックしたり保存操作をしようとしても、実際にクリックされるのは画像ではなく上に乗っている透明な div になります。見た目はまったく変わらないため、一般の訪問者には画像を保護していることすら気づかれません。

仕組みのイメージとしては、「額縁に入った絵画の上にガラスを貼っている」状態です。ガラス（オーバーレイ）に触れることはできても、絵画（画像）そのものには直接触れられません。

実装は以下の手順で行います。

HTMLの構造：

<!-- 画像をdivで囲み、その中に透過オーバーレイを重ねる -->
<div class="image-wrapper">
  <img src="photo.jpg" alt="オリジナル写真" draggable="false">
  <div class="image-overlay"></div>
</div>

CSSの設定：

/* 親要素を基準にオーバーレイを配置する */
.image-wrapper {
  position: relative;  /* 子要素の基準点にする */
  display: inline-block;
}

/* 透明なオーバーレイを画像の上に重ねる */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* 完全に透明 */
  z-index: 10;             /* 画像より前面に配置 */
}

/* 画像本体のドラッグも念のため禁止 */
.image-wrapper img {
  display: block;
  -webkit-user-drag: none;
  user-drag: none;
}

これだけで、右クリック・ドラッグによる画像保存の両方をブロックできます。さらに、オーバーレイ自体の右クリックも禁止しておくと、より完全な対策になります。

<script>
  // オーバーレイへの右クリックも禁止する
  const overlays = document.querySelectorAll('.image-overlay');

  overlays.forEach(function(overlay) {
    overlay.addEventListener('contextmenu', function(e) {
      e.preventDefault();
    });
  });
</script>

以上のCSS・HTML属性・JavaScript・オーバーレイの4つを組み合わせた対策をまとめると、次の表のようになります。

対策防げる操作コード量
右クリック禁止（JS）右クリック→画像を保存少ない
draggable="false" + CSSドラッグ＆ドロップ保存少ない
透過オーバーレイ（CSS）右クリック・ドラッグの両方中程度
4つの組み合わせ一般ユーザーの主要な保存操作中程度

✅ 最も効果が高いのは「透過オーバーレイ＋右クリック禁止JS＋draggable=”false”」の組み合わせです。 ただし、開発者ツールからCSSのURLを確認すれば画像を取得されてしまうという限界もあります。完全な画像保護が必要な場合は、サーバー側でのアクセス制御やウォーターマーク（透かし）の埋め込みも合わせて検討しましょう。次のセクションでは、スマートフォンでコピー禁止を機能させる方法を解説します。

スマホ（iPhone・Android）でコピー禁止を機能させる方法

スマホの長押しコピーを防ぐCSSとJavaScript

PCでは右クリックやCtrl+Cがコピーの主な手段ですが、スマートフォンではテキストや画像を長押しするとメニューが表示され、そこからコピーや保存ができてしまいます。 この「長押しメニュー」をブロックするには、PC向けの対策とは別に、タッチデバイス専用の設定が必要です。

まずCSSから対応しましょう。以下のプロパティを追加することで、長押し時に表示されるコンテキストメニューと、テキスト選択のハイライトを同時に抑制できます。

/* スマホの長押しメニューとテキスト選択をまとめて禁止する */
body {
  user-select: none;
  -webkit-user-select: none;       /* iOS Safari 対応（必須） */

  -webkit-touch-callout: none;     /* iOS Safari の長押しメニューを無効化 */
  touch-action: pan-x pan-y;       /* スクロールは許可しつつ、長押し選択を抑制 */
}

💡 -webkit-touch-callout: none; はiOS Safari専用のプロパティです。 iPhoneで画像を長押しした際に「写真を保存」「リンクをコピー」などが表示されるメニューを、このプロパティ1行で無効化できます。Androidには効きませんが、iPhoneユーザーへの対策として必ず追加しておきましょう。

次に、JavaScriptで touchstart イベントを使い、長押し操作そのものを検知してブロックします。

<script>
  // 長押し（touchstart）によるコンテキストメニュー表示を禁止する
  document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
  });

  // 長押し中のテキスト選択開始イベントをブロックする
  document.addEventListener('selectstart', function(e) {
    e.preventDefault();
  });

  // タッチ操作でのコピーをブロックする
  document.addEventListener('copy', function(e) {
    e.preventDefault();
  });
</script>

画像の長押し保存を防ぐには、前のセクションで紹介した -webkit-touch-callout: none; をimg要素にも個別に適用しておくと安心です。

/* 画像の長押しメニュー（保存・コピー）を禁止する */
img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

PCとスマホでコピー禁止の挙動が違う理由

同じコードを実装しても、PCとスマホで動作が異なる場合があります。その理由を理解しておくと、トラブルシューティングがぐっと楽になります。

比較項目PC（デスクトップ）スマホ（iPhone・Android）
主なコピー操作右クリック・Ctrl+C・ドラッグ選択長押し→メニュー選択
右クリックイベントcontextmenu で制御可能長押しで代替発火（ブラウザ依存）
テキスト選択user-select: none で防止可能-webkit-user-select: none が必要
画像保存右クリック→保存長押し→「写真に追加」など
長押しメニュー抑制該当なし-webkit-touch-callout: none が必要

PCとスマホで挙動が変わる主な原因は以下の3点です。

  • ブラウザエンジンの違い： iOSのすべてのブラウザ（Chrome・Firefox含む）は内部的にSafariと同じWebKitエンジンを使用しています。そのため、webkit- プレフィックスが付いたプロパティへの対応が必須です。
  • イベントの発火タイミングの違い： PCでは右クリックの瞬間に contextmenu イベントが発火しますが、スマホでは長押しが一定時間続いた後に発火します。この遅延のせいで、JavaScriptの制御が間に合わないケースがあります。
  • OSレベルの制限： AndroidのChromeなど一部のブラウザは、セキュリティ上の理由からJavaScriptによる一部のイベントのキャンセルを受け付けない場合があります。

⚠️ 「PCでは動いているのにスマホで効かない」という場合、まず -webkit-user-select: none; と -webkit-touch-callout: none; が記述されているか確認してください。 この2行が抜けているだけで、iPhoneでの対策がほぼ無効になります。

タッチデバイス向けの追加ガード方法

CSSとJavaScriptの基本対策に加えて、タッチデバイス特有の抜け穴を塞ぐ追加の実装を紹介します。

① 長押し判定をJavaScriptで自前実装する

一部のAndroid端末では contextmenu イベントが長押しで発火しないことがあります。その場合、タッチ時間を自分で計測してブロックする方法が有効です。

<script>
  let touchTimer = null;

  // タッチ開始時にタイマーをセット
  document.addEventListener('touchstart', function(e) {
    touchTimer = setTimeout(function() {
      // 500ms以上押し続けたら長押しと判断してブロック
      e.preventDefault();
    }, 500);
  });

  // タッチが終わったらタイマーをリセット
  document.addEventListener('touchend', function() {
    clearTimeout(touchTimer);
  });

  // タッチ中に指が動いた場合もリセット（スクロールと区別する）
  document.addEventListener('touchmove', function() {
    clearTimeout(touchTimer);
  });
</script>

② メディアクエリでスマホだけに追加CSSを適用する

スマホにだけ追加のコピー禁止スタイルを当てたい場合は、メディアクエリで切り分けます。PC側のデザインや操作性に影響を与えずに済むため、安全に実装できます。

/* スマホ（幅768px以下）にだけ適用するコピー禁止スタイル */
@media (max-width: 768px) {
  body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  img {
    -webkit-touch-callout: none;
    pointer-events: none;
  }
}

③ スマホ向けのコピー禁止対策チェックリスト

実装後は以下の項目を実機で確認しましょう。

  • iPhoneのSafariでテキストを長押しして選択メニューが出ないか
  • iPhoneのSafariで画像を長押しして「写真に追加」が出ないか
  • AndroidのChromeでテキストを長押しして選択ハンドルが出ないか
  • AndroidのChromeで画像を長押しして保存メニューが出ないか
  • スクロール操作が正常にできるか（コピー禁止でスクロールが止まっていないか）

✅ スマホ対策の最重要ポイントは「iOSのSafari」と「AndroidのChrome」の両方で実機テストすることです。 エミュレーターでは再現しない挙動が実機で起きることも珍しくありません。特にiOSは -webkit-touch-callout: none; の有無で大きく挙動が変わるため、必ず確認するようにしてください。次のセクションでは、WordPressでコピー禁止を実装する具体的な方法を解説します。

WordPressでコピー禁止を実装する方法

header.phpにJavaScriptを追加して右クリック禁止にする方法

WordPressでコピー禁止を実装する方法はいくつかありますが、プラグインを使わずに手軽に対応したい場合は、テーマファイルの header.php に直接JavaScriptを追記する方法が最もシンプルです。

作業手順は以下のとおりです。

  1. WordPressの管理画面にログインする
  2. 左メニューの「外観」→「テーマエディター」を開く
  3. 右側のファイル一覧から header.php をクリックする
  4. </head> タグの直前に以下のコードを貼り付ける
  5. 「ファイルを更新」ボタンをクリックして保存する
<!-- header.php の </head> 直前に追記する -->
<style>
  body {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  img {
    -webkit-touch-callout: none;
    pointer-events: none;
  }
</style>

<script>
  // 右クリック禁止
  document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
  });

  // コピー禁止（Ctrl+C / Command+C）
  document.addEventListener('copy', function(e) {
    e.preventDefault();
  });

  // カット禁止（Ctrl+X）
  document.addEventListener('cut', function(e) {
    e.preventDefault();
  });
</script>

⚠️ テーマエディターで直接ファイルを編集する前に、必ずバックアップを取ってください。 また、テーマをアップデートすると header.php への変更が上書きされて消えてしまいます。子テーマ（Child Theme）を作成してそちらに記述することで、アップデートの影響を受けずに設定を維持できます。

なお、テーマエディターが使えない場合や、より安全に実装したい場合は、functions.php にフックを使って読み込む方法もあります。

// functions.php に追記する方法
// 外部JSファイルをheadに読み込ませる例
function add_copy_protection_script() {
    ?>
    <script>
      document.addEventListener('contextmenu', function(e) { e.preventDefault(); });
      document.addEventListener('copy', function(e) { e.preventDefault(); });
    </script>
    <?php
}
add_action('wp_head', 'add_copy_protection_script');

WP Content Copy Protectionなどプラグインで対策する方法

プログラミングの知識がなく、ファイルの直接編集に不安がある方には、プラグインを使う方法が最も安全で手軽です。代表的なプラグインと特徴を以下にまとめました。

プラグイン名無料/有料主な機能
WP Content Copy Protection & No Right Click無料（Pro版あり）右クリック禁止・テキスト選択禁止・開発者ツール制限
Disable Right Click For WP無料右クリック禁止・シンプルな設定画面
Copy Protection YOK無料テキスト選択禁止・画像ドラッグ禁止

WP Content Copy Protection & No Right Click のインストールと設定手順は以下のとおりです。

  1. 管理画面の「プラグイン」→「新規追加」を開く
  2. 検索欄に 「WP Content Copy Protection」 と入力して検索する
  3. 該当プラグインの「今すぐインストール」→「有効化」をクリックする
  4. 左メニューに追加された 「WP Content Copy」 の設定画面を開く
  5. 「Right Click Protection」「Text Selection Protection」などの項目をオンにして保存する

💡 プラグインの最大のメリットは、コードを一切書かずに設定画面から ON/OFF を切り替えられる点です。 ただし、使用しているテーマやほかのプラグインと競合して正常に動作しないケースもあります。インストール後は必ず実際のページで動作確認を行いましょう。

WP Content Copy Protection (WP 記事コピー保護) & No Right Click (右クリック禁止)
This WP plugin protects posts from being copied (content copy protection). Keep your content safe from unauthorized distribution!
ja.wordpress.org

WordPressで特定ページだけコピー禁止にする方法

サイト全体ではなく、有料コンテンツのページや、特定のカテゴリの記事だけをコピー禁止にしたいというケースも多いはずです。WordPressでは functions.php を使ってページIDやカテゴリを条件に絞り込むことができます。

特定のページIDだけコピー禁止にする場合：

// functions.php に追記する
function add_copy_protection_specific_pages() {
    // コピー禁止にしたいページのIDを配列で指定する
    $protected_page_ids = array(123, 456, 789);

    if (is_page($protected_page_ids)) {
        ?>
        <script>
          document.addEventListener('contextmenu', function(e) { e.preventDefault(); });
          document.addEventListener('copy', function(e) { e.preventDefault(); });
          document.addEventListener('selectstart', function(e) { e.preventDefault(); });
        </script>
        <style>
          body { user-select: none; -webkit-user-select: none; }
        </style>
        <?php
    }
}
add_action('wp_head', 'add_copy_protection_specific_pages');

特定のカテゴリの投稿だけコピー禁止にする場合：

// functions.php に追記する
function add_copy_protection_specific_category() {
    // コピー禁止にしたいカテゴリのスラッグを指定する
    if (is_category('premium') || in_category('premium')) {
        ?>
        <script>
          document.addEventListener('contextmenu', function(e) { e.preventDefault(); });
          document.addEventListener('copy', function(e) { e.preventDefault(); });
        </script>
        <style>
          body { user-select: none; -webkit-user-select: none; }
        </style>
        <?php
    }
}
add_action('wp_head', 'add_copy_protection_specific_category');

投稿（記事）の個別ページだけに適用したい場合は、is_single() を使います。

// functions.php に追記する
function add_copy_protection_single_posts() {
    // 個別投稿ページにだけ適用する
    if (is_single()) {
        ?>
        <script>
          document.addEventListener('contextmenu', function(e) { e.preventDefault(); });
          document.addEventListener('copy', function(e) { e.preventDefault(); });
        </script>
        <style>
          body { user-select: none; -webkit-user-select: none; }
        </style>
        <?php
    }
}
add_action('wp_head', 'add_copy_protection_single_posts');

よく使うWordPressの条件分岐タグをまとめると、以下のようになります。

条件分岐タグ適用されるページ
is_page(ID)指定したIDの固定ページ
is_single()すべての個別投稿ページ
is_category('スラッグ')指定したカテゴリのアーカイブページ
in_category('スラッグ')指定したカテゴリに属する投稿
is_home()ブログのトップページ

✅ functions.php を編集する際は、必ず子テーマの functions.php に記述してください。 親テーマの functions.php に直接書いてしまうと、テーマのアップデート時にコードが消えてしまいます。また、PHPの記述ミスはサイト全体が表示されなくなる原因にもなるため、編集前にバックアップを取る習慣をつけておきましょう。次のセクションでは、実装したコピー禁止を解除・確認する方法（デバッグ）について解説します。

コピー禁止を解除する方法（動作確認・デバッグ用）

JavaScriptを無効化してコピー禁止を解除する方法

このセクションは、自分のサイトに実装したコピー禁止が正しく動いているか確認したい場合や、設定を一時的に解除してデバッグしたい開発者・サイト管理者向けの内容です。

JavaScriptで実装した右クリック禁止やコピー禁止は、ブラウザのJavaScriptをオフにするだけで無効化できます。主要ブラウザでの手順は以下のとおりです。

Google Chromeの場合：

  1. 右上の「︙（メニュー）」→「設定」を開く
  2. 左メニューの「プライバシーとセキュリティ」→「サイトの設定」をクリック
  3. 「JavaScript」→「サイトがJavaScriptを使用することを許可しない」を選択する
  4. 対象のページをリロードしてコピー禁止が解除されているか確認する
  5. 確認後は必ず「許可する（推奨）」に戻す

Firefox の場合：

  1. アドレスバーに about:config と入力してEnterを押す
  2. 警告画面で「危険性を承知の上で使用する」をクリック
  3. 検索欄に javascript.enabled と入力する
  4. 値を true から false に切り替える
  5. 確認後は必ず true に戻す

⚠️ JavaScriptを無効化するとコピー禁止以外の機能（メニュー、フォーム、動的コンテンツなど）もすべて止まります。 デバッグ目的以外でオフにしたまま使い続けることは避け、確認後は必ず元に戻してください。

Chrome DevToolsでコピー制限を解除する仕組み

Google Chromeの開発者ツール（DevTools）を使うと、JavaScriptを完全にオフにしなくても、コピー禁止の仕組みを一時的に無効化したり動作を確認したりできます。技術的な知識がある人であれば、以下の方法でコピー制限を解除できてしまうという点も、コピー禁止の限界を理解する上で重要な知識です。

方法① イベントリスナーを一時的に削除する

  1. F12キー（またはCmd+Option+I）でDevToolsを開く
  2. 「Console」タブをクリックする
  3. 以下のコードを入力してEnterを押す
// contextmenu（右クリック）の禁止を一時的に解除する
const originalAddEventListener = EventTarget.prototype.addEventListener;
document.oncontextmenu = null;
document.oncopy = null;
document.oncut = null;

// 確認：右クリックやコピーが動作するようになっているはず
console.log('コピー禁止イベントをリセットしました');

方法② JavaScriptの実行を一時停止してページを操作する

  1. DevToolsの「Sources」タブを開く
  2. 左上の「︙」→「Pause on exceptions」をオンにする
  3. ページをリロードしてJSの実行を一時停止した状態でテキストを選択する

方法③ CSSのuser-selectをDevToolsで上書きする

  1. DevToolsの「Elements」タブで <body> タグを選択する
  2. 右側の「Styles」パネルで user-select: none を見つける
  3. チェックボックスをオフにしてプロパティを無効化する
  4. ページ上でテキストが選択できるようになっているか確認する

💡 これらの操作はページをリロードすると元に戻ります。 あくまで一時的なデバッグ手段として活用してください。また、この方法でコピー禁止が解除できてしまうという事実は、「コピー禁止は完全な防止策ではない」ことを示しています。詳しくは次の章で解説します。

CSSのuser-select制限を解除する方法

CSSで実装した user-select: none; によるテキスト選択禁止を解除・上書きする方法を確認しておきましょう。自分のサイトで「特定の要素だけ選択を許可したい」と後から設定変更する際にも役立ちます。

① CSSで上書きして解除する

すでに body に user-select: none; が設定されている状態で、特定の要素だけ選択を許可したい場合は、以下のように user-select: text; で上書きします。

/* body全体を禁止しつつ、特定クラスだけ選択を許可する */
body {
  user-select: none;
  -webkit-user-select: none;
}

/* このクラスが付いた要素は選択できるようにする */
.selectable {
  user-select: text;
  -webkit-user-select: text;
}
<!-- 選択を許可したい要素に .selectable を付ける -->
<p class="selectable">この文章はコピーできます。</p>
<p>この文章はコピーできません。</p>

② JavaScriptで動的に解除する

ボタンを押したときだけコピーを許可するなど、条件付きで制限を解除したい場合はJavaScriptで動的に制御できます。

<button onclick="allowCopy()">コピーを許可する</button>
<button onclick="blockCopy()">コピーを禁止する</button>

<script>
  function allowCopy() {
    document.body.style.userSelect = 'text';
    document.body.style.webkitUserSelect = 'text';
    document.oncopy = null;
    document.oncontextmenu = null;
    console.log('コピーを許可しました');
  }

  function blockCopy() {
    document.body.style.userSelect = 'none';
    document.body.style.webkitUserSelect = 'none';
    document.oncopy = function() { return false; };
    document.oncontextmenu = function() { return false; };
    console.log('コピーを禁止しました');
  }
</script>

③ WordPressで実装したコピー禁止を解除する手順

WordPressでプラグインまたはコードで実装したコピー禁止を解除する場合は、以下の手順で対応します。

実装方法解除手順
プラグイン管理画面「プラグイン」→該当プラグインを「無効化」または設定画面でOFFに変更
header.php に直接記述テーマエディターで追記したコードを削除して保存
functions.php に記述追記したPHPコードを削除して保存
子テーマのCSS子テーマの style.css から user-select: none; を削除

✅ コピー禁止を実装したら、必ず「解除できる状態を把握しておく」ことが重要です。 問い合わせフォームが使えない、ユーザーからクレームが来たなど、予期しないトラブルが発生した際に素早く対応できます。次のセクションでは、コピー禁止の技術的な限界と、SEO・ユーザビリティへの影響について詳しく解説します。

HTMLコピー禁止の限界とSEO・UXへの影響

コピー禁止は完全防止できる？スクショ・ソース表示の限界

ここまで様々なコピー禁止の実装方法を紹介してきましたが、率直にお伝えすると、HTMLやCSS・JavaScriptによるコピー禁止は「完全な防止策」にはなりません。 技術的な知識を持つユーザーには、以下の方法で簡単に突破されてしまいます。

抜け穴となる操作防止できるか補足
スクリーンショット❌ 防止不可OS標準機能のため、ブラウザからは制御できない
ページのソース表示（Ctrl+U）❌ 防止不可HTMLのソースコードは誰でも閲覧可能
開発者ツール（DevTools）❌ 防止不可CSSやJSの無効化が自由にできる
JavaScriptの無効化❌ 防止不可ブラウザ設定で簡単にオフにできる
画像URLの直接アクセス❌ 防止不可DevToolsでURLを確認して直接開ける
右クリックからのコピー✅ 防止可能JS実装で有効
マウスドラッグによる選択✅ 防止可能CSS実装で有効
長押しコピー（スマホ）✅ 防止可能CSS＋JS実装で有効

つまり、コピー禁止対策が有効に機能するのは「普通の操作でうっかりコピーしようとする一般ユーザー」に対してだけです。悪意を持ってコンテンツを盗用しようとする相手に対しては、抑止力にはなっても完全な防止にはなりません。

💡 コピー禁止の本質的な価値は「完全防止」ではなく「ハードルを上げること」にあります。 鍵のかかっていない自転車よりも、鍵がかかっている自転車のほうが盗まれにくいのと同じ考え方です。手軽なコピーを防ぎ、無断転載のリスクを下げる効果は十分にあります。

Google検索順位への影響は？SEOペナルティの可能性

「コピー禁止を実装するとSEOに悪影響が出るのでは？」 と心配される方は多いです。結論から言うと、適切に実装すれば、コピー禁止そのものがGoogleの検索順位に直接ペナルティを与えることはありません。

Googleのクローラー（検索エンジンのロボット）はJavaScriptを実行しながらページを読み込みますが、contextmenu や copy イベントのブロックはクローラーの動作に影響を与えないため、インデックスや評価への直接的な悪影響はないと考えられています。

ただし、以下の点には注意が必要です。

① pointer-events: none; を画像全体に適用する場合

画像に pointer-events: none; を設定すると、Googleの画像クローラーが画像を正しく認識できなくなる可能性があります。画像SEOを重視している場合は、透過オーバーレイ方式を採用し、img要素への pointer-events: none; は避けるようにしましょう。

② user-select: none; とテキストのインデックス

user-select: none; はあくまでユーザーの操作を制限するCSSプロパティであり、テキストの存在そのものを隠すわけではありません。Googleはページのテキストを通常どおり読み取れるため、検索インデックスへの影響はありません。

③ JavaScriptで動的にテキストを生成・隠蔽している場合

一部のコピー禁止実装では、テキストをJavaScriptで動的に生成したり、CSSの clip や opacity: 0 で視覚的に隠す手法も見られます。こういった「ユーザーには見えないテキストを仕込む」実装はGoogleのガイドライン違反になるリスクがあります。 今回紹介したシンプルなCSS・JS実装の範囲であれば問題ありません。

⚠️ SEOへの影響よりも深刻なのは、コピー禁止によるユーザビリティの低下です。 ユーザーが使いづらいと感じて直帰率が上がったり、滞在時間が短くなったりすることは、間接的に検索順位の低下につながります。次の項目でバランスについて詳しく解説します。

コピー禁止のメリット・デメリット（ユーザビリティとのバランス）

コピー禁止の実装を検討する際には、保護の効果とユーザーへの影響を天秤にかけることが重要です。一方的に制限を強めると、誠実な読者まで不便にさせてしまうからです。

コピー禁止のメリット：

  • 一般ユーザーによる無断転載・コピーの抑止力になる
  • オリジナルコンテンツへの著作権意識を示せる
  • 競合サイトによる記事のコピー盗用リスクを下げられる
  • 画像・写真の無断使用を防ぐ効果がある

コピー禁止のデメリット：

  • 読者がメモ・引用目的でテキストをコピーできなくなる
  • パスワードマネージャーや翻訳ツールが正常に動作しなくなる場合がある
  • アクセシビリティが低下し、スクリーンリーダー利用者に影響が出ることがある
  • 「使いにくいサイト」という印象を与え、離脱率が上がるリスクがある
  • スマホで住所や電話番号をコピーしてアプリに貼り付ける操作ができなくなる

どのようなバランスが理想的か：

すべてのサイトに同じ設定が最適というわけではありません。サイトの性質に合わせて、以下のように実装の強度を使い分けるのがおすすめです。

サイトの種類推奨する実装レベル
写真家・イラストレーターのポートフォリオ画像保護を強化（オーバーレイ＋右クリック禁止）。テキストは制限しない
有料会員向けコンテンツテキスト・画像ともに強めに保護。会員限定ページのみに適用
一般的な企業サイト・ブログ右クリック禁止程度に留める。または対策なしでも可
ECサイト・予約サイトコピー禁止は最小限に。住所・電話番号は必ずコピーできるようにする
ニュース・情報メディア引用・シェアを促進する観点から、コピー禁止は推奨しない

✅ 「全部禁止」よりも「守るべき箇所だけを守る」設計が、ユーザーにとっても運営者にとっても最善です。 たとえば、記事本文は保護しつつ、問い合わせ先の電話番号や住所は必ずコピーできるように user-select: text; で解除しておくといった工夫が大切です。コンテンツ保護と使いやすさのバランスを意識した実装を心がけましょう。次のセクションでは、万が一コンテンツが無断転載された場合の具体的な対処法を解説します。

コンテンツ盗用された場合の対処法

無断転載を発見したときの問い合わせテンプレート

自分のサイトのコンテンツが無断転載されているのを発見したとき、まず取るべき行動は盗用先のサイト運営者に直接削除を求める連絡です。多くの場合、この段階で解決することが少なくありません。

問い合わせ先は「お問い合わせページ」や「プライバシーポリシー」に記載されたメールアドレスを探しましょう。見つからない場合は、ドメインのWHOIS情報（登録者情報）を調べると連絡先が判明することがあります。

以下は、そのままコピーして使える削除依頼メールのテンプレートです。

件名：著作権侵害コンテンツの削除依頼について

〇〇様

突然のご連絡失礼いたします。
私は【自分のサイト名・URL】を運営しております【氏名または屋号】と申します。

貴サイトにて、私が著作権を有するコンテンツが無断で転載されていることを確認いたしました。

■ 侵害されているコンテンツ（オリジナル）
URL：【自分のオリジナル記事・画像のURL】
公開日：【オリジナルの公開日】

■ 無断転載されているページ
URL：【相手サイトのURL】
転載されているコンテンツ：【具体的に何が転載されているか】

上記コンテンツは、私が独自に制作したものであり、
転載・複製の許可を一切行っておりません。

つきましては、【転載コンテンツの削除】または【適切なクレジット表記と引用元リンクの設置】を
○月○日までにご対応いただきますようお願い申し上げます。

ご対応いただけない場合は、Googleへの著作権侵害申告や
法的措置を検討せざるを得ない旨、申し添えます。

何卒ご対応のほどよろしくお願いいたします。

【氏名または屋号】
【メールアドレス】
【サイトURL】

メール送信時のポイントをまとめます。

  • オリジナルの証明として、公開日時が確認できるスクリーンショットやキャッシュを保存しておく
  • 感情的な表現は避け、事実と要求事項だけを簡潔に伝える
  • 対応期限を明示することで、相手に緊急性を伝えられる
  • 送信後は返信を待ち、無視された場合に次のステップへ進む

💡 連絡前に必ず証拠を保全してください。 相手が削除してしまうと証拠が消えてしまいます。問題のページのスクリーンショット、URLと日時が確認できる状態で保存しておきましょう。Wayback Machine（web.archive.org）のキャッシュも証拠として活用できます。

Google DMCA侵害申し立ての手順

直接連絡しても無視された、または連絡先が見つからない場合の次の手段が、GoogleへのDMCA（デジタルミレニアム著作権法）に基づく著作権侵害の申し立てです。申し立てが認められると、該当ページがGoogle検索の結果から削除されます。盗用ページへのアクセスを大幅に減らす効果があるため、非常に有効な対策です。

申し立ての手順は以下のとおりです。

  1. Googleの著作権侵害申告フォームにアクセスするhttps://support.google.com/legal/troubleshooter/1114905 を開く
  2. 申告の種類を選択する
    「ウェブ検索」→「著作権」を選択する
  3. 申告者情報を入力する
    氏名、メールアドレス、著作権者との関係（本人か代理人か）を入力する
  4. 侵害コンテンツの情報を入力する 以下の情報を正確に入力する
    • オリジナルコンテンツのURL（自分のサイト）
    • 侵害しているページのURL（相手サイト）
    • 侵害されているコンテンツの説明
  5. 宣誓文に同意してフォームを送信する
    申告内容が正確であることを確認し、電子署名を行う

申し立てから処理完了までの目安は数日〜数週間です。処理状況はGoogleの「透明性レポート」で確認できます。

申立先効果対応期間の目安
Google検索検索結果から削除数日〜数週間
Google画像検索画像検索から削除数日〜数週間
Googleアドセンス広告配信の停止数週間
YouTube動画の削除数日

⚠️ DMCA申し立ては虚偽の申告に対して法的責任が生じます。 自分が著作権者であることを確認した上で申告してください。また、DMCAはアメリカの法律ですが、Googleはグローバルで対応しているため、日本のサイト同士のトラブルでも利用できます。

著作権表示・利用規約でコンテンツを守る方法

技術的な対策と並行して、法的な根拠を明示しておくことも重要な盗用抑止策です。著作権表示や利用規約をサイトに設けることで、「このコンテンツには著作権があり、無断使用は許可されていない」という意思を明確に示せます。

① フッターへの著作権表示（コピーライト表記）

最も手軽な方法が、サイトのフッターにコピーライト表記を入れることです。以下のHTMLをフッターに追加しましょう。

<!-- フッターに著作権表示を追加する -->
<footer>
  <p>&copy; 2024 【サイト名またはあなたの名前】 All Rights Reserved.</p>
</footer>

WordPressの場合は、footer.php または Customizer の「フッターテキスト」欄に記載します。

② 利用規約ページに明記すべき内容

利用規約ページには、少なくとも以下の項目を記載しておくことを推奨します。

  • サイト内のすべてのコンテンツ（文章・画像・動画）の著作権は運営者に帰属すること
  • 無断での転載・複製・改変・再配布を禁止すること
  • 引用する場合のルール（出典明記・引用元リンクの設置など）
  • 著作権侵害を発見した場合の連絡先

③ 画像へのウォーターマーク（透かし）の埋め込み

写真やイラストを公開している場合、画像にウォーターマーク（透かし）を入れることで、盗用されても出所が明らかになります。右クリック禁止などの技術的対策と組み合わせると効果的です。

WordPressでは以下のプラグインで自動透かしを実現できます。

プラグイン名主な機能
Image Watermarkアップロード画像に自動でテキスト・画像透かしを追加
WP Watermark Images透かしの位置・サイズ・透明度を細かく設定可能

④ Creative Commonsライセンスの活用

「完全に禁止」ではなく「条件付きで利用を許可したい」という場合は、Creative Commons（CC）ライセンスの表示が有効です。「クレジット表記すれば使用可能」「非商用目的のみ許可」など、利用条件を明示することで誠実なユーザーとの関係を保ちながら著作権を守れます。

<!-- Creative Commons表示の例（表示・非営利・改変禁止） -->
<p>
  この作品は
  <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.ja" target="_blank">
    CC BY-NC-ND 4.0
  </a>
  のもとに提供されています。
</p>

✅ 技術的なコピー禁止対策・著作権表示・利用規約の3つを組み合わせることが、コンテンツ保護の最も効果的なアプローチです。 技術的な対策だけでは法的な根拠が弱く、利用規約だけでは実際の盗用を止められません。3つを揃えることで、抑止力・法的根拠・対処手段のすべてが整います。次のセクションでは、読者からよく寄せられる疑問をQ&A形式でお答えします。

よくある質問（FAQ）

コピー禁止を実装したら、Googleのクローラーもブロックされてしまいますか？

いいえ、Googleのクローラーには影響しません。

user-select: none; や contextmenu イベントのブロックは、あくまでブラウザ上でのユーザー操作を制限するものです。Googleのクローラーはこれらの制限を受けずにページのテキストや画像を読み取るため、検索インデックスへの影響はありません。ただし、画像に pointer-events: none; を設定すると画像クローラーの認識に影響する可能性があるため、画像SEOを重視する場合は透過オーバーレイ方式を採用することをおすすめします。

WordPressのプラグインとコードによる実装、どちらがおすすめですか？

プログラミングの知識がない方にはプラグインが安全でおすすめです。

コードによる実装はより細かい制御ができる反面、PHPやJavaScriptの記述ミスがサイト全体の表示崩れや機能不全につながるリスクがあります。一方、プラグインは設定画面からON/OFFを切り替えるだけで済みます。ただし、プラグインが増えるほどサイトの表示速度に影響が出る場合もあるため、シンプルなコード実装に慣れてきたらコードへの移行も検討してみてください。

コピー禁止を実装したら、スマホで住所や電話番号がコピーできなくなって困っています。どうすれば解決できますか？

住所・電話番号の要素だけ user-select: text; で選択を許可してください。

body 全体に user-select: none; を設定した場合でも、特定の要素に user-select: text; を上書きすることで個別に選択を許可できます。以下のように実装します。

/* 全体は禁止しつつ、連絡先だけ許可する */
body {
  user-select: none;
  -webkit-user-select: none;
}

.contact-info {
  user-select: text;
  -webkit-user-select: text;
}
<p class="contact-info">電話番号：XX-XXXX-XXXX</p>
<p class="contact-info">住所：◯◯市◯◯区◯◯1-2-3</p>

右クリック禁止を実装したら、ユーザーからクレームが来るのではないかと心配です。

ある程度のクレームは覚悟しておく必要がありますが、対策次第で最小限に抑えられます。

右クリックを完全にブロックすると、「新しいタブで開く」「リンクをコピー」など、ユーザーが普段使っている便利な操作まで妨げてしまいます。クレームを避けるためには、右クリック禁止の適用範囲をコンテンツ本文エリアだけに絞り込むのが有効です。ナビゲーションメニューやリンクには右クリックを許可しておくことで、ユーザーの不満を大幅に軽減できます。

iPhoneで長押しコピーが防止できていません。どこを確認すればよいですか？

-webkit-touch-callout: none; と -webkit-user-select: none; の両方が記述されているか確認してください。

iOSのSafariでは、この2つのプロパティがセットで必要です。どちらか一方が抜けていると、長押しメニューまたはテキスト選択のどちらかが残ってしまいます。また、CSSの記述場所が正しいか（<head> 内か読み込まれているCSSファイル内か）、ほかのCSSで上書きされていないかも確認してみてください。

/* iPhoneでの長押し対策に必要な2つのプロパティ */
body {
  -webkit-touch-callout: none;  /* 長押しメニューを無効化 */
  -webkit-user-select: none;    /* テキスト選択を無効化 */
}

コピー禁止を実装しても、ソースコードを見れば内容がわかってしまうのではないですか？

そのとおりです。HTMLのソースコードは誰でも閲覧でき、コピー禁止では防げません。

ブラウザのアドレスバーに view-source: を付けてURLを入力したり、開発者ツールを開いたりすれば、ページの内容を自由に確認できます。コピー禁止対策は「ソースコードを隠す」機能ではなく、あくまで「一般ユーザーが通常の操作でコピーするのを防ぐ」 ものです。完全にコンテンツを保護したい場合は、サーバー側でのアクセス制御（会員制ページなど）と組み合わせることを検討してください。

コピー禁止のコードを実装したら、サイトの表示速度は遅くなりますか？

今回紹介したコード量であれば、表示速度への影響はほぼありません。

CSSに数行追加する程度、JavaScriptも数十行程度の軽量なコードのため、ページの読み込み時間に実質的な差は生じません。ただし、プラグインを複数導入する場合は、それぞれのプラグインが読み込むCSS・JavaScriptが積み重なって速度低下につながることがあります。プラグインを使う場合は必要最低限の数に絞ることを意識しましょう。

まとめ

ここまで、HTMLでコピー禁止を実装する方法から、スマホ対応・WordPress対応・コンテンツ盗用への対処法まで、幅広くご紹介してきました。最後に全体を振り返っておきましょう。

コピー禁止対策の基本は、CSSの user-select: none; でテキスト選択を防ぎ、JavaScriptの contextmenu / copy イベントで右クリックとコピー操作をブロックするという2つの組み合わせです。どちらか一方だけでは抜け穴が残るため、必ずセットで実装することをおすすめします。

スマホ対応では -webkit-touch-callout: none; の追記を忘れずに。画像保護には透過オーバーレイ方式が最も実用的です。WordPressをお使いの方は、プラグインか functions.php への記述で手軽に導入できます。

重要ポイント

  • CSSとJavaScriptの組み合わせが最も効果的。どちらか一方では不完全
  • iPhoneへの対応には webkit-touch-callout: none; が必須
  • 住所・電話番号など「コピーさせたい要素」は user-select: text; で個別に解除する
  • 画像保護は透過オーバーレイ＋draggable="false" の組み合わせが実践的
  • コピー禁止はあくまで抑止力。ソースコードの閲覧やスクリーンショットは防げない
  • SEOへの直接的なペナルティはないが、UX悪化による間接的な順位低下には注意
  • 無断転載には「直接連絡 → DMCA申し立て → 法的手段」の順で対応する
  • 著作権表示・利用規約・コピー禁止の3点セットが最強の保護体制

ひとつ大切な心構えとしてお伝えしたいのは、「完全なコピー禁止は存在しない」という事実です。技術的な対策はあくまでハードルを上げるものであり、本気で盗用を試みる相手を完全に防ぐことはできません。それよりも、守るべき箇所をピンポイントで保護しつつ、一般の読者には使いやすいサイトを維持するバランス感覚のほうが、長期的に見てサイトの信頼性とSEO評価の両方を高めてくれます。

コンテンツはあなたが時間と労力をかけて生み出した大切な資産です。今日紹介した対策をひとつずつ実装して、しっかりと守っていきましょう。

あわせて読みたい

【HTML/JS】右クリック禁止は意味ない？コピペでできる実装と、それでもコンテンツを守る秘訣
HTMLとJavaScriptを使って右クリックを禁止する具体的な方法を解説。サイト全体に簡単に導入できるコードから、画像・動画・PDF・スマホ対応の実装テクニックまで網羅。さらに、右クリック禁止の効果や限界、SEOへの影響、CMSでの対応方法までしっかりカバー。コンテンツ保護に本気で取り組みたい方におすすめです。
watashi.xyz
2025.07.08
タイトルとURLをコピーしました