【サイト運営者必見】ブログ画像を守る！簡単なコードでできる保存禁止の設定方法を詳しく解説

2025年6月25日2024年10月5日

生徒

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

ペン博士

そうだ！画像は見た目に華やかだけど、無断で保存されたり転載される危険もある。ただ、しっかり方法を学べば防ぐことができるぞ！

生徒

お願いします！

ブログやWebサイトでせっかく使った画像が、無断で保存されてしまうことに悩んでいませんか？大切なコンテンツを守るためには、画像保存禁止の設定が効果的です。本記事では、CSSなどを使って簡単に画像の保存を禁止する方法を紹介します。

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

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

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

画像を保存禁止にする理由

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

ペン博士

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

生徒

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

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

無断転載は犯罪であり、刑事罰も用意されています。無断転載によって他人の著作権を侵害した場合の刑罰は、10年以下の懲役もしくは1000万円以下の罰金、またはその両方です（著作権法第119条1項）。
引用元 : LEGAL MALL

画像保存を禁止する方法

ペン博士

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

生徒

お願いします！

右クリックを禁止する

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

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

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

CSSでは、pointer-eventsプロパティを使用して、要素への操作を無効化でき、画像のクリックや右クリックを防げます。

img {
  pointer-events: none;
}

このコードは、画像に対して右クリックや通常のクリックを無効化しますが、注意点として、これでは画像の操作全般が無効になってしまうため、ユーザーの操作性が低下する可能性があります。そこで、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だけでなく、他のセキュリティ手段と組み合わせて、コンテンツ保護を強化することが重要です。

このように、簡単に実装できる右クリック禁止の設定を用いることで、初心者でもご自身のブログやWebサイトの画像を保護することが可能です。

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

ブログや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); /* 透明なレイヤー */
}

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