過去にウェブサイトにおける画像のコピーガードの手法として「jQueryでサイト内画像のコピーガードをする」を紹介しましたが、今回はテキスト本文に対してのコピーガードの手法をまとめていきたいと思います。
具体的には、テキスト部分を選択できないようにする形になります。画像のコピーガードと同じ要領で、下記のコードを記述することでテキスト部分の選択を防ぐことができます。
【javascript】
$(function(){
$("p").on('selectstart',function(e){
return false;
});
});
ちなみに一部のブラウザを除けばこのようにCSSでも対応することが可能です。
【CSS】
p {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
実際に動作を確認できるサンプルを下記に用意していますので、ご参考に。
See the Pen Copy_guard_sentences by designsupply (@designsupply) on CodePen.
ちょっとしたことですが、ブログやメディアサイトを運営されている場合などに、記事原稿などの盗用を防ぐことができるのでは無いでしょうか。画像のコピーガードでまとめている「jQueryでサイト内画像のコピーガードをする」と併用することで効果を発揮しそうですね。
（参考にさせて頂いたサイト）
右クリックと文字列選択を禁止する方法とそれを無効にするブックマークレット
user-select | MDN
