今回は、光ディスクのCSS（コンテンツスクランブルシステム）ではなく、Web周りのCSSコーディングによって、複製防止機能を施していることをを意思表示する方法です。
度を超した著作権侵害が発生したときに、相手が技術的保護手段を回避して意識的にサイトコピー、またはコンテンツのコピーを行ったことが証明出来るように、サイト運営を始めたばかりの方々も含めて、どのようにすれば簡単にそのような機能をサイトに実装出来るかを考えてみました。
画像認識技術を始め、テキストコンテンツの複製防止が技術的に不可能な事は御理解いただいた上で、目的としては意思表示（+技術的保護手段）を付加する事が目的になっています。
1 前提条件
前提条件と言うには烏滸がましい要素も入っていますがご容赦くださいませ。
また、筆者はwebエンジニアとしては初心者のため、なるべく不具合のないようにwebで確認できる諸々のリファレンスを見ながら作成していますが、不具合が発生しないとは限らないので、その部分は免責事項として理解して頂いた上で、本記事で紹介するコードを利用する際は、不具合が起きたときには筆者は保証できない事をご理解頂いた上で利用ください。
また、本記事は、ブログサイト運営者向けの内容になるかと思います。
- CMSはWordPress(執筆時最新版版5.9.2)
- WordPressテーマはSTORK19(執筆時点最新版3.0)
- CSSはカスタマイズCSS
- 検証した環境はChrome
（執筆時点最新版バージョン: 99.0.4844.74（Official Build））
2 サイトコンテンツの何を複製防止できるのか？
Webの世界というか、html、cssやJSを利用する以上、どれだけコピープロテクト的なことを施しても、コピーをやろうと思えば、人力でも自動的にでも覗けてしまうし最終的にはコピーできてしまうのがWebの世界ではあります。
（プリント機能からPDFファイルを作成してテキスト化したり、サイト情報を情報をダウンロードしてテキスト要素だけ抜き出したり、スクリーンショットして画像認識技術でテキスト化することが出来てしまうので...。）
しかし、「意図的にやったか？」については、サイト運営者が複製防止の意思を持って何らかの技術的なコンテンツの保護手段と言える意思表示をサイトソースに織り込んでおけば、少し救いがあるのかなと言えます。
この辺りの細かい部分に関しては専門家の方にお任せする部分もあるとして...。
ブラウザ操作の一般的な操作において複製防止機能と捉えられる機能が効くタグ
H1（ブログサイトでいうタイトル）はコピペ出来ます。恐縮ですが被リンクして頂けるように...。
- H2（見出しタグ）
- H3（見出しタグ）
- H4（見出しタグ）
- H5（見出しタグ）
- H6（見出しタグ）
- p（段落タグ）
- ul（リスト）
- ol（番号付きリスト）
- img（画像表示のタグ）
- figure（キャプションなどの文字が入れられる画像タグなど）
この内、figureタグについては複製したり、ダウンロードが出来ないようになります。
ですが、このfigureタグは、利用するWordPressテーマによって影響する範囲が変わるので、本来クリックできるようにするべき場所、例えば画像クリックやボタンクリックがちゃんと機能するか検証で試してみる必要がありますこと留意ください。
figureタグ以外は、アンカーリンク（テキストタイプのリンクタグ）も含めてクリックしてページ遷移することが可能です
収益化されているサイト運営者さまにとっては重要な部分になるかと...
それ以外のメインコンテンツ内にある画像などはマウス操作などで簡単にダウンロードできない感じになっています。
このあたり、プロの方にご指摘頂けましたら引用上で本記事を修正させて頂きますので、何卒、お知恵をお貸しくださいませ
3 追加CSS（カスタマイズCSS）のコード
それでは、WordPressの「追加CSS」に追加するコードを記載します。WordPressテーマの場合、コピペすればサイトの動作確認をその場でプレビューしながら行う事ができると思います。
p,ul,ol,img,h2,h3,h4,h5,h6 {
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
}
figcaption {
pointer-events: auto;
}
.user-drag{
:none;
}
user-dragプロパティは、Webkit独自の実装のようですので、ブラウザの違いによる挙動があるかもしれません。
それ以外にも「.wp-block-image img」を選択しているので、バージョンアップされたと時とか、簡単にドラッグできないようになっているか難しい...
また、pointer-eventsの工夫でもうちょっとスマートな記述方法があるかもです。
「figure」タグで丸っと画像や図表などのコピープロテクトをする方法もあるのですが、テーマによってfigureタグが関連する範囲がかなりバラバラだったり、図表内のリンクがクリックで出来なくなったりもするので、注意かもです。
ボタンリンクをしている場合も注意かもです
ほんとう、意思表示という意味で
p,ul,ol,img,h2,h3,h4,h5,h6 {
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
}
だけでも良いかもです。
重要なのは、技術的保護手段を回避して意識的にサイトコピー、またはコンテンツのコピーを行ったことの証明を簡便にすることです。
勉強になりました。感謝いたします：参考文献及びリファレンス
あっ..
あとは気持ち程度ですが
CMSでWordPressを利用している場合は
設定
└フィードの各投稿に含める内容
└抜粋
の設定にした方が良いかもです。