「jquery.dwImageProtector.jsを使って画像コピー禁止」の動作を、cssの「:before」、「:after」擬似要素を使って、簡易的におこないます。
（１）は、通常の画像で、右クリックから、保存など各種操作が可能です。ドラッグしてデスクトップなどへ保存することもできます。（２）は「:before」、「:after」擬似要素を使った画像です。その場に実体がないので、右クリックからの保存も、ドラッグもできません。しかし、ページのソースを見れば、画像のパスが分かりコピーは可能ですので、この機能を使って画像のコピー制限を図ったとしても、あくまで「コピーされたくない」という意思表示にしかなりません。
ちなみに、このページの上部のh2テキストも「:before」疑似要素を使って表示しているため、選択不可です。
【補足】Android端末で縦持ちの場合に、全体的にフォントサイズが大きくなってしまい、テキストが溢れることがあります。
右クリックから保存可能、ドラッグ可能
右クリックから保存可能、ドラッグ可能
右クリックから保存不可、ドラッグ不可
右クリックから保存不可、ドラッグ不可
.contentwrap p.afc:after {
content:url(img/kikagaku2.jpg);
}
.contentwrap p.bec:before {
content:url(img/mokkou-rose3.jpg);
}
