【雑記】テキスト選択を無効化して記事の盗用被害を抑止する
2017/09/21
以前に投稿した記事の中で、手作業のコピー・アンド・ペーストによる記事盗用に根本的な予防策はなく、テキストを選択できないようにするなどの方法はあるものの、使い勝手が悪くなるので個人的にはオススメできない、と書きました。
その後、テキスト選択の無効化は、私が考えていたよりも柔軟性があることがわかったので、その方法をご紹介したいと思います。
ただし、この方法を使いこなすためには、HTMLやCSSの基礎的な知識が必要です。
そのため、詳しい手順については記載していませんので、ご了承下さい。
その後、テキスト選択の無効化は、私が考えていたよりも柔軟性があることがわかったので、その方法をご紹介したいと思います。
ただし、この方法を使いこなすためには、HTMLやCSSの基礎的な知識が必要です。
そのため、詳しい手順については記載していませんので、ご了承下さい。
まずはサンプルを実際に選択してみて下さい。
テキストの選択を無効化するには、そのためのプログラムを導入する必要などはなく、対象となる要素に下記のCSSを指定するだけでOKです。
でも、原則として記事全文を選択不可にしたいけど、サンプルのように例外的に選択可能にしたい部分がある、というケースもありますよね。
その場合、選択不可にしたい部分と選択可能にしたい部分で、要素を分けるという方法でもよいのですが、親要素は選択不可としつつ、子要素だけを選択可能にすることもできます。
前出のサンプルでは、親要素に「user-select: none;」を指定、1行目と3行目の「ここだけ」に「user-select: text;」を指定してあります。
テキスト選択を無効化する方法は以上です。
簡単ですよね。
ただ、冒頭で触れた記事にも書いた通り、テキスト選択を無効化しても、簡単に記事をコピーできる方法は他にあります。
少し知識のある方なら、その方法はすぐに思い当たるはず。
かなり緩い予防策であることを理解しておきましょう。
この一文は選択できます。
この一文は選択できません。
この一文はここだけ選択できます。
この一文は選択できません。
この一文はここだけ選択できます。
テキストの選択を無効化するには、そのためのプログラムを導入する必要などはなく、対象となる要素に下記のCSSを指定するだけでOKです。
-moz-user-select: none; /* Firefox向け */
-ms-user-select: none; /* Internet Explorer向け */
-webkit-user-select: none; /* Chrome向け */
-ms-user-select: none; /* Internet Explorer向け */
-webkit-user-select: none; /* Chrome向け */
でも、原則として記事全文を選択不可にしたいけど、サンプルのように例外的に選択可能にしたい部分がある、というケースもありますよね。
その場合、選択不可にしたい部分と選択可能にしたい部分で、要素を分けるという方法でもよいのですが、親要素は選択不可としつつ、子要素だけを選択可能にすることもできます。
-moz-user-select: text; /* Firefox向け */
-ms-user-select: text; /* Internet Explorer向け */
-webkit-user-select: text; /* Chrome向け */
-ms-user-select: text; /* Internet Explorer向け */
-webkit-user-select: text; /* Chrome向け */
前出のサンプルでは、親要素に「user-select: none;」を指定、1行目と3行目の「ここだけ」に「user-select: text;」を指定してあります。
テキスト選択を無効化する方法は以上です。
簡単ですよね。
ただ、冒頭で触れた記事にも書いた通り、テキスト選択を無効化しても、簡単に記事をコピーできる方法は他にあります。
少し知識のある方なら、その方法はすぐに思い当たるはず。
かなり緩い予防策であることを理解しておきましょう。
関連キーワード
