Devanath / Pixabay
作ったサイトの文章や画像を簡単にコピーできないようにする方法です。
画像の保存を完全に防ぐことはできません。
でも、コピーにひと手間かかることが抑止力にはなるようです。
ソースコードを見る人には無効ですが、表示されたサイトを閲覧している限りにでは効果があります。
このページのもくじ
右クリック禁止をHTMLに記述する
<body oncontextmenu="return false;">
HTMLのbodyタグに上のような設定をします。
CSSでドラッグしても文字を選択できないようにする
body{
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
}
CSSのbodyタグに設定します。
スマホ対策は長押しアクション禁止
長押し禁止でスマホでの画像保存をできないようにします。
img{
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-touch-callout:none;
-moz-user-select:none;
touch-callout:none;
user-select:none;
}
あとは、JavaScriptで画像をガードするとなおよいらしい。
他にも、画像の保護方法としては、
◎背景画像として扱う
◎画像の上に透明な画像を載せる
などがありました。
＜参照したサイト＞
http://idd.tokyo/blog/?p=225
https://moriawase.net/copy-guard
https://www.tam-tam.co.jp/tipsnote/html_css/post15170.html
https://qiita.com/shisama/items/be0e432711de359598ed
http://kajico.kajilabo.net/prohibit_image_storage/
