ウェブサイトで画像の保存を禁止する方法

ウェブサイトが公開直前になって、お客様より画像の保存を禁止するようにしてほしい、などの要望をいただいて「え！どうしよう！」って思ったことありませんか？

たとえばすぐみのHTMLであれば、最悪のケースimgタグすべてに禁止のコードを貼ることもできますが
Wordpressなどでカスタムフィールドやシステムを組みてたてたあとの制御はなかなか難しいものもあるはず。

ということで、表題の通りウェブサイトで画像の保存を禁止する方法をいくつかご紹介
したいと思います。

右クリックを禁止して画像を保存させない

右クリックをさせないことで画像の保存を阻止します。

■ページ全体を右クリック禁止にする

<body oncontextmenu="return false;">

上記のソースの場合、テキストのコピーなどもできなくなります。
単純に右クリックが不可能になるので、開発側からすると右クリックの『要素の検証』も
できません。ちょっと不便な応急処置のやり方です。

■画像のみ右クリック禁止をする

<img src="/images/dummy.jpg" alt="画像" oncontextmenu="return false;" />

単純にウェブサイトにあるすべての画像にこのタグを埋め込めば、右クリックで保存される
ことはなくなります。数十ページ～数百ページに及ぶウェブページでは現実的ではないやり方かもしれませんね。

ドラッグで画像を保存させない

右クリックと同じような設定にはなりますが、若干ソースの書き方が違うので注意してください。

■ページ全体をドラッグ禁止する

<body onselectstart="return false;" onmousedown="return false;">

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

<img src="/images/dummy.jpg" alt="画像"  onselectstart="return false;" onmousedown="return false;" />

おすすめの方法

上記で2つの方法をご紹介しましたが、結果的に私がおすすめするのはcssでの制御です。
特に上述したように公開直前で画像を～という話になったときは、一文cssに追加するだけなので
とっても便利です。

img {
  pointer-events: none; 
}

上記をかけば右クリックも、ドラッグもできないのでおすすめの方法です。
ちなみにスマホの場合は長押しをさせないように、以下を追記しておくといいと思います。

img {
-webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
}

みなさんもぜひ試してみてくださいね！

Share: