CSSテクニック

画像の保存を禁止する

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

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

保存可

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

保存禁止

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


やり方

1:HTMLを書く

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

<div class="sample">
<span class="guard"></span>
<IMG src="略" alt="保存禁止" width="240" height="180">
</div>

2:スタイルシートを書く

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

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

解説

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

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

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

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

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

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


使いこなすための+α

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

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

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


一覧へ戻る


Last Modified 2005-01-27 © きくちゃん 2004 - All Rights Reserved