サイト上にあげた画像を簡単に保存させたくない場合の対処法のご紹介です。
一般的にＷＥＢサイトへあげられている画像データはドラッグ＆ドロップで別窓表示して保存、右クリック(スマホ長押し)からの保存方法があります。 今回はこの二点クリアできるやり方を模索します。
とりあえず結論を知りたい方はこちらをクリック
PCでは有効だけど...？
oncontextmenu="return false;で指定してみる
<img oncontextmenu="return false;" src="img/sample.jpg" alt="サンプル" /> javasprictで右クリックからのメニューをでないようにする指定なのですが、こちらだけではドラッグ操作ができてしまいます。
なので、ドラッグをさせないため、imgタグへドラッグの可否を制御するdraggable属性で設定してみます。
<img oncontextmenu="return false;" draggable="false" src="img/sample.jpg" alt="サンプル" /> PCでの動作は特に問題ありません。しかし、「ドラッグ」という仕様上スマホでのサポートがないみたいなのでスマホサイトでは長押しで保存できてしまいました。
スマホ、一部ブラウザーでは有効だけど...？
background(背景画像)で指定してみる
ではそもそもimgタグではなく、backgroundで画像を表示させたらどうでしょうか。
p{ width:150px; height:150px; background:url(img/sample.jpg) no-repeat center / 150px 150px; }ChromeやEdge、スマホでは問題なさそうですが、残念ながら、IEでは背景画像の保存という項目があり、保存できてしまいました。
先ほどのjsで右クリックを禁止したらクリアできそうですが、ただでさえ背景を配置するブロックを用意し、画像毎にCSSで指定するという手間がかかるので、他の方法がいいでしょう。
【条件クリア】pointer-events:none;でタッチイベントを無効化する
CSSだけで難点をクリアできちゃうのが、この指定です。
使い方としては、右クリックなどの動作を無効化したい要素にこのスタイルをあてるだけです。
img{ pointer-events:none; }何をしているかというと、クリック、ドラッグ、ホバーなどのタッチイベントが無効化されます。 当然、2点をクリアできます。
サンプルを用意しているので、それぞれどんな感じなのかはデモでご確認いただければと思います。
videoタグで設置した動画を簡単に保存させないようにする方法は下記でご紹介しています。
【videoタグ】サイトへ埋め込んだ動画を簡単に保存させないようにしたい
あくまで一般的な保存方法を除外するやり方ですので、ネット上にデータをあげる際は取り扱いに十分ご注意ください！
