2018/05/19 2018/05/22

右クリック禁止・画像保存禁止を実装する方法(パソコン・iPhone・Android)

こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。

今回は「パソコンからの右クリック」と「スマホでの画像保存」を禁止する方法を紹介します。制作中のサイトで、指定の画像のみ、ドラッグや画像保存をできないような仕様にしてほしいとの要望がありました。

まず最初に書いておきますが、今から紹介する方法では、厳密に言えば完全に禁止することは出来ません。ソースコードを見たり、JavaScriptをoffにすれば、効果は無効になったり・・・様々な手段で画像を保存することは可能です。

ただ、そんな複雑なことは一般的なユーザーは知らない可能性が高いので、「一般ユーザー向け」の対策としては十分だと思います。

右クリックを禁止する方法

[oncontextmenu=”return false;”] ← これを加えれば、画像やテキスト、body全体など、どこでも右クリック禁止にできます。パソコンで閲覧する方への対策です。

<img src="#" oncontextmenu="return false;" />

1	<img src="#" oncontextmenu="return false;" />

ドラッグを禁止する方法

[onselectstart=”return false;”] ← これを加えれば、ドラッグを禁止できます。ドラッグ・アンド・ドロップのドラッグです。画像の上にカーソルをのせて、画像をドラッグすれば簡単に画像が保存できますので、これも一緒に設定すると良いです。こちらもパソコンへの対策です。

<img src="#" onselectstart="return false;" />

1	<img src="#" onselectstart="return false;" />

iPhone・Androidでの画像保存禁止

スマホでの画像保存は、画像の上で長押しをして保存というやり方ですが、画像の上で長押ししても保存等の項目を表示させないようにします。

img {
  -webkit-touch-callout:none; 
}

img {

-webkit-touch-callout:none;

}

「img」にしていますが、ここを自由に変えてCSSで指定して下さい。

最後に

最後に念押しですが・・・スマホでスクリーンショットを撮られたりしたら、すべて意味がないです。それを承知の上で、設定して下さい。

デザイナー/フリーランスパパ＠神田翼

フリーランスのWebデザイナーの神田翼です。２児の父親です。父親でもガッツリ子育てがしたいという思いから、フリーランスとして働くことにしました。このブログではフリーランス・子育て・WordPress・ブログ運営のことを書いています。(プロフィール)

右クリック禁止・画像保存禁止を実装する方法(パソコン・iPhone・Android)

右クリックを禁止する方法

ドラッグを禁止する方法

iPhone・Androidでの画像保存禁止

最後に

デザイナー/フリーランスパパ＠神田翼

関連記事

最新の記事一覧