画像の保存を禁止する

WEB上の画像は基本的に右クリック→画像の保存で保存できます。でも、著作権の問題から保存されたくない画像もあるはず。そんな時はこのテクニックです！

テクニック使用前：右クリックで保存してみよう

テクニック使用後：右クリックで保存してみよう

テクニック使用後は保存しようとしても背景の保存しか出ず、保存しても透明のGIF画像になってしまいます。

やり方

１：HTMLを書く

HTMLはこんな感じになります。

２：スタイルシートを書く

スタイルシートはこんな感じになります。

div.sample{
    position:relative;
    width:240px;
    height:180px;
}
span.guard{
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    background-image:url(../../csstec/img/spacer.gif);
}

解説

今回のテクニックは簡単に言うと、写真の上に透明なカバーをかけてコピーを防いでいます。

HTMLのポイントはもちろんspanタグです。これがカバーの役割を果たしています。imgタグより前においてください。

div.sampleについてですが、position:relative;は必須、widthとheightは画像の大きさに合わせて変えてください。

span.guardについてですが、position～heightは必須です。これらのプロパティはカバーの枠を作っています。そして最も重要なのがbackground-image:url(../../csstec/img/spacer.gif);です。このGIF画像は1ピクセル四方の透明な画像です。これがカバーのガラス部分に相当します。これを忘れると、後ろに見える写真がコピーできてしまします。

透明画像が欲しい方はテクニック使用後の画像の上で右クリック→背景に名前を付けて保存でお持ち帰りください。

javascriptでも似たような技がありますが、こちらは警告ダイアログが出ません。使うときはページのどこかに「著作権の都合上画像は保存できないようになっております」などの注意書きを添えたほうが良いでしょう。

使いこなすための＋α

文字のコピー防止もできます

ここの文字列はなぜかコピーできません。なぜかって？魔法がかかってるからですよ。とゆーのは嘘です。CSSを使っているからです。ただし、画像のときほどセキュリティーは高くありません。何度もコピーしようとすると選択できてしまいます。ソースはimgタグの代わりにpタグを使うだけなので省きます。何の役に立つのかは自分で考えてね。

ちょっと詳しい人には簡単に破られてしまいますが、ちょっとしたセキュリティーにはなると思います。

一覧へ戻る