PC・スマホで画像保存させない方法【画像保存禁止】

初めての目次

jQueryで画像をDivで囲う
透明画像を用意してcssで画像の前面に設置
実行結果
まとめ

jQueryで画像をDivで囲う

CSSとjQueryで画像の手前に透明な要素を追加して、画像を保存しようとしても画像に触れなくする方法。
まずは、jQueryで画像（imgタグ）を検知し、その画像をDivで囲います。
この時、CSSでスタイルを記述しやすくする為に画像を囲うDivには「#img_wrap」を付けています。

【jQuery】

$(function() {
  $("img").wrap('<div id="img_wrap"></div>');
});

透明画像を用意してcssで画像の前面に設置

透明画像を下のボタンからダウンロードして、CSSで画像の前面に設置します。

透明画像をダウンロード

先ほどjQueryで追加した「#img_wrap」に対してCSSでスタイリングしていきます。
ダウンロードした画像（toumei.png）を背景に設置するため、「background」のurl()にファイルパスを記述してください。
（下の例は、「img」フォルダ直下に「toumei.png」を置いた場合です。）

【CSS】

#img_wrap {
  position: relative;
}
#img_wrap::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/toumei.png);
  background-position: top left;
  background-size: 100% 100%;
}
#img_wrap img {
  display: block;
}

実行結果

上記のjQueryとCSSを実行した画像を下に用意しました。

まとめ

iPhoneで画像を長押しすると、実際は画像には触れておらず、「::before」要素を長押ししているため「イメージを保存」と出ることはなくコピーできなくなります。
一方、PCでも右クリックやドラック＆ドロップで画像を保存しようとしても、画像の前面に「::before」要素がかぶっているため、画像を保存できません。
ただし、PCでは右クリックで「ページのソースを表示」や「検証」などを使ってHTMLのソースから画像を表示出来てしまいます。
この右クリックでHTMLのソースを表示する方法は、ウェブ製作者以外ほとんど知らない機能になるので「ほぼ」全てのユーザーが画像保存出来なくなったのかなと思います。
完全ではないながらもスマホやタブレットからのアクセスの場合は、画像保存を禁止出来、PCの場合は、画像保存出来辛くなりました。
以上です！