2021年01月22日更新
右クリックの禁止方法と禁止の解除(回避)方法を解説！
Webサイトで右クリックを禁止してコピーできないようにしたい、と思う人も多いでしょう。Webサイトの右クリックを禁止するためには、JavaScriptやタグを利用します。右クリック禁止にするやり方と、それを回避(解除)するやり方を解説していきます。
右クリックの禁止方法と禁止の解除(回避)方法
Webサイト作成時、右クリックすることでテキストなどをコピーできてしまいます。そのため、右クリックを禁止したいと考えたことがある人も多いでしょう。
右クリックの禁止方法
右クリックを禁止するため、基本的にはJavaScriptを利用します。
JavaScriptを使用
右クリック禁止設定にはJavaScriptを利用します。下記のJavaScriptをJavaScriptファイルに挿入するか、htmlタグの中にスクリプトタグで囲って挿入すると、右クリックを禁止することができます。
| document.oncontextmenu = function () { return false; } |
できるだけ解除されないようにするには？
JavaScriptでの右クリック禁止には、「document全体」、「html要素」、「body要素」の3種類があります。右クリック禁止の解除をできるだけされないようにする場合、この3つすべてを設定しておきましょう。
| document.oncontextmenu = function () { return false; } document.getElementsByTagName('html')[0].oncontextmenu = function () { return false; } document.body.oncontextmenu = function () { return false; } |
解除されても右クリックできないようにするには？
右クリックの禁止処理をミリ秒単位（赤字部分）で設定すれば、右クリックをなるべくできないようにする事ができます。
| setInterval(function(){ document.oncontextmenu = function () { return false; } }, 100); |
コピー不可能にする裏ワザ
なお、この状態の場合右クリック禁止にしてもコピーは簡単にできてしまいますので、それを裏技でできないようにしましょう（絶対にコピーされないわけではありません）。
CSSを使ってテキストドラッグ選択を無効化
次のhtmlタグ（画像URL部分は変更してください）をサイトの先頭に部分に貼り付けます。
| <img class="obstruct" src="任意の画像のURL"/> |
次に、下のCSSをCSSファイルに貼り付けてください。透明な画像がテキストの上にあるため選択できずコピーできない状態になります。右クリック禁止のJavaScriptと合わせて利用してみましょう。（他でabsoliteを利用しているとできませんので注意しましょう）
| .obstruct{ position:absolute; width:100%; height:100%; opacity:0; } |
右クリック禁止を解除(回避)する方法
閲覧する側で右クリック禁止を解除(回避)して無効にする場合、Chromeなどのブラウザの設定をします。
デベロッパーツールを使用
Chromeの場合、F12キーを押してデベロッパーツールを開きます。
「Console」を選択しましょう。
「>」の後ろに、前述した「できるだけ解除されないようにするには？」のJavaScriptの「false」を「true」へ変更したものを貼り付けてください。
これで右クリック禁止のJavaScriptを相殺できます。
Chromeの拡張機能を使用
Chromeの拡張機能「Enable right click」を利用して、右クリックが禁止されているサイトの設定を無効化することもできます。
サイトのJavaScriptを無効化
JavaScriptで右クリック禁止がされているため、そのサイトのJavaScriptを無効化すれば右クリック禁止の状態も解除できます。ただし、サイトの表示が崩れる可能性もあるためその点は注意しておきましょう。
最後に
右クリック禁止はJavaScriptなどを利用して設定されています。htmlやJavaScriptの知識が最低限あればコピペで右クリック禁止ができますので、利用してみてください。
はてなブログの目次の作り方をくわしく解説！
「Progate」はネットで評判！初心者におすすめの理由とは？
【初心者向け】はてなブログのおしゃれな設定方法を解説！