ブログ画像を守る！簡単なコードでできる保存禁止の設定方法

2024年10月5日

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

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

ブログやWebサイトにおいて、画像は視覚的な魅力を高める重要な要素です。しかし、多くのブロガーやWebサイト運営者にとって頭を悩ませるのは、これらの画像が簡単に無断で保存されてしまうことです。特にご自身で撮影した写真や作成したグラフィックは、他者に勝手に利用されることで、著作権の侵害やブランドイメージの低下につながるリスクがあります。

そのため、ブログ運営者としては、ご自身の画像を無断で保存されないようにする対策が必要です。CSSなどを使った保存禁止の設定は、技術的にそれほど難しくないうえに、ユーザーに対して明確なメッセージを送る手段となります。無断保存の防止は、ブログやWebサイトのコンテンツを守り、さらに独自性を維持するための有効な方法です。

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

画像保存を禁止する方法

右クリックを禁止する

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

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

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

CSSでは、pointer-eventsプロパティを使用して、要素への操作を無効化することができます。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); /* 透明なレイヤー */
}

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

まとめ

本記事では、初心者向けの簡単なCSS実装を中心に、画像保存を防ぐための方法を紹介しました。

ブログやWebサイトで使用している画像を無断で保存されるリスクを最小限にするためには、CSSを使った保存禁止の設定が非常に有効です。右クリックを禁止することで、ユーザーが画像を簡単に保存するのを防ぎ、さらにドラッグを無効にすることで、画像の不正利用をさらに防ぐことができます。

CSSとHTMLを組み合わせることで、初心者でも手軽に画像保護ができるようになります。特に、コードのコピー＆ペーストで簡単に実装できるため、技術的な知識が少ない人でも安心して使えるのが魅力です。

本記事で紹介した保存禁止の方法を活用して、ご自身のコンテンツを守っていきましょう。

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

期間：1週間
学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

↓

公式サイトから無料カウンセリングに申し込む →

この記事を書いた人

WithCode 編集部

WithCode(ウィズコード)は「目指すなら稼げる人材」というコンセンプトを掲げ、累計300名以上の卒業生を輩出してきたプログラミングスクールです。Web制作・Webデザインに関する役立つ情報や有意義な情報を発信していきます。