サイトの文字や画像をコピー禁止にする方法【コピーガード】

先日、自作のWordPressテーマ「4536」のフォーラムで以下のような要望をもらいました。

シェフさん、こんばんは！

ブログのテキストをコピーさせないようにするにはどうしたらよいですか？

色々書いてあるのですが、よくわかりません。4536でやるにはどうしたら良いですか？

コピーガードにはデメリットもあるので実装していませんでしたが（記事の最後で言及します）、画像を無断でパクられたり、悪意ある引用をされたり、サイトによっては必要な機能だったりしますからね。

今回はそのコピーガード（コピープロテクト）のコードをご紹介するので、ぜひ参考にしてみてください。

コピペ一発！コピーを禁止するコード

コピーガードの方法はいくつかありますが、今回ご紹介するコードは以下のような特徴があります。

テキストは選択不可
画像は右クリックできずドラッグもできない
サイトで右クリック自体はできる
スマホで画像を長押ししても強く押しても（3Dタッチ）保存できない

PC、スマホともに実質的にコピーができません。

サイトで右クリックできるようにしているのは、ソースコードを見れる方にはそもそも対策できないからです。

ではコードのご紹介です。

CSSでテキストを選択不可に

以下のCSSをstyle.cssにコピペします。

body {
 -webkit-touch-callout:none;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none
}

特定の要素だけ（pタグやspanタグなど）に適用したい場合はbodyの部分を変更すればOKです。

javaScriptで画像の右クリックとドラッグを禁止

以下のコードを</body>タグ直前に貼り付けます。

<script>
$(function() {
 $('img').on('contextmenu oncopy', function() {
  return false;
 });
 $('img').on('dragstart', function (e) {
  e.stopPropagation();
  e.preventDefault();
 });
});
</script>

WordPressサイト向けのコード

WordPressならこちらのコードの方がメンテナンス性が良くなります。functions.phpにコピペします。

add_filter( 'wp_footer', function() { ?>
<script>
$(function() {
 $('img').on('contextmenu oncopy', function() {
  return false;
 });
 $('img').on('dragstart', function (e) {
  e.stopPropagation();
  e.preventDefault();
 });
});
</script>
<?php });