ブログ画像の不正コピー防止に！無断使用を阻止する方法

うーむ。
ちょっと前に話題にあがっていた話題、というか結構前から問題とされていることですが、文章や画像の無断転載や不正利用ってやっぱりどうにも腹立たしいですね。
以前、某音楽系サイトに当ブログの文章を丸パクリされたりと色々ありましたが、最近は画像の不正利用が目立ちます。
キュレーションサイトの追っかけのようなサイトが、出典すらも明記せずに堂々と使用していたりするんですよね。さすがに、おいちょっとお前！ってなります。
ということで、前々からウェブサイトを作った際には導入しているものですが、サイト内の画像のダウンロード・コピーをできるだけ出来ないようにする方法について今回は綴ります。
ウェブに公開している以上完璧にとはいきませんが、少しでも輩から大切なコンテンツを守るために。

キュレーションサイトとその追っかけサイトがパクリの温床

キュレーションサイトとその追っかけサイトがパクリの温床

と、画像のダウンロード・コピー防止する方法の前に、自分のブログにそれを導入しようと考えた経緯について少しばかり。
一時期大量に増えましたキュレーションサイト。あれは本当に酷いですね。
MERYやiemoはようやく消えていったようですが、画像や記事構成のパクリの問題は以前と残っているはず。
某有名音楽系サイトに記事をパクられたり、キュレーションサイトの真似事をしたウェブサイトに記事を無断転載されていたりと、この1年でも色々ありました。
※当ブログの記事がコピーされるとわかるようにしています
それ以外には、キュレーションサイトからのご連絡がいくつも。大体、「貴サイトの画像を引用させていただきました。問題があればご連絡ください」といった内容です。
この手の連絡があった場合は、引用元が書かれていたりと配慮があることが多いですが、記事を確認すると、大体がその場（観光地・ショップなど）に行くこともなく、ネット上で調べた情報をもとに書かれたものばかり。そもそも、記事を書く気でその場に行っていれば、写真がすべて他人のものだということはありえないわけで。
部分的に引用する、というのは記事を深く書こうと思えば当然あり得ることですが、丸々引用っていうのはやはりいただけない。
instagramの写真使って、Twitterやwikipediaの文章を引用して記事を作る。Lancersなんかで記事を格安大量生産しているのでしょうが、あの手のサイトが早く消えていってくれることを祈るばかりです。
妻が運営しているYouTubeチャンネルの動画がしょっちゅうパクられたりと、他人のコンテンツを自分のコンテンツだと思わせる行為が蔓延しているように思えます。
……とかなり長くなってしまいましたが、そういった行為を出来るだけ阻止したいので、今回の画像のダウンロード・コピー防止方法を記述するに至りました。
ま、以前より同じようにしている方はいると思いますし、何年も前から仕事でサイトを作った時には要望があれば実装していた方法です。

画像の不正コピー・ダウンロード防止方法

では、画像の不正コピー・ダウンロードの防止方法について。
仕組みとしては、サイト上の画像の上に透明の画像を貼ることで実際の画像には手を触れられない、といった具合です。
こうすることで画像をドラッグして保存しようとしても、右クリックからダウンロードしても、実際の画像はダウンロードできません。
注意点として、画像の配置されている状況などにより当然ながら表示が崩れる場合があります。ということで、html・CSS・javascriptの知識が多少あるという前提で進めます。
利用の際は、ご自分の環境に合わせて手を加えてみてください。
※メインタイトルでは「ブログ画像」としていますが、ウェブサイト全般で使えます。

コードサンプル

まず、こちらから透明画像をダウンロードしてください。

javascript

次に、javascriptを記述します。

$(window).load(function () {
  var images = $('.post-content img');
  images.wrap('<div class="protect-images"></div>').before('<span></span>');
});

変数imagesでは、保護したい画像を指定してください。
アフィリエイトタグにもimgタグは含まれていたりするのでお気をつけを。
利用するページのheadタグ内に直接記述するか、javascriptファイルを作成し読み込んでください。
jQueryを利用するため、前もって読み込んでおいてくださいね。

html

この段階で、指定したimgタグ周辺のタグに変化があるはずです。

<img src="">

だったところが、

<div class="protect-images">
  <span></span>
  <img src="">
</div>

となります。

css

最後に、cssに下記を追加します。

.protect-images {
  position: relative;
}
.protect-images span {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: url('protect-images.png') 0 0 repeat;
}

backgroundのurlは、ダウンロードした透明画像を置いたpathにしてください。
これもheadタグ内に直接記述しても、外部ファイルでもOKです。
こうすることで、保護対象の画像の上に生成されたspanが画像の上に重なり、透明画像が背景画像となることで保護フィルムのようになります。

改めて書きますが、画像の設置されている状況によっては表示が崩れる可能性があります。スマホでの表示も合わせて確認してくださいね。

まとめ

前振りが長くなってしまいましたが、以上が画像のダウンロードを阻止する方法です。
簡単に抜け道をさらすことになってしまうので書かないですが、ウェブに公開している以上、これは完全に防げる方法ではありません。
ただし、実際の泥棒を防ぐのに障害が一つ増えるだけで諦めることが多くなるというのと同様、画像を不正利用しようとする輩も手っ取り早くできないことは避けようとするでしょう。
100%でなくとも出来うる限り阻止して、大切なコンテンツを守り、さらにはパクリサイトがはびこるのを防ぎませう。