簡単!Webコンテンツのコピー禁止(プロテクト)をCSSのみで

2020-02-15カスタマイズセキュリティ

プロテクト

はじめに

Webサイトのコンテンツを簡単にコピーされないように、プロテクトをかけるのに、プラグインを使わずに簡単なCSSのみで実現する方法についてです。

コピー禁止のメリット

時間をかけて書いた記事やコンテンツのテキストや画像を丸ごとコピーして転用されてしまう事を防ぐ。

デメリット

ページアドレスでリンクを貼ってもらえば問題ありませんが、記事内の一部を「コピーして引用」をしてもらえなくなる。(外部リンクを増やせない?)

 

ちなみにコピーガード(右クリック禁止)プラグインでは以下のようなものがあります。

WP Content Copy Protection with Color Design

WP Content Copy Protection & No Right Click

 

CSSでコピーガード

サイトコンテンツ内でクリック選択が出来ないようにするコードです。

/**********************
コピー防止
***********************/
.XXXXXXXX {
user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
}
上記CSSの1行目「.XXXXXXX」の部分をご自身の環境(ワードプレステーマなど)に合わせたクラス名に変更して記述します。

 

テーマ別の具体例

以下の例、右側のクラス名はクリックでコピー出来ます。

 

無料テーマ

Cocoon .entry-content

Luxelitas .container

LION MEDIA .container

STINGER #contents

 

有料テーマ

JIN #contents

AFFINGER #contentInner

SANGO .entry-content

 

 

一部、コピー可能にする方法

上記の具体例での「テーマ別クラス名部分」のように、一部のみクリック(~コピー)可能にする方法です。

コピーガード:一部コピー可

具体的には、対象の文字列あたりをクリックすると、自動でコピー可能な部分が全選択されるので、そこで右クリックで「コピー」がメニューに出ます。(OSやブラウザなど環境によります)

iPad(やiPhone)では ↓

コピーガード:一部コピー可

 

以下のCSSを追記します。

/*一部コピー可*/
.copyok {
user-select:all !important;
-moz-user-select:all !important;
-webkit-user-select:all !important;
-khtml-user-select:all !important;
}

 

これで、「copyok」クラスを指定した部分のみをコピー可能にする事が出来ます。

実際のHTMLは、例えば以下のようにコピー可能にしたい部分を<SPAN>や<DIV>タグで囲みます。

<span class="copyok">ここはコピー出来ます。</span>

 

動作確認は、以下をクリックして見て下さい。
ここはコピー出来ます。

 

コピー可能な部分を装飾するとわかりやすくなります。

ここはコピー出来ます。

 

コード表示について

コードなどを表示して、コピーしてもらえるようにするには、ハイライト付きのエディタを埋め込む形のものが便利です。

標準機能にあるテーマ

Luxelitas

Luxelitas→カスタマイズ→CSS

「シンタックスハイライターのCSS」から選択

 

Cocoon

Cocoon設定→コード

Cocoonコード表示

 

 

その他、プラグインなどもありますが、プラグインなしで出来る方法は以下にまとめています。

 

以上です。

関連記事