ソースコードや画像の盗用を防ぎたい！プラグインなしでできる対策をご紹介（SWELL・Coccon向け）

2024/08/282024/10/18

ソースコードや画像の盗用を防ぎたい！プラグインなしでできる対策をご紹介（SWELL・Coccon向け）

ブログデザインをそっくりそのまま真似された！（CSSごとコピー）

画像を勝手に使われた！

という経験はありませんか？

そういったことを防止できるプラグインはあるのですが、「プラグインを入れるほどじゃないけどゆるくできる防止策があればいいな～。」という方向けの対策法を解説します。

プラグインが気になった方は「WP Content Copy Protection & No Right Click」で検索！

CONTENTS

プラグインを使わない理由

「WP Content Copy Protection & No Right Click」のようなプラグインを使うと文章のコピーも出来なくなります。

記事の盗用も防ぎたい場合はそれでもいいんですが、読者の方が気になった単語を調べるときにコピー出来ない、他のブロガーが文章を引用したい時にコピー出来ないなど、ユーザビリティが低下してしまいます。

このブログのようにソースコードを公開している場合、そのコードもコピー出来ないのは致命的ですよね。

このブログでは一部の記事が有料記事という事もあり、ソースコードだけ見れない状態にしたかったのですが、そういうプラグインは探してもなかったので自分でコードを書きました。

これを公開することによって、私のブログで使っている対策を突破されてしまう可能性が上がるわけですが…ｗ

まあ、同じように悩んでいる方の力になれる方がいいかなと思い公開します。

この記事のコードを使って出来ること

右クリック禁止、ショートカットによるソースコードの表示

jsを追加するだけで出来る対策

ここで解説する方法は、jsでF12、ソースコード表示のショートカット、右クリックを無効化するというものです。

開発者ツールではサイトのコードを全て見ることができるので、HTMLやCSSをコピーするだけでそのまま同じデザインを再現することが出来てしまいます。

右クリックは画像の保存を行ったり「ページのソースを表示」メニューからやはりコードが表示されてしまうので、そういったことを防ぐ目的で無効化します。

この方法は“分かる方”に対しては突破も簡単なものではあるので、気休め程度に使ってください。

文章は右クリックからの「コピー」は出来ませんが、Ctrl+Cでコピー出来ます！

コードの使い方

※コードの反映にはキャッシュクリアが必要な場合があります

カスタマイズする際の注意事項

作業前にバックアップを取ることを推奨します。
カスタマイズは自己責任でお願いします。

SWELLの場合

以下のコードをカスタマイザー＞高度な設定＞bodyタグ終了直前に出力するコードにそのまま貼り付けます。

<script>
  document.addEventListener('keydown', function(event) {
    // F12キーを無効化
    if (event.keyCode == 123) {
      event.preventDefault();
    }
    // Ctrl + U (ソースコード表示) を無効化
    if (event.ctrlKey && event.keyCode == 85) {
      event.preventDefault();
    }
    // Ctrl + Shift + I (開発者ツール) を無効化
    if (event.ctrlKey && event.shiftKey && event.keyCode == 73) {
      event.preventDefault();
    }
    // Ctrl + Shift + C (要素検証) を無効化
    if (event.ctrlKey && event.shiftKey && event.keyCode == 67) {
      event.preventDefault();
    }
  });

  document.addEventListener('contextmenu', function(event) {
    event.preventDefault(); // 右クリック無効化
  });
</script>

Cocoonやその他テーマの場合

Cocoon環境を例に解説します。

テーマのアップデートにより作業内容が消えてしまうことを防ぐため、各テーマの子テーマで作業してください

Wordpessのメニューから外観＞テーマファイルエディタ＞Javascript.jsを開きます。

ファイルの一番下に以下のコードを貼り付けて保存します。

document.addEventListener('keydown', function(event) {
  // F12キーを無効化
  if (event.keyCode == 123) {
    event.preventDefault();
  }
  // Ctrl + U (ソースコード表示) を無効化
  if (event.ctrlKey && event.keyCode == 85) {
    event.preventDefault();
  }
  // Ctrl + Shift + I (開発者ツール) を無効化
  if (event.ctrlKey && event.shiftKey && event.keyCode == 73) {
    event.preventDefault();
  }
  // Ctrl + Shift + C (要素検証) を無効化
  if (event.ctrlKey && event.shiftKey && event.keyCode == 67) {
    event.preventDefault();
  }
});

document.addEventListener('contextmenu', function(event) {
  event.preventDefault(); // 右クリック無効化
});