ブログ

ページ上で右クリックを禁止・解除する方法

2020年9月1日

今回はWebページ上で右クリックを禁止する方法、禁止を解除する方法を説明していきます。

右クリックでページのプログラムを見て自身のサイトの改善に繋げることができます。

逆にコンテンツをパクって著作権を侵害することもありますので、使い方は十分気をつけて活用してください。

なぜ右クリックを禁止するのか

右クリック

通常Webページのテキストや画像は、簡単にコピーすることができます。

簡単にコピーできてしまうので、自分が時間をかけて作成した文書や写真を盗用され、著作権を侵害されることがよくあります。

そのため簡単にコピーができないようにプログラムを加筆して右クリックを禁止することができます。

完全に右クリックを禁止することはできない

完全に右クリックを禁止することはできない

結論からいうと、完全に右クリックを禁止にすることはWebページの構造的に不可能です。

しかし、簡単には右クリックでコピーできないようにすることはできるので、Webに詳しくない方であれば、コピーを防ぐことができます。

ご自身のコンテンツを守りたい方は是非Webサイトで実装してみてください。

右クリックを禁止する方法

右クリックを禁止する方法

具体的に右クリックを禁止する方法は、

  • JavaScriptにコードを記述する方法
  • WordPressサイトであればプラグインをインストール方法

の2つが簡単です。

JavaScriptで禁止する方法

右クリックされた時のイベントハンドラのプロパティが「.oncontextmenu」になります。そのため「.oncontextmenu」で「false」を返すことで、右クリックの操作を無効にすることができます。

bodyタグ全体にしたい場合、「document.body.oncontextmenu」と記述を追加するだけです。

document全体で右クリックを禁止にする方法

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

bodyタグ全体で右クリックを禁止にする方法

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

WordPressプラグインで禁止する方法

WP Content Copy Protection Pro

WordPressサイトの場合、プラグインをインストールすることで右クリックを簡単い禁止できます。おすすめは「WP Content Copy Protection Pro」です。

インストールすることで画像・テキスト選択、ソースコード閲覧、印刷、ショットカットキーなど、右クリックを使って行う一部操作をできないように設定できます。

【公式】WP Content Copy Protection Pro

【公式】WP Content Copy Protection Pro
https://ja.wordpress.org/plugins/wp-content-copy-protection/

WordPressプラグインのインストール、有効化の方法は下記を参考にしてください。

こちらもCHECK

【WordPress初心者】WordPressのプラグインのインストール方法・設定方法まで解説
【初心者向け】WordPressのプラグインとは?インストール方法・設定方法まで解説

続きを見る

右クリックを解除する方法

ついでに右クリックの禁止を解除する方法も説明します。

chromeデベロッパーツールで解除する方法

JavaScriptで記述されている場合、Chromeデベロッパーツールを使って、逆の処理を行うことで解除できます。

Chromeデベロッパーツールを起動

Chromeデベロッパーツール

Windowsの場合は「F12」、Macの場合は「Option」+「Command」+「I」でデベロッパーツールを起動できます。起動すると上記画像のような表示になります。

こちらもCHECK

Chromeの検証機能(デベロッパーツール)の使い方
Chromeの検証機能(デベロッパーツール)の使い方

続きを見る

Consoleタブを選択&Clear Consoleを選択

ChromeデベロッパーツールのConsole

Chromeデベロッパーツール の上部のタブで「Console」を選択します。次に画像中央のソースコードがある部分で右クリックで「Clear console」を選択します。

Javascriptを記述する

ChromeデベロッパーツールのConsole

「Clear console」を選択すると、すべてのソースコードがなくなるので、そこに下記の記述を追加して「Enter」で実行します。

document全体で右クリックの禁止を解除する方法

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

bodyタグ全体で右クリックの禁止を解除する方法

document.body.oncontextmenu = function () {return true;}

WordPressプラグインを無効にして解除する方法

WordPressプラグイン

WordPressの左メニューから「プラグイン」→「インストール済みプラグイン」から「WP Content Copy Protection Pro」を探して、「無効化」のリンクをクリックするだけです。

もし再度右クリックを禁止したい場合は、再度「有効化」のリンクをクリックすれば設定できます。

当サイトで申込みが多いプログラミングスクール・教室はこちら!

【1位】ポテパンキャンプ:Webエンジニア輩出率No1

【2位】CodeCamp:満足度96.6%のプログラミングレッスン

【3位】DMM WEBCAMP:プログラマー転職成功率98%

【4位】TechAcademy:プログラミングスクール受講者数No1

【5位】GEEK JOB:満足度・転職率が高い・20代社会人経験者向け

-ブログ