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

1 30

先日、自作の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 });

コピーガードのデメリット

今回ご紹介した方法でコンテンツのコピーを防止できますが、少なからずデメリットもあります。

例えば、テキストがコピーできないと「引用」してもらえませんよね。

引用してリンクを貼ってもらうことはサイトの評価アップに直接つながるので(外部リンク)、大きなデメリットと言えます。

コピーガードはこういったデメリットを理解した上で使ってくださいね。

カテゴリー プログラミング学習

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

このサイト「MORIAWASE」の運営者。少しでも多くの人の悩みや不安を解決するためにハウツー記事を中心に更新しています。お問い合わせはページ下部のお問い合わせページから。フォローやシェアは大歓迎です!