サイト内の画像を守る!パクらせない方法

35 views

自分のサイトの画像を無断で使用されたら嫌ですよね。。

しかし、ネット上に公開している以上、完全に保存させなくすることは難しいですが、
簡単に保存させなくすることは出来ます。

今回は簡単に保存させなくする方法が二つありますのでご紹介します。

右クリックの禁止

画像の上で右クリックが出来なくなる方法です。
右クリックが出来なければ、「名前をつけて画像を保存」というボタンが
出てこなくなりますので、画像を保存することが出来ません。

やり方は下記のコードをimgタグに記述するだけです。

imgタグと一緒に入れると下記のようになります。

警告を出したい方は、alert(‘◯◯◯◯’);を加えれば警告が出せます。

実際にコードをいれてみたので、右クリックで試してみてください。

画像毎に入れていくのが面倒だという人は、bodyタグに入れてみてください。

bodyタグに入れると全ページで画像関係なく、右クリックが出来なくなります。

透明な画像を重ねる

表示させてる画像の上に
透明な画像を重ねてしまおう!という方法です。

実際に上記のコードを記述した画像がこちらです。


右クリックしてみても「名前を付けて画像を保存」が表示されません。
保存出来たとしても透明な画像であるdammy.pngが保存されます。

スマホの対策として長押しアクション禁止

スマホの方は長押しで保存出来てしまいますので、
長押ししても保存出来ないようなコードがこちらになります。

プラグインでの対策

その名も「Image Watermark」という、
自分のサイト内にある画像にウォーターマークを入れることが出来るプラグインです。
ウォーターマークとは「透かし」のことです。
詳しく知りたい方はWeblio辞書に詳しく載っています!

一枚の画像に透かしを入れるのならそこまで面倒ではないのですが、
何枚、何十枚にも入れるとなるととても手間がかかってしまいます。
しかし、「Image Watermark」を使うことにより簡単に透かしを入れてくれます。

縦横比がばらばらになっちゃいましたけど、
ちゃんとウォーターマークを入れることが出来ました。

まとめ

みなさんも無断で画像を使用されるのは嫌ですよね。。
しかもそれが何時間もかかってつくったものならなおさら。

無断使用させないためにもしっかり対策をしておきましょう!