ホームページやブログを運営する人にとって、自分が作成したオリジナル画像は財産。時にはお金をかけて画像を用意する場合もありますよね。プロに写真を撮ってもらうこともあります。
だからこそ、サクッと画像をパクられるのは腹立たしい。
そこで、画像や写真が簡単にパクられないようになる対策をご紹介したいと思います。
右クリック禁止にする
bodyタグを下記のようにすれば右クリック禁止にできます。
<body oncontextmenu="return false;">
ただ、右クリックを頻繁に使用するユーザーにとってはかなりのストレス。
しかも、右クリック禁止でブラウザを制御しても、ドラック＆ドロップで画像は簡単にパクられる。なので、ドラック＆ドロップから画像を守りたいって場合は、下記のようにマスク処理が効果的。
画像にマスク処理をする
HTML
<div class="base"> <!--マスクをかけたい要素--> <img src="images.jpg"> <div class="mask"> <!--マスクの要素--> </div> </div>
CSS
.base {
position: relative; /*親の指定*/
z-index:0; /*重なるので*/
height:300px; /*画像のサイズに合わせる*/
}
.mask {
width:300px; /*画像のサイズに合わせる*/
height:300px; /*画像のサイズに合わせる*/
background:rgba(0,0,0,0.0); /*マスクは半透明に*/
position: relative; /*子の指定*/
z-index:99; /*重なるので*/
right:0px; /*位置調整*/
bottom:303px; /*位置調整*/
}古典的で結構面倒ですが、これでドラック＆ドロップによる画像のパクリと、右クリックによる画像のコピーの両方の対策ができます。
ここまでやってもパクれてしまう…
とは言っても、ブラウザのデバックツールを使っている人は、簡単に画像のURLを探し出し、パクることは可能です。あとは、ページまるまるキャプチャしてトリミングなども。
誰でも無料で閲覧できるインターネットにおいて、パクリに対する絶対的な防止策はありません。なので、あきらめるのもまた手段。
どうしても大切な画像や写真をパクられたくない！という場合は、PIXTAのように画像全体に透かし入れるなど、物理的な対策しかありませんね。
コメント