⚠️右クリック＆テキストのコピーを禁止する方法【CSS&javascript】

こちらの記事では、KAJABI上のテキストをコピー禁止にする方法をご紹介します。KAJABIにアップロードされた動画はダウンロードができないようになっていますが、テキストなどのコンテンツは通常の状態ですとテキスト選択からコピーすることが可能です。

※ こちらでご紹介する方法はCSS、Javascriptの知識が必要になります。また、作業手順を間違えるとサイトレイアウトが崩れたりする可能性がありますので注意ください。

※ Landing, Websiteページのテキストコピー防止はすべてのプランで実装することが可能ですが、Productsページのテキストコピー防止を行うには Code Editor が使える必要があります。Code Editorは Proプランもしくは KAJABI Access プランでのみ利用できます。

Landing, Websiteページでの実装方法

Landing、Websiteページでは以下の方法で実装が可能です。（この作業はすべてのプランで可能です。）

↓まずはコピー防止をしたいページを選択します。Landingページの場合は一ページずつ行う必要があります。Websiteページであれば、どれかのページを設定すればOKです。

↓　ページビルダーが開くので、「Setting」タブの「Custom Code」に進みます。

↓ 以下のようにCSSとjavascriptを追加するエリアがあるので、以下のコードをそれぞれに追加します。

CSSに追加するコード（テキスト選択を不可にします。）

*{
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

Javascriptに追加するコード（右クリックを不可にします。）

window.addEventListener('contextmenu', function (e) { 
// do something here... 
e.preventDefault(); 
}, false);

これでSAVEしていただくと、該当ページのテキストも選択できなくなり、右クリックも機能しなくなります。

※ もし他にもCSSやjavascript を設定している場合は、他のコードとの干渉で不具合が起きる可能性があります。

Productsページでの実装方法

※こちらの操作を行うには Code Editor が使える必要があります。

Code Editor機能を使うと、KAJABIサイトの細かい部分のHTML/CSS/javascroptをカスタマイズすることができるようになります。この機能を利用してProductsページにもコードを追加します。

↓ まずは、コピー防止をしたいProductsを選択します。

↓ 次に、Productsのテーマのカスタマイズをするので Customize > Modify Code を選択します。

↓　すると以下のような画面が表示されます。

この中から「scripts.js」「overrides.scss」の２つのファイルを探します。 　Assetsという階層の中に入っていると思います。

overrides.scssに追加する

次に、「overrides.scss」をクリックします。そして、先ほどの上の「CSSに追加するコード（テキスト選択を不可にします。）」というコードを同じコードを貼り付けて保存します。

scripts.jsに追加する

次に、「scripts.js」をクリックします。そして、先ほどの上の「Javascriptに追加するコード（右クリックを不可にします。）」というコードを同じコードを貼り付けて保存します。scripts.js にはすでに多くのコードが書いてあるかと思いますが、一番下までスクロールして、一番下に貼り付けます。その際に他のコードを消したりしないようにご注意ください。

注意：この操作を行うことでPOSTページのコンテンツのコピー防止を実装することができますが、何故か Products自体のページには適応されないようです。（基本的に主なコンテンツはPostページ上に表示されるので問題はないかと思います。）

↓これはProductsページ

↓これがPostページ

※ これらの作業を行う前に、作業前のコードをメモに貼り付けておくなどしてバックアップを取ることをオススメします。