CSSで画像のコピー＆ドラッグを禁止する

スタイルシートの記述のみで画像のコピーとドラッグを禁止できます。Javascriptをオフにしている場合でもCSSの記述であれば画像の簡単なコピペができなくなるのでお薦めです。

pointer-events: none;

img {
pointer-events: none;
}

これをスタイルシートに追加することでサイト全体のimgタグで右クリックによるコピーと、画像のドラッグができなくなります。

マウスポインターによるアクションをimgタグで禁止しているわけです。

画像を右クリックはできるが、実際は画像を右クリックはしていない

pointer-events: none;を追記しても、画像の上で右クリックは可能です。

しかしこのとき右クリックしているのは画像ではなくその下のhtmlを右クリックしているため、右クリックからダウンロードをすると、画像のダウンロードではなく、右クリックしたhtmlの保存になってしまいます。

これによって画像のダウンロードを禁止しています。

画像リンクが機能しなくなることを回避する

img {
pointer-events: none;
}

の記述によって、簡易的にではありますが画像をダウンロードさせないようにできるものの、実は画像にリンクを貼っている場合、画像を左クリックしてもリンクが機能しなくなります。

これを回避するためには、aタグにdisplay:inline-block;を指定します。

例えばタイトルロゴ画像などもすべてimgタグが使われている部分ではリンクが動かなくなってしまうため、display:inline-block;をリンクに指定してあげる必要があります。