Webサイトで右クリックを禁止する方法があります。ユーザーが右クリックメニューを開くことを防止できます。ただし、この方法はユーザー体験を損なう可能性もあるため、適用には注意が必要です。
画像をダウンロードさせないという意味では、他に方法が多々あるのであまり効果はないと思いますが、よくクライアントに要望されます。
目次
サイト全体を右クリック禁止
<body oncontextmenu="return false;">特定の画像を右クリック禁止
<img src="画像URL" oncontextmenu="return false;">JavaScriptを使って右クリックを禁止する
<script>document.addEventListener('contextmenu', function(e) { e.preventDefault(); });</script>このコードをウェブページに追加すると、右クリックが無効化され、右クリックメニューが表示されなくなります。
さらに他の操作も制限
JavaScriptを使って、他の操作も制限できます。
テキスト選択を無効化する： テキストのコピーを防ぐために、以下のようにテキスト選択を無効にできます。
<style>
body {
-webkit-user-select: none;/* Chrome, Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer */
user-select: none; /* Standard syntax */
}
</style>ショートカットキーの無効化： キーボードのコピーや他の操作を防止するために、keydownイベントでショートカットキーを無効化することも可能です。
<script>
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && (e.key === 'c' || e.key === 'u')) {// Ctrl + C, Ctrl + U e.preventDefault();
}
});
</script>注意点
制限されるユーザー体験
右クリックを禁止すると、ユーザーが使い慣れたブラウザの機能にアクセスできなくなるため、ユーザー体験に悪影響を与える可能性があります。
技術的な回避方法
JavaScriptを無効にしたり、ブラウザの開発者ツールを使用することで、これらの制限は回避できるため、完全な防止策にはなりません。
まとめ
なぜ右クリックを禁止する必要があるのかをよく考え、ユーザーの利便性を損なわないようにすることが重要です。
右クリックやテキストコピーなどはサイトの更新などで頻繁に使用します。例えばWordPressで組まれているサイトだったらログインしている状態以外でこのような防止策をするといいです。
<?php if( is_user_logged_in() ) : ?>
ログインしているとき
<?php else: ?>
ログインしていないとき
<?php endif; ?>