「簡単にできる画像のコピーガード」とか書きましたが、
結論から先書いておくとそもそも今のところ画像のコピーガードなんてできません。
今回のはコピーガードもどきです。
でも今の環境ではこれが一番じゃないでしょうか。

「ホームページの画像を取られないようにコピーガードしたいんだけれど」
そんな相談がたまにあります。
そもそもコピーガードというかホームページから画像を取れないようにすることは今のところできない。
できたとしても画面キャプチャーされたら終わりだし、キャプチャしてもそこだけ真っ黒になるとかHTMLタグを通してしか画像を表示できないとかしないと、ちょっと知識があれば何とでもしてとることができます。

今回のクライアントさん本人というよりも、それを掲載依頼してきているさらに向こうのお客さんに、コピーガードしてほしいと一言言われたそう。
コピーガードって言われても全く具体的でない。
どのようにしたらコピーガードとみなされるのかわからないけれど、完全に画像を取れなくするようなことはできません。
ということを伝えて、とりあえず右クリックを禁止してくれということになりました。

が・・・個人的に右クリック禁止も僕はやりたくありません。
右クリックって画像の保存だけじゃなくて他のためにも使うので、右クリックを禁止するのはよくない。
そして、右クリックで表示されるメニューを消す以上は、何らかのメッセージ出さないとPCの不調とも思われかねない。
かといって、「右クリックは禁止しています」だと意図がわからないし、「画像のコピーは禁止しています」なんかだとその意図がない人にとっては犯人扱いされて気分が悪い。
なので、右クリック禁止はイヤ。
右クリック禁止しても、マウスのドラッグで簡単に画像を取ることができる。

でも、なんとか形だけでも画像を撮れないようにしてほしいということで、
これが一番スマートな方法なんだじゃないかと。
それは背景画像にすることです。
そのままIMGタグを使って画像を置くと右クリックとかドラッグで簡単にコピーできちゃいますが、
背景画像として表示するとそのどちらもできない。

こんな感じ。
これは画像、右クリックとかドラッグで簡単に取れます。

次に背景として表示した場合。

右クリックでも取れないし、ドラッグしても取れない。
Javascriptとかの複雑なプログラムもいらない。
超簡単になんちゃってコピーガードする方法です。

右クリック禁止なんかするより、よっぽどスマートでしょ。
ちょっとHTML触っていれば難しいことではないですが、一応ソースコードも。

<style type="text/css">
.no_copy{
	background:url('画像のURL');
	background-size:contain;
	width:600px;
	height:400px;
}
</style>

<div class="no_copy"></div>

画像をコピーできないようにすること自体無意味だけれど、
どうしても形だけでもしたい場合はこれでいきましょう。

[RelService] [Service]