サイトの画像ダウンロードを禁止する方法

ホームページを作るときに画像やテキストをコピーできないようにして欲しいと依頼されることがたまにあるんですが、ご自身のサイト、もしくは自社サイトに掲載している写真が勝手に流用されない為にはどうすればいいのでしょうか？ そのためには画像をダウンロードできなくするようにするといいのですが、今回は最も手軽で効果のある２つの方法をご紹介します。

  • 右クリックを禁止する方法
    • ページ全体の右クリックを禁止する場合
    • 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; 
}

クリック・タッチを無効化する方法で気をつけたい点

  • 右クリックするとソースコードが見えるので、htmlが分かる人ならソースコードから画像がダウンロード出来てしまいます。

まとめ

どちらの方法も簡単に対策が出来ますが、macユーザーのことを考えると、クリック・タッチを無効化する方法の方がおすすめです。

前の記事 次の記事