CSSで画像を右クリック保存させないようにする方法
最近（と言っても去年の8月くらい）から、仕事でWordPressを使うことが多くなってますが、今回書く記事はCSSなのでどの環境でも使えるネタかもしれません。
そこで今回は絶対配置を利用したレイヤー構造のようなCSSです。
そのような事態になったのは、只今進捗中の案件に関係しています。
クライアントから「ライセンスをどうしても掲載したい」という要望がありまして、しかも「DL（右クリックで画像を保存）されないようにしてくれ」とか無茶振りされました。DL以前の問題でキャプチャー撮られたら終わりですよ、と提案しましたが、やっぱり「どうしても掲載したい」とごねてました。
まあGoogle検索で探してたら、それっぽいのを発見しました。それが、
CSSで画像を右クリック保存させないようにする方法です。
下の画像を右クリックすると保存できます。
ですが、下の画像は右クリックしても表示されているアクアオシャンという画像を保存できません。
画像の上に絶対配置で透過GIFを置いているため、直接的に右クリックで画像の保存ができないようになってます。
ソースはこちら。
HTML
<div class="dlng">
<span class="guard"></span>
<img src="/img/hoge.gif" width="500" height="166" />
</div>
CSS
.dlng{
position:relative;
padding:0;
width:500px;
height:300px;
}
.guard{
display:block;
position:absolute;
width:100%;
height:100%;
background:url(/img/hogehoge.gif);
}
そもそも右クリックをさせない方法
下の画像はJavascriptで右クリックできないようにしてあります。
Javascript
<img src="./img/hogehoge.jpg" oncontextmenu="return false;" />
これで右クリックができなくなります。<body>に付けるとページ全体で右クリックができなくなります。ただ個人的には<img>タグにもこういった制限をあまり掛けたくありません。
右クリックは結構頻繁に使うため、ソースを見たり、Firefoxだと画像のサイズを閲覧する事ができなくなってしまいます。
ちなみにJavaScriptをオフにされると、このスクリプトを入れた意味がなくなります。OSがMacだと右クリックの概念がないのでスクリプトも意味がありません。
結局、Web上で画像を不正にダウンロードされたくないのであればアップロードしない方が良いのです。不正ダウンロードする人を増やすだけで逆効果だと思います。
したがって、ライセンスなんていう企業情報の塊が入ったものを晒すなんていう考えが、自分には理解できません。保持している事を証明したければ、ライセンス名だけを入力でも良いと思います。
