テキスト、画像のドラッグ、右クリック禁止でコピーさせない方法

  • S
  • M
  • L
  • FONT SIZE

ITTI labo

テキスト、画像のドラッグ、右クリック禁止でコピーさせない方法

d1 e1334081373613 テキスト、画像のドラッグ、右クリック禁止でコピーさせない方法

ウェブサイトの記事と写真がコピーされているサイトがあり相談があり、その対処方法です。完全にガードすることはできないのですが抑止力として効果あります。

テキストの選択(ドラッグ)、右クリック禁止

JavaScriptで制御する場合

ボディタグに記述するとドラッグでの選択、右クリック不能になります。
強制力が強いので、FLASHのボタンや、フォームなどが使用不能になるので使用には要注意です。

<body onMouseDown="return false;" onselectstart="return false" oncontextmenu="return false;">

・テストです。ドラッグできますか?

CSS3で制御する場合

CSS3のuser-selectでドラッグでの選択を不能にします。CSS3の属性になるのでCSS3未対応のブラウザで制御できません。

body{
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
}

・テストです。ドラッグできますか?

画像を保存させないjQuery

CSSで透過GIFを上にして、背景に画像を配置して保護する方法がありますが、右クリックの「背景画像を表示」でコピーされてしまうので、jQueryのdwImageProtector.jsで画像を保護できます。

dwImageProtector.jsをダウンロードして、jQueryと一緒に読み込みます。JavaScriptを記述します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery1.6/jquery.min.js"></script>
<script type="text/javascript" src="dwImageProtector.js"></script>

<script type="text/javascript">
	$(window).bind('load', function() {
	$('img.protect').protectImage();
	});
</script>

保護したい画像にclass属性「protect」を記述します。

<img class="protect" alt="" src="画像.jpg" width="400" height="300" />

透過GIFの「blank.gif」を用意して、HTMLファイルと同じ階層に置くと完了です。

IEのイメージツールバーを無効にする

IEのイメージツールバーを無効にするmetaタグをhead内に記述します。

<meta http-equiv="imagetoolbar" content="no" />

.htaccessでタグによる写真スクレイピングを防ぐ

タグごとコピーして画像表示しているスクレイピングサイトへはmod_rewriteを使って画像表示をブロックします。

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://自分のURL/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.自分のURL/.*$ [NC]
RewriteRule ^(.*)$ - [F]

コピーサイトに負けないためのWordPressプラグイン

老舗のブログに記事がコピーされると、オリジナルが負けてしまう場合があるのでWordPressのプラグインで防ぎます。

RSSにコピーライトを入れるRSS Footer

コピーライト、サイトへのリンクをRSSフォードに記入するプラグインです

RSS Footer

pubsubhubbubを有効にするpubsubhubbub

pubsubhubbub(パブサブハバブ)を有効にします。いち早く更新したことを通知して、オリジナルであることを証明するわけです。

pubsubhubbub

canonicalを追加する

canonicalは重複ページを解消するmetaタグで、本来ならコピーサイトがcanonicalにオリジナルサイトのURLを記載するべきですが、オリジナルサイトにcanonicalを設定しておいても良いでしょう。

WordPress3.3からは、プラグインなしでもcanonicalが記載されるようになっています。
3.3以前のWordPressの場合、プラグインを導入します。

canonical URL

以上の方法で対応しましたが完全に防ぐことはできません。ただ、抑止力には効果があります。

・参考サイト

http://html-memorandum.blogspot.jp/2012/02/blog-post.html

http://allabout.co.jp/gm/gc/23915/3/

http://www.yuzuriha.sakura.ne.jp/~akikan/kaigai/kaigai21.html

Populer Post

Recommend Post