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

2024/08/282024/09/09

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

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

画像を勝手に使われた！

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

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

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

CONTENTS

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

ここで解説する方法は、jsを追加することでF12と右クリックを無効化するというものです。

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

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

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

ちなみに引用目的での「良いコピー」も気軽にできなくなってしまうので、文章のコピー防止については対策に含めていません。

コードの使い方

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

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

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

SWELLの場合

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

<script>
	document.addEventListener('keydown', function(event) {
		if (event.keyCode == 123) { // F12キー
			event.preventDefault();
		}
	});
	document.addEventListener('contextmenu', function(event) {
		event.preventDefault(); // 右クリック
	});
</script>

Cocoonやその他テーマの場合

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

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

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

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

document.addEventListener('keydown', function(event) {
	if (event.keyCode == 123) { // F12キー
		event.preventDefault();
	}
});
document.addEventListener('contextmenu', function(event) {
	event.preventDefault(); // 右クリック
});