右クリックで保存できない画像、コピペできない文字 (not javascript)

2006/10/5

Javascriptなどを使わずに右クリックで保存できない画像の作り方を思いつきました。もしかしたら、既にwell knowかも知れませんが。。。あまり実用性はないと思いますが、まあ、ネタの一種だと思ってください。

右クリックで保存できない画像

以下に表示している画像の左半分は右クリックで保存できなくしてあります。右クリックで画像を保存できないのは、スタイルシート設定で透明な蓋を画像の上に置いているからです。右クリックは画像に対してではなく、DIVに対して行っている事になっています。

上記サンプルをHTMLをわかりやすく整形したものを以下に示します。


 <html>
 <head>
 <style>
 <!--
 #myfilter {
  position:absolute;
  z-index:2;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;

  width:120px;
  height:40px;
  background-color:#FF0000;
 -->
 </style>
 </head>

 <body>
 <div id="myfilter"></div>
 <img src="/img/geek-title.png" style="z-index:1;">
 </body>
 </html>

この方式のポイントは、position:absoluteを使って、DIVのz-indexをIMGのz-indexより大きな値にして、DIVの背景を透明にしている事です。

このサンプルはわかりやすくするために背景を赤にして、透明度を50%にしています。透明度を100%にして大きさも画像と同じにすると、何故か右クリックで保存できない画像のように見えます。半透明処理はfilterか-moz-opacityで行っています。 filter:alpha(opacity=50)はIE用で、opacityはその他ブラウザ用です。(firefox用には-moz-opacityを使ってもいいです。)

コピペできない文章

同様の事を文章に対しても出来ます。

コピー＆ペーストしにくい文章。

今回の例は、IMGの部分をPに変更しています。この例では、ある程度広めにマウスポインタを引っ張ると文章全体をコピーできてしまいますが、マウスを上に置いて文章の一部をコピーするのが多少面倒にしてあります。

追記2006/10/12 : Operaだと何の問題も無く上記文章がコピーができるようです。右クリックで画像を保存をブロックはOperaでも機能しているようです。

注意

ここで紹介した方法は、ソースを表示して解析を出来る人には何の効果もありません。また、スタイルシートを読み込まない設定をしたりするなど、比較的簡単に回避できてしまいます。本当にコピーされたくない画像や文章は公開しないという方法が一番確実です。

過去記事

過去記事一覧

超凄いIPv6解説書(488ページ)を無料配布します！

右クリックで保存できない画像、コピペできない文字 (not javascript)