ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

テキストのドラッグ、画像のコピーを禁止して、記事をコピーさせない方法

記事がコピーされないようにCSSやJavaScriptでブロックします。

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

テキストをコピーさせない方法

テキストをコピーさせない方法としてCSS3とJavaScriptでテキストをドラッグできないようにします。

テキストの選択(ドラッグ)禁止

CSSとJavaScriptで、テキストの選択ができないようにします。
5分ほどで簡単に導入できます。

まずは、CSSでテキストを選択できなくする

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

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を記述します。

onMouseDown="return false;" onSelectStart="return false"

例えばページ全体で、選択不可能にする場合はbodyタグに記述します。

<body onMouseDown="return false;" onSelectStart="return false">

部分的に選択不可能とする場合は、divなどのタグに記述します。

<div onMouseDown="return false;" onSelectStart="return false">
選択させたくないテキスト
</div>

テキストの選択禁止は上記のCSSとJavaScriptで、ほぼ防ぐことができます。

右クリック禁止でメニューが表示されないようにする

右クリックしてもメニューが表示されないようにする方法も効果的です。

jQueryで右クリック禁止にします。
下記のJavaScriptを<head>や<body>など好きな所に記述してください。

<script>
$("body").bind
("contextmenu", function(e)
{return false;}
);

$("body").mousedown
(function(e)
{return false;}
);
</script>

特定の場所でのみ右クリックを禁止する方法

特定の場所だけ右クリックを禁止する場合は「$(“body”).bind」を「$(“div.protect”).bind」や「$(“img.protect”).bind」なと変更してください。

あとは右クリックを禁止するHTMLタグに「class=”protect”」を記述します。

<div class="protect">
ココでは右クリック禁止
</div>

これで右クリックしても何も反応しなくなります。

画像を保存させない方法

jQueryのプラグインと、IEのイメージツールバーを無効にして画像を保存できないようにします。

jQueryで画像を保護する

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

dwImageProtector.js

1.透過gifを用意する

サイズ1ピクセルの透過gifを「blank.gif」として用意します。

2.dwImageProtector.jsを用意する

下記のコードを「dwImageProtector.js」として保存します。

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')
 });
};

4行目の「image: ‘blank.gif’」は、blank.gifファイルまでのURLを記述してください。

3.<head>タグ内に下記のJavaScriptを記述します

<head>タグ内に下記を記述します。jQueryは既に読み込んでいるとします。

<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行目を下記に変更すると、全ての画像ファイルに適用されます。

$('img').protectImage();

4.保護したい画像にクラスを設定する

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

<img src="image/test.jpg" class="protect">

右クリックで画像を保存しても透過gifが保存されるだけで、画像ファイルは保存されなくなります。

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

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

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

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

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

.htaccessに下記のコードを記述してください。URLは適宜変更ください。

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

これでHTMLタグごとコピーされてもブロックできます。

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

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

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

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

RSS Footer

pubsubhubbubを有効にするpubsubhubbub

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

pubsubhubbub

テキストがコピーされると教えてくれるプラグイン

テキストがコピーされると、コピーされた箇所をメールで教えてくれます。
後日、コピーされた文章を検索すると、コピーサイトを見つけることができます。

Check Copy Contents

コピーサイトに負けないMovable Type

Movable Typeの場合は以下の設定をおこないオリジナルであることを知らせます。

pubsubhubbubプラグインを導入する

プラグイン「pubsubhubbub」を使って、更新したことをいち早くGoogleに知らせます。

pubsubhubbub

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”を記述します。

<link rel="canonical" href="<$MTCanonicalURL$>" />

記述後に再構築します。

以上の方法では完全にコピーを防ぐことはできませんが、抑止力としての効果はあります。

新しい記事

東京のWEB制作会社イッティ