テキスト、画像のドラッグ、右クリック禁止でコピーさせない方法
ウェブサイトの記事と写真がコピーされているサイトがあり相談があり、その対処方法です。完全にガードすることはできないのですが抑止力として効果あります。
テキストの選択(ドラッグ)、右クリック禁止
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フォードに記入するプラグインです
pubsubhubbubを有効にするpubsubhubbub
pubsubhubbub(パブサブハバブ)を有効にします。いち早く更新したことを通知して、オリジナルであることを証明するわけです。
canonicalを追加する
canonicalは重複ページを解消するmetaタグで、本来ならコピーサイトがcanonicalにオリジナルサイトのURLを記載するべきですが、オリジナルサイトにcanonicalを設定しておいても良いでしょう。
WordPress3.3からは、プラグインなしでもcanonicalが記載されるようになっています。
3.3以前のWordPressの場合、プラグインを導入します。
以上の方法で対応しましたが完全に防ぐことはできません。ただ、抑止力には効果があります。
・参考サイト
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