【HTML・CSS】サイト内の画像の保存を禁止する方法
今回はサイト上にある画像の保存を禁止する方法についてご紹介します。
今の時代PCで見られることが全体の２割ほどになり、右クリックでの保存する人も少なくなっているのはご存知の通り。
しかも、スマホで見ればスクショで保存しSNSにアップしている人の方が多く見られる。。
だがしかし！！
そんな時代でもやらなければいけない案件もあると思います。（某事務所案件は手こずりました。。）
なので、今回は画像がダウンロードできないようにするための簡単な対策をご紹介します。
すぐできます！！※あくまで回避ですのでご了承ください。
⑴ 右クリックを禁止する
⒈HTMLで制御
HTMLタグに「oncontextmenu=”return false;”」を入れる。
これはbodyタグだけではなく他のタグでも使用可能です。(imgタグ等)
|
1 |
<div oncontextmenu="return false;"></div> |
⒉JavaScript
JavaScriptで制御する。
|
1 |
<script>document.oncontextmenu=function(){returnfalse;};document.body.oncontextmenu=“return false;“</script> |
⑵ ドラッグを禁止する
⒈HTMLで制御
HTMLタグに「onselectstart=”return false;”onmousedown=”return false;”」を入れる。
|
1 |
<div onselectstart=”return false;”onmousedown=”return false;”></div> |
⒉JavaScript
JavaScriptで制御する。
|
1 2 3 4 5 6 |
<script> document.onselectstart=function(){return false;}; document.onmousedown=function(){return false;}; document.body.onselectstart=”return false;” document.body.onmousedown=”return false;” </script> |
おすすめ記事
【JavaScript】簡単に設置できる郵便番号検索『ajaxzip3』使い方をご紹介！せっかく作成した「お問い合わせフォーム」がなかなか使われず、がっかりしている人はいませんか？フォームを使用してもらうためにはユーザー目線で作成することが必要になります。「こんな機能があったら入力が便利なのに…」と客観的に観察することでいかに使いやすいフォームにするか考えることが重要です。今回は「郵便番号を入力したら住所が自動表示される」機能をご紹介します。
【JavaScript】割り算の「切り捨て」「切り上げ」「四捨五入」についてまとめJavaScriptで割り算の「切り捨て」「切り上げ」「四捨五入」についてご紹介します。JSを使って計算をするというのはWEBデザイナーなら誰しも行いますよね。
今は使わなくてもいずれ使う場面が出てくると思います。
知っていて損はないのでこの機会にぜひ覚えましょうー！
今は使わなくてもいずれ使う場面が出てくると思います。
知っていて損はないのでこの機会にぜひ覚えましょうー！
【JavaScript】全ての文字を置換する方法は「replace」と「正規表現」今回はJavaScriptで全ての文字を置換する方法についてご紹介いたします。置換の基本は「replace」しかし、ただreplaceをするだけでは全ての文字は置換されないんですね。そこで全部の文字を置換するには「正規表現」を使いましょう！！
