自分のサイトのテキストを他の人が別のサイトにコピペしてしまう…なんてことがたまにあったりします。
また、自分のサイトのソースコードを見られてしまい、ソースがそのまま知らないサイトに使われてしまう…なんてことも無きにしもあらずですよね。。。
そこで今回は、PCとスマホのそれぞれのコピー禁止の方法についてご紹介したいと思います！
PCサイトでコピー禁止を実装するには？
まず、PCサイトでコピー禁止を実装するには、<body>タグを以下のように書き換えましょう。
<body oncopy='return false;'>
これでコピーを禁止にすることができます。
また、ソースコードを見られないようにするには、同じく<body>タグを以下のように書き換えましょう。
<body oncontextmenu='return false;'>
上のように書き換えることで右クリックができなくなるので、右クリックしてソースコードを見ることができなくなります！
応用として、コピー禁止とソースコードの閲覧禁止を両方実装したい時は、以下のように書き換えることで実装可能になります！
<body oncontextmenu='return false;' oncopy='return false;'>
スマホサイトでコピー禁止を実装するには？
スマホサイトでコピー禁止を実装するには、PCサイトの時と同じように<body>タグを書き換える…というよりかは、CSSで制御するような形になります。
コピー禁止を実装するには、以下のCSSをbodyのCSSに記述しましょう。
body {
-webkit-touch-callout:none;
-webkit-user-select:none;
}
2行目の
-webkit-touch-callout:none;
はリンク長押しのポップアップを無効化する際に必要なCSSになります。
3行目の
-webkit-user-select:none;
はテキスト長押しの選択ボックスを無効化するのに必要なCSSで、これがスマホサイトでコピー禁止を実装する時に必要なCSSになります！
まとめ
以上がサイト上のテキストをコピー禁止にする方法でした！
最近、色々なサイトを見ているとコピー禁止を実装しているところも増えてきたように思えます。
この機会に、ご自身のサイトにコピー禁止を実装してみるのもよいかもしれませんね(^^)
