サイトの文章や画像を簡単にコピーできないようにするには？

kobato

5年前

作ったサイトの文章や画像を簡単にコピーできないようにする方法です。
画像の保存を完全に防ぐことはできません。
でも、コピーにひと手間かかることが抑止力にはなるようです。
ソースコードを見る人には無効ですが、表示されたサイトを閲覧している限りにでは効果があります。

このページのもくじ

右クリック禁止を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/