ブログ画像の保存を防ぐ方法｜右クリック禁止のコードと限界

2024年10月5日

結論：Webページに表示できる画像の保存を完全に禁止することはできません。ただし、画像上の右クリックメニューやドラッグを抑え、無断利用への注意を示すことはできます。まずは対象画像だけに対策を適用し、閲覧者の操作を妨げないか確認しましょう。

生徒

ペン博士、画像が勝手に保存されちゃうって本当ですか？

ペン博士

そうだ！画像は見た目に華やかだけど、無断で保存されたり転載される危険もある。ただし、右クリックを止めても完全には防げない。できることと限界を分けて考えよう。

生徒

お願いします！

ブログやWebサイトの画像を無断利用されにくくしたい方へ、右クリックメニューとドラッグを抑える実装例を紹介します。CSSやJavaScriptは操作を制限するだけで、画像ファイルへのアクセス自体は止められません。効果と限界を確認してから導入してください。

「学習→収入」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

渡邊さん
薬局薬剤師として働く中で「今後需要のあるスキルを身に付けたい」「副業で稼げるレベルになりたい」と考えプログラミングの学習を独学で始めるも、学習内容が案件獲得に結びつくビジョンが見えず、スクールやメンターを検討していたところWithCodeに出会って受講されました。入学から2カ月間の学習に取り組んだ後、無事に卒業テストを合格した。現在は、本業を薬剤師として働きながら、副業として案件を担当をされています。

詳しくはこちらの記事をご覧ください。

ブログ画像を保存禁止にする理由は？著作権とアクセス対策を解説

ブログやWebサイトにおいて、多くのブロガーやWebサイト運営者にとって頭を悩ませるのは、これらの画像が簡単に無断で保存されてしまうことです。特にご自身で撮影した写真や作成したグラフィックは注意する必要があります。

ペン博士

著作権侵害とブランドの毀損
SEO評価の分散と順位低下

生徒

オリジナルの価値が減っちゃうんですね…怖い

ご自身の画像を無断で保存されないようにするは、CSSなどを使った方法で防ぐことができます。無断保存の防止は、ブログやWebサイトのコンテンツを守り、さらに独自性を維持するための有効な方法です。

画像の転載は、権利者の許諾が必要な場合があります。一方で、著作権法上の例外に当たる利用もあるため、保存や転載を一律に犯罪とは扱えません。詳しくは文化庁の制度解説を確認してください。
引用元 : LEGAL MALL

画像保存禁止の設定方法5つ|初心者向けコード実装手順

ペン博士

ここからは画像保存を禁止する方法を解説していくぞ！

生徒

お願いします！

右クリックを禁止する

画像の無断保存を防ぐための最も簡単な方法の一つが、「右クリック禁止」です。ユーザーが画像を右クリックしてメニューを開き、「名前を付けて画像を保存」オプションを選択することを防ぐことで、画像の保存をブロックします。右クリックを禁止するためには、JavaScriptやCSSを利用して簡単に実装できます。

以下は、CSSとJavaScriptを使って右クリックを無効化するコード例です。

CSSでの右クリック禁止（簡易的な対策）

CSSのpointer-events: noneは画像をポインター操作の対象から外します。ただし操作は背後の要素に届くため、画像ファイルの保存を防ぐ設定ではありません。

img {
  pointer-events: none;
}

画像のクリックや拡大表示まで使えなくなる場合があります。pointer-eventsは操作設計のためのCSSであり、保存対策としては推奨しません。右クリックメニューを抑える場合は、影響する画像を限定したJavaScriptを検討してください。

JavaScriptでの右クリック禁止

JavaScriptを使って画像の右クリックを無効化でき、右クリックメニューの表示を防ぐことができます。

document.addEventListener('contextmenu', function(event) {
  event.preventDefault();
}, false);

このコードは、ページ全体の右クリックを禁止するコードです。ページ内のどこを右クリックしても、右クリックメニューが表示されません。もし特定の画像に対してのみ右クリックを禁止したい場合は、次のように指定できます。

const images = document.querySelectorAll('img');
  images.forEach(img => {
  img.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  });
});

このスクリプトは、<img>タグに対してのみ右クリックを無効にします。ページ内の他の要素には影響を与えないため、ユーザーの利便性を損なうことなく、画像のみを保護することが可能です。

ペン博士

右クリック禁止は有効な方法だが欠点もあるのじゃ

右クリックを禁止することは、ブログやWebサイト上の画像を無断で保存されるのを防ぐための有効な方法ですが、完全ではありません。例えば、ブラウザの開発者ツールを使ってソースコードを確認すれば、画像のURLを取得してダウンロードされる可能性もあります。そのため、CSSやJavaScriptだけでなく、他のセキュリティ手段と組み合わせて、コンテンツ保護を強化することが重要です。

右クリック禁止で抑えられるのはブラウザ上の操作だけです。画像URLの直接取得や画面撮影は止められないため、これだけで画像を保護できるとは考えないでください。

画像のドラッグを禁止する

ブログやWebサイトの画像を無断で保存されるのを防ぐために、画像のドラッグを禁止する方法も効果的です。多くのユーザーは、画像をドラッグ＆ドロップしてデスクトップに保存する方法を利用します。これを防ぐためには、CSSやJavaScriptを使ってドラッグ機能を無効化することが可能です。

画像のドラッグを禁止するために最も簡単な方法の一つが、CSSのuser-dragプロパティを使用する方法です。次のCSSコードを使うことで、ユーザーが画像をドラッグして保存することを防げます。

CSSでの画像ドラッグ禁止

img {
  -webkit-user-drag: none; /* Chrome, Safari, Operaを禁止する場合 */
  -khtml-user-drag: none; /* Konquerorを禁止する場合 */
  -moz-user-drag: none; /* Firefoxを禁止する場合 */
}

このCSSコードを使用すると、ブラウザが画像をドラッグできないように制御します。このコードによって、ユーザーが画像をクリックしてドラッグできなくなり、簡単に画像を保存されるリスクを大幅に軽減できます。この方法は、ほとんどのモダンブラウザでサポートされているため、広範囲に保護が可能です。

JavaScriptでの画像ドラッグ禁止

JavaScriptでも、画像のドラッグを無効化することが可能です。次のコードは、ドラッグの操作を検出し、それを無効化することで、ユーザーが画像をドラッグするのを防げます。

document.querySelectorAll('img').forEach(img => {
  img.addEventListener('dragstart', function(event) {
  event.preventDefault();
  });
});

このスクリプトを使用すると、ページ上のすべての画像でドラッグ操作が無効になり、ユーザーは画像をドラッグしてデスクトップや他のアプリケーションにドロップできなくなります。

ペン博士

画像ドラッグ禁止にはメリットがあるが注意も必要じゃ

画像のドラッグ禁止は、右クリック禁止と組み合わせることで、無断保存対策としてさらに効果的になります。ただし、画像のURLを直接取得することは依然として可能であり、完全な保護は保証されません。そのため、CSSやJavaScriptによる禁止措置は、あくまで第一段階の防御策と考え、その他のセキュリティ対策と併用することが推奨されます。

ブログやWebサイトを運営する上で、画像の保護は重要な課題の一つです。初心者でも実装可能なこれらの技術を活用して、コンテンツを守りながら、ユーザーの利用体験を維持するバランスを取ることが求められます。

[HTMLのみ]右クリックと画像のドラッグを禁止する

1. 右クリックを禁止する

右クリックを禁止することで、ユーザーが右クリックメニューから「名前を付けて画像を保存」することを防ぎ、次のHTMLコードを画像に適用することで、右クリックを無効化できます。

<img src="画像のパス" oncontextmenu="return false;" />

このコードでは、oncontextmenu=”return false;”が右クリックメニューを無効にします。このコーディングによって、画像上で右クリックをしても保存メニューが表示されません。

2. 画像のドラッグを禁止する

ユーザーが画像をドラッグして保存しようとする行為も禁止でき、次のコードを使用すると、画像の選択やドラッグを無効化できます。

<img src="画像のパス" onselectstart="return false;" onmousedown="return false;" />

このコードのonselectstart=”return false;”は、テキストや画像の選択を無効にし、onmousedown=”return false;”は画像をマウスで押した際の操作を無効にします。

3. 右クリックと画像のドラッグをどちらも禁止する

このコードでは、右クリックとドラッグ操作の両方が無効化され、画像が無断で保存されるのを防ぎます。

<img src="画像のパス" oncontextmenu="return false;" onselectstart="return false;" onmousedown="return false;" />

このコードを使用することで、ユーザーは画像を右クリックして保存することも、画像をドラッグしてコピーすることもできません。右クリックとドラッグ操作の両方を一度に防ぐことができ、シンプルな実装で画像の保護を強化できます。

HTMLとCSSを併用してコンテンツを保護する

画像の無断保存を防ぐためには、HTMLとCSSを併用することで効果的なコンテンツ保護が実現でき、単一の方法で保護するのではなく、複数の手段を組み合わせることで、ユーザーが画像を右クリックしたりドラッグしたりして保存することを難しくすることができます。以下に、HTMLとCSSを併用した具体的な方法を解説します。

1. HTMLとCSSによる右クリックの禁止

HTMLで画像要素にoncontextmenu属性を追加することで、ユーザーが画像を右クリックしてもコンテキストメニューが表示されなくなります。この方法はシンプルで、すぐに実装できるため、多くの初心者に適しています。

<img src="画像のパス" oncontextmenu="return false;" />

このコードでは、oncontextmenu=”return false;”が右クリックを無効にします。

2. 画像のドラッグを無効にする

次に、CSSを使って画像のドラッグを禁止します。CSSのuser-dragプロパティを使用してユーザーが画像をドラッグして保存する行為を無効化しましょう。

img {
  -webkit-user-drag: none; /* Chrome, Safari, Opera */
  -khtml-user-drag: none;  /* Konqueror */
  -moz-user-drag: none;    /* Firefox */
  -o-user-drag: none;      /* Opera */
  user-drag: none;         /* Standard property */
}

3. [発展編]CSSで透明なオーバーレイを使用する

もう一つの方法として、CSSで画像の上に透明なオーバーレイを使用することも有効です。この方法により、ユーザーが画像をクリックしようとしても透明なレイヤーにクリックが届くため、画像の右クリックやドラッグが無効になります。

.image-wrapper {
  position: relative;
}

.image-wrapper img {
  display: block;
}

.image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0); /* 透明なレイヤー */
}

この方法では、画像の上に透明な要素を重ねることで、画像のアクセスを無効化し、透明なレイヤーを置くことによって、画像の保存をさらに難しくできます。