キュレーターやバイラル運営者に画像を無断でパクられないようにマスクを利用する
Webメディアを運営する人にとって、自分が作成したオリジナル画像は財産。bodyタグを下記のようにすれば右クリック禁止にできるが、右クリックを頻繁に使用するユーザーにとってはかなりのストレス。
|
1 |
<body oncontextmenu="return false;"> |
しかも、右クリック禁止でブラウザを制御しても、ドラック＆ドロップで画像は簡単にパクられる。なので、ドラック＆ドロップから画像を守りたいって場合は、下記のようにマスクが有効。
HTML
|
1 2 3 4 5 6 7 |
<div class="base"> <!--マスクをかけたい要素--> <img src="images.jpg"> <div class="mask"> <!--マスクの要素--> </div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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; /*位置調整*/ } |
古典的で結構面倒ですが、ドラック＆ドロップによる画像のパクリと、右クリックによる画像のコピーの両方の対策がうてる。とは言っても、firebugのようなデバックツールを使っている人は、簡単に画像のタグを探し出して抜き取ってしまうんだけどね。あとは、ページまるまるキャプチャする人とか。
とりあえず、キュレーターやバイラル運営者のような、Webリテラシーの低いパクリユーザー対策としては効果は期待できますので、ご参考までに。
いいね！のお慈悲を…