掲載して頂ける絵描きさんを募集しています!

【CSS1行のみ】画像のドラッグ&右クリック保存を禁止する方法

右クリックや画像ドラッグによる画像の盗用を防止したいというとき、いくつかの方法があります。

・javascript
・wordpressプラグイン
・CSS

その中でも、1番簡単な「たった1行のCSS」で画像保存&ドラッグを防止する方法を紹介します。

画像保存&ドラッグを防止するCSS

CSSのコードは1行のみです。

HTML
img {pointer-events: none;}

ブラウザ対応状況

ブラウザごとのCSSプロパティ対応状況を調べられるサイト「Can I use」で調べると、

  • IE・Edge
  • firefox
  • google chrome
  • safari
  • iOS safari
  • Chrome for Android

など、ほぼ全て対応しているようです。

実機検証確認ずみ

iOS 11.3 
safari
Google chrome

効かないときは?

ブラウザのキャッシュ、「一度読み込んだデータをブラウザが持ってくれる仕組み」のせいかもしれません。
「Ctrlキー + R 」で何度かブラウザを更新して見てください。

キャッシュについて詳しく知りたいかたは、こちらのサイトの記事が参考になります。

参考 キャッシュとは?IT初心者でも分かるように解説サルワカ

wordpressプラグインでの画像コピー防止方法

画像のドラッグ、右クリック保存を防止するプラグインを調べると。

  • No Right Click Images
  • WP-Copyright-Protection

の2つがありました。
が、「No Right Click Images」はプラグイン検索結果から消えていました。
また、「WP-Copyright-Protection」は開発者によるアップデートが停止しており、最新版のwordpressバージョン4.9.5(2018年5月現在)では対応しておらず、設定不可となっています。

以上です!
お役に立てれば幸いです。