よりいく
たのしさいっぱい
ブログ作成

ブログの大切な写真を守る方法

ブログの写真保存を禁止する方法

ブログの写真保存を禁止したいと思ったきっかけ

コロ助は、自分の英語教室のHPを持っています。

そのHPには、画素を荒くした生徒さんの写真を、保護者の了承を得てアップしています。

嬉しいことに50弱〜100近いアクセスが毎日あります。

画素を荒くしてはいますが、、、

生徒さんの写真を保存できないようにする方法はないだろうか?

という想いがずっとありました。

 

そこで、HPを新規に立ち上げると同時に、写真保存の禁止方法を数日かけて探し、何とか見つけることができました。

ちなみに、私は、PCに関しては、ど素人ですので、とても詳しいとは言えません。

PC苦手な私が奮闘した様子

色々調べた結果、PCでのクリックやドラック保存を不可能にすることができました。

しかし、iPhoneで試してみると、保存できるではありませんか!?

ということで、更にリサーチ続行。

何とか、iPhoneでの長押し保存ができないようにするところまで持っていくことができました。

よしっ、Androidで試して、これで終わりだ!

と思って、長押し保存をしてみると、、、

保存できてしまうではありませんか!?
むむむ。一難去ってまた一難とはこのことか!?

 

何時間もかけて、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アドレス経由でその写真に飛んでしまう場合は、意味がありません。

個人が特定できるような写真をブログに載せる場合は、それでもやらないよりは、やった方が安心ができると思います。
良ければご参考にどうぞ。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です