ブログの写真保存を禁止する方法
ブログの写真保存を禁止したいと思ったきっかけ
コロ助は、自分の英語教室のHPを持っています。
そのHPには、画素を荒くした生徒さんの写真を、保護者の了承を得てアップしています。
嬉しいことに50弱〜100近いアクセスが毎日あります。
画素を荒くしてはいますが、、、
という想いがずっとありました。
そこで、HPを新規に立ち上げると同時に、写真保存の禁止方法を数日かけて探し、何とか見つけることができました。
PC苦手な私が奮闘した様子
色々調べた結果、PCでのクリックやドラック保存を不可能にすることができました。
ということで、更にリサーチ続行。
何とか、iPhoneでの長押し保存ができないようにするところまで持っていくことができました。
と思って、長押し保存をしてみると、、、
何時間もかけて、PCとにらめっこしながら、ようやくAndroidでの長押し保存を禁止することが出来ました。
本当に、ど素人ですので、詳しいことは分かりませんが、私が実行したのは以下のコードです。
PC、スマホ（iphone、Android）で写真保存を禁止するコード
まず、Htmlタグ設定のBodyに以下のコードを貼りました。
<body onselectstart=”return false;” onmousedown=”return false;“>
<body oncopy=’return false;‘>
<body oncontextmenu=’return false;‘>
追加CSSに以下のコードを足しました。
img {
-webkit-touch-callout:none;
}
html,body {
user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-webkit-touch-callout:none;
}
img{pointer-events: none;}
Androidでの長押しを防いだのは、
img{pointer-events: none;} が決めてだったようです。
まとめと注意点
- PCの右クリック、ドラックの禁止
- スマホ（iphone、Android）での長押しの禁止
による「写真保存の禁止」をすることができました。
しかし、スクリーンショットを撮られてしまったり、URLアドレス経由でその写真に飛んでしまう場合は、意味がありません。
良ければご参考にどうぞ。
