【右クリック、ドラッグ＆ドロップを禁止】Webページで画像の保存を禁止させる方法

Webページやブログなどで掲載している画像を右クリックして保存したりできないようにしたい場合があると思います。

今回は画像を保存できないようにする方法を紹介していきたいと思います。

右クリックを禁止させる方法

まずはページ全体の画像保存を禁止にする方法になります。

<body oncontextmenu="return false;">

ページ全体の場合は上記にようにbodyタグにoncontextmenuを設定します。

これでページ全体の画像が右クリックできず画像保存ができなくなりました。

ページ全体の画像ではなく個別に画像保存できないようにしたい場合は個別の画像に対して下記の記述をします。

<img src="XXX.png" oncontextmenu="return false;">

個別の場合は画像保存したくないimgタグに対してoncontextmenuを指定してあげます。

次はドラッグ＆ドロップを禁止にさせる方法になります。

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

ドラッグ＆ドロップを禁止にする場合はbodyタグにたいしてonselectstartとonmousedownを指定してあげます。

<img src="XXX.png" alt=""  onselectstart="return false;" onmousedown="return false;" />

個別の画像をドラッグ＆ドロップを禁止させたい場合はimgタグにたいしてonselectstartとonmousedownを指定します。