サイトの画像ダウンロードを禁止する方法
ホームページを制作する際に、「画像やテキストをコピーできないようにしてほしい」というご要望をいただくことがあります。では、ご自身のサイトや自社のホームページに掲載した写真が無断で使用されるのを防ぐには、どのような対策を講じればよいのでしょうか？
そのための方法として、画像のダウンロードを制限することが有効です。本記事では、簡単に実施でき、かつ効果的な2つの対策をご紹介します。
- 右クリックを禁止する方法
- ページ全体の右クリックを禁止する場合
- bodyの右クリックを禁止する場合
- 指定したところに適用する場合
- メッセージやコメントを表示したい場合
- 右クリック禁止で気をつけたい点
- クリック・タッチを無効化する方法
- 特定の画像のみ指定する場合
- imgタグだけクリック・タッチを無効化する場合
- 特定のimgタグだけクリック・タッチを無効化する場合
- クリック・タッチ無効化で気をつけたい点
- まとめ
右クリックを禁止する方法
サイトの画像ダウンロードを禁止する方法として、右クリックを無効にします。
具体的には、javascriptのcontextmenuを使います。contextmenuを使うことで、右クリックした時にイベントは発生しますが、falseを指定することで、イベントを発生させないようにします。
contextmenuをどこに使うか、いくつかの例を挙げるので、指定の仕方を見ていきましょう。
ページ全体の右クリックを禁止する場合
下記のコードをページ内に記載します。
$(function(){
// 画面全体で右クリックを禁止にする
$(document).on("contextmenu",function(){
return false;
});
});
bodyの右クリックを禁止する場合
body要素に記載します。
<body oncontextmenu="return false;">
contextmenuを使う方法では、body要素に記載する方法が最もシンプルです。
指定したところに適用する場合
いろんな指定の仕方がありますが、よく使う3つの例をご覧ください。
特定の画像のみ指定する場合
個別に指定する場合に有効です。
<img src="/images/dummy.jpg" alt="画像" oncontextmenu="return false;" />
表示サンプル
imgタグだけ右クリックを禁止させる場合
javascriptで下記のように記載します。
$(function(){
$("img").on("contextmenu",function(){
return false;
});
});
指定したクラスのみ右クリックを禁止させる場合
$(function(){
// 画像ファイル上での右クリックを禁止にする
$(".box").on("contextmenu",function(){
return false;
});
});
メッセージやコメントを表示したい場合
メッセージやコメントを表示する場合は、alertで表示させます。
<img src="https://picsum.photos/id/1044/320/240" alt="画像" oncontextmenu="window.alert('右クリックは禁止です');return false" />
表示サンプル
右クリック禁止で気をつけたい点
- 全体やbodyに適用すると、全体がクリックできなくなるので抑止効果はアップしますが、右クリックが使えないので、サイトの更新時やエラーを調べる時に不便です。
- Macのデフォルト設定では右クリックが無効になっている場合が多いため、効果が限定的です。
クリック・タッチを無効化する方法
サイトの画像をダウンロードを禁止する為に、CSSのpointer-eventsを使い、クリックやタッチを無効化します。
右クリックはできますが、「名前を付けて画像を保存」が表示されないので、画像をダウンロード出来ません。
pointer-eventsはie11以上、その他のモダンなブラウザーやiPhone、Androidで有効です。
pointer-eventsについて、いくつかの例を挙げるので、指定の仕方を見ていきましょう。
特定の画像のみ指定する場合
HTMLで個別に指定します。
<img src="https://picsum.photos/id/1044/320/240" style="pointer-events: none;" alt="画像" />
表示サンプル
imgタグだけクリック・タッチを無効化する場合
CSSで下記の一文を記載します。
img {
pointer-events: none;
}
特定のimgタグだけクリック・タッチを無効化する場合
上記の方法では、範囲が広すぎるので、contentsの中のimgのみ指定します。
.contents img {
pointer-events: none;
}
クリック・タッチを無効化する方法で気をつけたい点
右クリックするとソースコードが見えるので、CSSやJavaScriptによる対策は、ソースコードを直接確認されると回避される可能性があります。そのため、重要な画像の保護には透かしの追加や、画像自体にアクセス制限を設けるなど、他のセキュリティ対策も検討してください。
まとめ
どちらの方法も簡単に対策が出来ますが、macユーザーのことを考えると、クリック・タッチを無効化する方法の方がおすすめです。