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

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

右クリックの禁止方法と禁止の解除(回避)方法を解説!のイメージ

目次

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

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

Webサイト作成時、右クリックすることでテキストなどをコピーできてしまいます。そのため、右クリックを禁止したいと考えたことがある人も多いでしょう。

右クリックの禁止方法

右クリックを禁止するため、基本的にはJavaScriptを利用します。

JavaScriptを使用

最低限の右クリック禁止のJavaScript

右クリック禁止設定にはJavaScriptを利用します。下記のJavaScriptをJavaScriptファイルに挿入するか、htmlタグの中にスクリプトタグで囲って挿入すると、右クリックを禁止することができます。

document.oncontextmenu = function () {
    return false;
}

できるだけ解除されないようにするには?

できる限りの右クリック禁止のJavaScript

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を使ってテキストドラッグ選択を無効化

CSSのclassを指定して画像挿入

次のhtmlタグ(画像URL部分は変更してください)をサイトの先頭に部分に貼り付けます。

<img class="obstruct" src="任意の画像のURL"/>

透過画像をテキストの上に表示して ドラッグアンドドロップでの選択を防止

次に、下のCSSをCSSファイルに貼り付けてください。透明な画像がテキストの上にあるため選択できずコピーできない状態になります。右クリック禁止のJavaScriptと合わせて利用してみましょう。(他でabsoliteを利用しているとできませんので注意しましょう)

.obstruct{
  position:absolute;
  width:100%;
  height:100%;
  opacity:0;
}

右クリック禁止を解除(回避)する方法

閲覧する側で右クリック禁止を解除(回避)して無効にする場合、Chromeなどのブラウザの設定をします。

デベロッパーツールを使用

Chromeの場合、F12キーを押してデベロッパーツールを開きます。

「Console」をクリック

「Console」を選択しましょう。

右クリックのJavaScriptを解除するJavaScriptを挿入

「>」の後ろに、前述した「できるだけ解除されないようにするには?」のJavaScriptの「false」を「true」へ変更したものを貼り付けてください。

スクリプトを入れた状態

これで右クリック禁止のJavaScriptを相殺できます。

Chromeの拡張機能を使用

Chromeの拡張機能で右クリック禁止の解除

Chromeの拡張機能「Enable right click」を利用して、右クリックが禁止されているサイトの設定を無効化することもできます。

Enable Right Click

サイトのJavaScriptを無効化

JavaScriptを無効化するサイトを追加

JavaScriptで右クリック禁止がされているため、そのサイトのJavaScriptを無効化すれば右クリック禁止の状態も解除できます。ただし、サイトの表示が崩れる可能性もあるためその点は注意しておきましょう。

最後に

右クリック禁止はJavaScriptなどを利用して設定されています。htmlやJavaScriptの知識が最低限あればコピペで右クリック禁止ができますので、利用してみてください。

Thumbはてなブログの目次の作り方をくわしく解説!
ブログの目次はSEO対策としてもあった方がいいものですがその目次のはてなブログでの作り方はご...
Thumb「Progate」はネットで評判!初心者におすすめの理由とは?
Progateがネットで評判であることを知っていますか。本記事ではツイッターでの評判を紹介し...
Thumb【初心者向け】はてなブログのおしゃれな設定方法を解説!
はてなブログはおしゃれなデザインを設定することができるので紹介していきます。はてなブログでは...

関連するまとめ

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