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

PC・スマホで画像保存させない方法【画像保存禁止】
この記事は約2分で読めます。

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の場合は、画像保存出来辛くなりました。
以上です!

CSSjavascriptjQueryサイト制作

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

タイトルとURLをコピーしました