2018/05/19 2018/05/22
右クリック禁止・画像保存禁止を実装する方法(パソコン・iPhone・Android)
スポンサーリンク
こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。
今回は「パソコンからの右クリック」と「スマホでの画像保存」を禁止する方法を紹介します。制作中のサイトで、指定の画像のみ、ドラッグや画像保存をできないような仕様にしてほしいとの要望がありました。 まず最初に書いておきますが、今から紹介する方法では、厳密に言えば完全に禁止することは出来ません。ソースコードを見たり、JavaScriptをoffにすれば、効果は無効になったり・・・様々な手段で画像を保存することは可能です。 ただ、そんな複雑なことは一般的なユーザーは知らない可能性が高いので、「一般ユーザー向け」の対策としては十分だと思います。右クリックを禁止する方法
[oncontextmenu=”return false;”] ← これを加えれば、画像やテキスト、body全体など、どこでも右クリック禁止にできます。パソコンで閲覧する方への対策です。
1 |
<img src="#" oncontextmenu="return false;" /> |
ドラッグを禁止する方法
[onselectstart=”return false;”] ← これを加えれば、ドラッグを禁止できます。ドラッグ・アンド・ドロップのドラッグです。画像の上にカーソルをのせて、画像をドラッグすれば簡単に画像が保存できますので、これも一緒に設定すると良いです。こちらもパソコンへの対策です。
1 |
<img src="#" onselectstart="return false;" /> |
iPhone・Androidでの画像保存禁止
スマホでの画像保存は、画像の上で長押しをして保存というやり方ですが、画像の上で長押ししても保存等の項目を表示させないようにします。
1 2 3 |
img { -webkit-touch-callout:none; } |
最後に
最後に念押しですが・・・スマホでスクリーンショットを撮られたりしたら、すべて意味がないです。それを承知の上で、設定して下さい。スポンサーリンク