自社の画像が守れる!
HTMLとCSSで画像をDL不可にする方法

stop

こんにちは!のんです!

WEB上では基本的に右クリックをすると画像が保存できます!

しかし、中には著作権の問題上保存をされたくない画像もあるはず…

そこで今日は、HTMLとCSSだけで簡単に右クリックをしても画像が保存されない方法をご紹介します!

 


HTMLとCSSを書いてみよう!


 

HTML

 

CSS

 

【実行結果】 右クリックを押してみてください!


koban

 
これだけで、右クリックを押しても画像の保存ができなくなります! 


コードを理解しよう!


 

.imageで画像の基準位置を決めます。

.imageのwidthは画像の大きさで自由に変更してください。

そして、.guardで画像の上に透明なカバーをかけて画像の保存を禁止しています。

background-image:url(../img/spacer.gif); は画像を用意しなくて大丈夫ですが

このコードが抜けると画像の保存が出来るので必ずつけましょう!

 


画像にリンクがあるときは??


 

画像にリンクをつけている時は透明なカバーの方にリンクをつけましょう。

画像につけておくと、透明なカバーが邪魔をしてリンクが反応してくれません。

また、透明なカバーと画像をa要素で囲んでしまったら画像が保存できるようになってしまいます。

 

 

 

Javascript等を使用して画像の保存禁止が出来るのもや、

右クリックを禁止するコードもありますが、簡単にできるものが一番ですね。

 


The following two tabs change content below.
のん

のん

2015年入社 コバーン討伐会員No.0001