【画像コピー禁止の方法】お気に入りの画像を、簡単にコピーされないために
旅行先や日常で撮ったきれいな写真やお気に入りの写真。
その写真を誰かにも見てもらいたいという気持ちでブログをされている方もいるかと思います。
しかし、自分で撮った写真の画像がコピーされ他人のブログに使われていたら、ちょっと嫌な気分ですよね。
今回は、ブログ内の自分の画像が簡単に他人にコピーされないようにするための、追記するコードを紹介したいと思います。
事の発覚
はてなブログを始めて数ヶ月、先日初めて『IDコール』をされました。
『何だこれ？』と思いながら、IDコールを送った人のブログを見てビックリ！
特定のページに私の撮った写真が使用されているじゃありませんか‼
こういうことって自分には無縁なものと思ってました。
いわゆる『パクリサイト』では、個人の画像やテキストが平気で使われているということは知識として知っていましたが、日々のPVも全然、検索からのブログ流入も全然(検索順位が超低い)の自分には無縁だと思ってたのに、ホントビックリです。
恐らく相手には、『無断で使用するのはちょっと…』という気持ちがあってIDコールをしてくれたのだと思いますが、それでもあまりいい気持ではありません。
というわけで、今後は簡単に画像コピーされないように、右クリックの禁止とドラッグでの画像コピーを禁止するコードを書きました。(自意識過剰かもしれませんが)
手順は以下です。
右クリック禁止化の手順
まずは右クリックを禁止するコード。
画像コピーをするやり方として一番メジャーな方法です。
・「右クリック」→「名前を付けて保存」
の右クリック自体を禁止する方法です。
↓手順はコチラ
①下のコードをコピー
<script>
document.oncontextmenu = function(){ return false; };
document.body.oncontextmenu = "return false;"
</script>
②管理画面の「設定」→「詳細設定」を開く
③ページ下部、「検索エンジン最適化」の「headに要素を追加」部分にペースト
④変更するボタンを押す
⑤公開済みのページで右クリック禁止を確認
マウスドラッグでのコピー禁止化手順
次に、画像をクリックして、そのままマウスドラッグして画像をコピーする方法を禁止するやり方です。
↓手順はコチラ
①下のコードをコピー
img {
pointer-events: none;
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-touch-callout:none;
-moz-user-select:none;
user-select:none;
}
②管理画面「デザイン」→「カスタマイズ」→「デザインCSS」を開く
③コピーしたソースをペースト
④変更を保存するボタン
⑤公開済みのページで確認
完全に防ぐのは不可能
今回紹介したのは、あくまで右クリックやドラッグで簡単にコピーできないようにしただけです。
特定のデータをサーバーにアップし公に公開をしている限り、完全にコピーを防ぐことは不可能に近いです。技術があれば、あの手この手でコピー出来てしまうんです。
しかし、誰でも簡単にコピー出来る状態にしないだけでも、抑止力になるかと思い今回のコードを追記しました。
また、お気に入りの画像だけは「LINE Camera」を使って署名を入れることにしました(全ての画像に入れるの大変なので…)
『自分が撮ったお気に入りの写真を簡単にコピーされたくない』
そんな人の参考になればと思います。
