Webの記録

透明画像を置いて画像をコピーガードする。

投稿日:2011年5月14日 更新日:

この記事は約 4 分で読めます。

サンプルイメージ

今回は画像の上に透明画像を置く事で元の画像を右クリックで保存出来ないようにするテクニックです。

まずは、デモ画面を見て頂きましょうか・・・。

【2016.6.2】一部HTMLを修正しました。

デモを見る

2枚の飛行機の画像の上で右クリックをして画像を保存させようとすると・・・。

上の画像はすんなり飛行機画像「starflyer.jpg」を保存できますが、下の画像で保存した画像は飛行機画像「starflyer.jpg」ではありません。。。

何を保存したか?というと、「spacer.gif」という透明な小さい画像です。

透明な画像を飛行機画像の上に被せているので、右クリックで保存させられる画像は透明画像となり、ちょっとしたコピーガードになるというワケです。

jQueryでも同様の事が出来ますが、今回はcssで実現させます。

 

コピーガードの作り方。

まずは、透明画像を用意します。

1px四方で透明な画像をPhotoshopなどで作成しgif画像で保存します。(作例では、spacer.gif)

1.HTMLの記述例

※1~4行目は非対応、8行目以降はコピーガード対応用のコードです

	<p>画像のコピーガード対策前</p>
	<div id="no_Guard">
		<img src="images/starflyer.jpg" width="300" height="225" alt="飛行機画像" title="飛行機画像" />
	</div>

	<hr />
	<p>画像のコピーガード対策後</p>
	<div id="guard">
		<span class="img_Guard"></span>
		<img src="images/starflyer.jpg" width="300" height="225" alt="飛行機画像保存禁止" title="飛行機画像保存禁止" />
	</div>
2.CSSの記述
/* 画像のコピーガード対策有り */
#guard {
position:relative;
width: 300px;
height: 225px;
}
.img_Guard{
position:absolute;
display:block;
width:100%;
height:100%;
background: url(images/spacer.gif);
}

divに「position:relative;」を指定し、画像の幅と高さを記述します。

その後、imgタグ前のspanに「position:absolute;」を指定した後、透明画像をここで指定。ココがミソになる部分です。

ちなみに、画像の上の文字には透明画像を乗せてませんが、こちらも実はちょっとコピーし難く(完全ではないけれど)なってます。

divの範囲に入れているせいですね。。。ちょっと面白いです。


余談。

別件で、LightBox風のアルバム画像(小さな画像をクリックすると、大きな画像を見せる事が出来るようなギャラリー)にこの透明画像を被せてみようと試みてみました。

しかし上に透明画像を被せるとJavaScriptライブラリが作動しなくなり・・・今のところ、今回のような1枚画像を単純に表示するのみの場合でしか出来ませんでした。

サンプルイメージ

ひとまず、これで3通りの画像のコピーガードを試してみました。


【画像コピーガードの関連記事】


どれも、ソースコードや画面のキャプチャーからコピーが出来るので、完全にガードする事が出来ません。
パソコン初心者の人に対するガード程度なら良いかもしれません。

-Webの記録
-, ,

執筆者:


  1. hironobu より:

    の記述が足りないかもしれませんので、コメントさせていただきました。

    • Motoshige より:

      hironobuさん。
      コメントありがとうございます!
      コメントが途中切れている状態になってしまってますが、ブログ掲載のHTMLを見直し、部分的に修正しました。
      デモの分のHTMLも修正をしました。
      ご指摘、ありがとうございました。

  2. ちゅん より:

    全くの初心者で申し訳ないのですが、コードをどこに書けばいいのかもわかりません。。
    もしよければ教えて下さい。

    • Motoshige より:

      ちゅんさん。
      コメントありがとうございます!
      初心者とのことですが、HTMLやCSSは理解されているでしょうか?
      divで囲った間に、画像を挿入する記述をして、そのdivのidやclassに対してのスタイルをcssで記述します。
      HTML・CSSを編集することができれば、divの書き方はこのブログ内のをコピペ程度でできると思います。

  3. もちお より:

    コピーガードの対策をしているので参考にさせていただきました。

    透明画像にコピーライトの文字なんかをいれたら、スクショ対策にもなりそうですね。
    おかげで色々解決できました。

    • Motoshige より:

      もちおさん。
      コメントありがとうございます!
      確かに透明画像にコピーライト表記すると、スクショ対策になりますね!
      アイディアをありがとうございます。

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Photoshop で入力したテキストの「縦書き」「横書き」を変更する方法

この記事は約 1 分で読めます。 Photoshopを使うようになってもう何年も経つのに、意外と知らずに無駄な事をしていたり・・・が多かったりします。。。 効率よく作業するには、やっぱり便利な方法は活 …

no image

ナビゲーションボタンのコーディングについて考えてみた

この記事は約 1 分で読めます。 ナビゲーションボタンのコーディングをする時に、どんな風にコーディングしていますか? 対応するブラウザとかによっても変わると思うのですが・・・。 今回、ちょっとナビゲー …

no image

scroller.jsで「するするスクロール」にチャレンジ♪

この記事は約 1 分で読めます。以前、yuga.jsを使ってページ内リンクを「するするスクロール」にチャレンジしました。 今回は、scroller.jsを使って同じような事をやってみたいと思います。 …

no image

スマートフォン用サイトで、タップで電話をかけさせたい時

この記事は約 1 分で読めます。 スマートフォン用のサイトで、必要になったのでメモ。 ボタンをタップした時に電話をかけさせたい時の記述と、郵便番号などの数字を電話番号と間違えて勝手に電話番号のリンクが …

no image

JavaScriptオンオフの設定と確認。

この記事は約 2 分で読めます。 最近「jQuery」が面白くていろいろ試していますが、JacaScriptがオフ環境ではあんまり意味のないモノになっています。 全くWebの知識がない人にとって、Ja …