テキストのドラッグ、画像のコピーを禁止して、記事をコピーさせない方法
記事や写真がコピーされないようにCSSやJavaScriptで防ぎます。また、オリジナルサイトであるためのサイト運営に欠かせないプラグインなどを紹介します。
ウェブサイトの記事と写真がコピーされているサイトがあり相談があり、その対処方法です。
完全にガードすることはできないのですが抑止力として効果あります。
テキストをコピーさせない方法
テキストをコピーさせない方法としてCSS3とJavaScriptでテキストをドラッグできないようにします。
テキストの選択（ドラッグ）禁止
CSSとJavaScriptで、テキストの選択ができないようにします。
5分ほどで簡単に導入できます。
まずは、CSSでテキストを選択できなくする
CSS3のuser-selectでドラッグでの選択を不能にします。
CSS
body{user-select:none;-webkit-user-select:none;-ms-user-select: none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-drag:none;-khtml-user-drag:none;}さらにJavaScriptで制御
IEには効果的な方法です。
bodyタグ、またはテキストを選択させたくないタグに、JavaScriptを記述します。
JavaScript
onMouseDown="return false;" onSelectStart="return false"例えば、ページ全体で選択不可能にする場合は<body>タグに記述します。
JavaScript
<body onMouseDown="return false;" onSelectStart="return false">部分的に選択不可能とする場合は<div>や<p>タグなどに記述します。
JavaScript
<div onMouseDown="return false;" onSelectStart="return false">選択させたくないテキスト</div>テキストの選択禁止は上記のCSSとJavaScriptで、ほぼ防ぐことができます。
右クリック禁止でメニューが表示されないようにする
右クリックしてもメニューが表示されないようにする方法も効果的です。
jQueryで右クリック禁止にできます。
下記のJavaScriptを<head>や<body>など好きな所に記述してください。
JavaScript
<script> $("body").bind ("contextmenu", function(e) {return false;} );
$("body").mousedown (function(e) {return false;} );</script>特定の箇所で、右クリックを禁止する方法
特定の場所だけ右クリックを禁止する場合は「$("body").bind」を「$(".protect").bind」と変更してください。
例えば、下記になります。
JavaScript
<script> $(".protect").bind ("contextmenu", function(e) {return false;}); $("body").mousedown (function(e) {return false;} );</script>あとは右クリックを禁止するHTMLタグに「class="protect"」を記述します。
HTML
<div class="protect">ココでは右クリック禁止</div>これで右クリックしても何も反応しなくなります。
応用すると<p>タグや、<img>タグを指定することができます。
例えば、下記のJavaScriptにすると<p>タグの箇所は右クリックに反応しなくなります。
JavaScript
<script> $("p").bind ("contextmenu", function(e) {return false;}); $("body").mousedown (function(e) {return false;} );</script>画像を保存させない方法
jQueryのプラグインと、IEのイメージツールバーを無効にして画像を保存できないようにします。
jQueryで画像を保護する
CSSで透過GIFを画像の上に乗せて、背景に画像を配置して保護する方法があります。
ただ、この方法では右クリックの「背景画像を表示」でコピーされてしまうので、jQueryのプラグイン「dwImageProtector.js」で画像を保護します。
1.透過gifを用意する
サイズ1ピクセルの透過gifを「blank.gif」として用意します。
2.dwImageProtector.jsを用意する
下記のコードを「dwImageProtector.js」として保存します。
JavaScript
<script>jQuery.fn.protectImage = function(settings) { $("img[name=blank]").remove(); settings = jQuery.extend({ image: 'blank.gif', zIndex: 10 }, settings);return this.each(function() { var position = $(this).position(); var height = $(this).height(); var width = $(this).width(); $('<img />').attr({ width: width, height: height, src: settings.image, name : "blank"}).css({ top: position.top, left: position.left, position: 'absolute', zIndex: settings.zIndex }).appendTo('body') });};</script>４行目の「image: 'blank.gif'」は、blank.gifファイルまでのURLを記述してください。
3.<head>タグ内に下記のJavaScriptを記述します
<head>タグ内に下記を記述します。jQueryは既に読み込んでいるとします。
JavaScript
<script type="text/javascript" src="dwImageProtector.js"></script><script type="text/javascript">$(window).bind('load', function() { $('img').protectImage(); });$(window).bind('resize', function() { $('img.protect').protectImage();});</script>7行目を下記に変更すると、全ての画像ファイルに適用されます。
JavaScript
$('img').protectImage();4.保護したい画像にクラスを設定する
保護したい画像に「class="protect"」を記述します。
HTML
<img src="image/test.jpg" class="protect">右クリックで画像を保存しても透過gifが保存されるだけで、画像ファイルは保存されなくなります。
IEのイメージツールバーを無効にする
IEのイメージツールバーを無効にするmetaタグをhead内に記述します。
HTML
<meta http-equiv="imagetoolbar" content="no" />.htaccessで写真のスクレイピングを防ぐ
HTMLをコピーして、ウェブサイトの画像表示しているスクレイピングササイトには、.htaccessのmod_rewriteを使って画像表示をブロックします。
.htaccessに下記のコードを記述してください。URLは適宜変更ください。
htaccess
RewriteEngine onRewriteCond %{HTTP_REFERER} !^$RewriteCond %{HTTP_REFERER} !^http://自分のURL/.*$ [NC]RewriteCond %{HTTP_REFERER} !^http://www.自分のURL/.*$ [NC]RewriteRule ^(.*)$ - [F]これでHTMLがまるごとコピーされてもブロックできます。
コピーサイトに負けないためのWordPressプラグイン
老舗のブログに記事がコピーされると、オリジナルが負けてしまう場合があるのでWordPressのプラグインで防ぎます。
RSSにコピーライトを入れるRSS Footer
コピーライト、サイトへのリンクをRSSフォードに記入するプラグインです
pubsubhubbubを有効にするpubsubhubbub
pubsubhubbub（パブサブハバブ）を有効にします。いち早く更新したことを通知して、オリジナルであることを証明するわけです。
テキストがコピーされると教えてくれるプラグイン
テキストがコピーされると、コピーされた箇所をメールで教えてくれます。
後日、コピーされた文章を検索すると、コピーサイトを見つけることができます。
コピーサイトに負けないMovable Type
Movable Typeの場合は以下の設定をおこないオリジナルであることを知らせます。
pubsubhubbubプラグインを導入する
プラグイン「pubsubhubbub」を使って、更新したことをいち早くGoogleに知らせます。
1.プラグインをインストール
プラグイン「MT-PubSubHubbub」をMovableTypeのPluginディレクトリにアップロードして、プラグインを有効化します。
2.インデックステンプレートの「atom.xml」を編集します
インデックステンプレートの「atom.xml」の<link rel="self".../>の後に、<$mt:PubSubHubbubLinks$>を記入します。
atom.xmlテンプレートの5行目付近にあります。
テンプレート
<$mt:HTTPContentType type="application/atom+xml"$>
<?xml version="1.0" encoding="<$mt:PublishCharset$>"?><feed xmlns="http://www.w3.org/2005/Atom"><title><$mt:BlogName remove_html="1" encode_xml="1"$></title><link rel="alternate" type="text/html" href="<$mt:BlogURL encode_xml="1"$>" /><link rel="self" type="application/atom+xml" href="<$mt:Link template="feed_recent"$>" /><$mt:PubSubHubbubLinks$>//ここに記述ブログを更新すると、pingをとばしてGoogleに更新したことをいち早く伝えることができるようになります。
テンプレートにrel="canonical"を設定する
オリジナルページであることを知らせるためにcanonicalを設定しておきます。
<head></head>タグ内に、rel="canonical"を記述します。
MTタグ
<link rel="canonical" href="<$MTCanonicalURL$>" />記述後に再構築します。
以上の方法では完全にコピーを防ぐことはできませんが、抑止力としての効果はあります。
