2-12 コピーガードのCSS

テキストや画像のコピーをできなくする方法です。

以下のCSSを追記する。

記事コンテンツのみコピー禁止

/* コピー防止 */
.entry-content {
user-select:none;
 -moz-user-select:none;
 -webkit-user-select:none;
 -webkit-touch-callout:none;
 -ms-user-select: none;
 -khtml-user-select:none;
}

全てのテキストをコピー禁止

/* 全面コピー防止 */
body {
user-select:none;
 -moz-user-select:none;
 -webkit-user-select:none;
 -webkit-touch-callout:none;
 -ms-user-select: none;
 -khtml-user-select:none;
}

一部だけコピー許可

任意のクラス名（この場合は、copyok）に対してコピーを許可する。

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

コピー許可にしたい部分を、以下のタグで囲む

<span class=”copyok”>コピー可能にしたい文章</span>

ブロック内すべてコピー可能にしたい場合は、右側のブロック画面から高度な設定をクリックし、追加CSSクラスに「copyok」と名前をつける。

たくさんある場合は、コードエディターを開いてhtmlで指定する。

画像のコピー禁止

/* 画像保存ドラッグ禁止 */
img {
  pointer-events: none;
}

これだけでは、画像の直リンクができてしまうので、2-14の直リンクの禁止もお試しください。

以上です。