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

PC・スマホで画像保存させない方法【画像保存禁止】 CSS
この記事は約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の場合は、画像保存出来辛くなりました。
以上です!

SNSフォローボタン
エンデ・バタローをフォローする
CSSjavascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

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

コメント

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