右クリックの禁止方法と禁止の解除(回避)方法を解説！

Webサイトで右クリックを禁止してコピーできないようにしたい、と思う人も多いでしょう。Webサイトの右クリックを禁止するためには、JavaScriptやタグを利用します。右クリック禁止にするやり方と、それを回避(解除)するやり方を解説していきます。

目次

  1. 1右クリックの禁止方法と禁止の解除(回避)方法
  2. ・右クリックの禁止方法
  3. ・コピー不可能にする裏ワザ
  4. ・右クリック禁止を解除(回避)する方法
  5. ・最後に

右クリックの禁止方法と禁止の解除(回避)方法

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」へ変更したものを貼り付けてください。

関連するまとめ

関連するキーワード

この記事のライター
八千草　蛍
分かりやすく気軽に読める記事を書いてまいりたいと思います。よろしくお願いいたします。

人気の記事

新着まとめ