セコい「コピペ禁止サイト」の作り方(右クリックもテキスト選択も禁止!)

HTML/CSS
スポンサーリンク

個人的には大反対な「右クリック禁止サイト」ですが、あえてその実装方法を紹介します。

右クリックを禁止しているサイトの意図は文字のコピーをされたくないことだと思うので、マウスドラッグで文字等の選択を禁止する方法も併せて紹介します。

現在は、より強固に右クリックをガードする手法もありますが、一般的には以下のように実装されています。

がんばって書いた記事をコピーされたくない気持ちもわからなくはないですが、ユーザ側からするとただただウザいだけです。

スポンサーリンク

右クリックを禁止する方法

右クリックするとコンテキストメニューが表示されます。

コンテキストメニュー内には「コピー」や「ソースを表示」という項目があるので、この項目を選択できないように意地悪したい場合に設定します。

bodyタグ内にoncontextmenuイベントハンドラを追加します。

<body oncontextmenu="return false;">

禁止ついでにアラートメッセージを表示させるには、以下のようにします。

<body oncontextmenu="alert('右クリックすんなってば!'); return false;">

HTMLタグ内に直接記載せず、JavaScriptとして記載しても同様の機能になります。scriptタグで囲んで対象ページ内部に記載しても良いですし、外部ファイルとして記載してもOKです。

document.oncontextmenu = function(){
return false;
};

画像のみ右クリックを禁止する方法

「画像は絶対コピーさせん!」というセコい意図をアピールする方法。
imgタグに同様のコードを追記します。

<img src="XXXX.jpg" oncontextmenu="return false;">

文字の選択をできないようにする方法

右クリック禁止だけしても、マウスドラッグで文字を選択し、Ctrl + C等でコピーされたら普通にコピーされてしまうので、マウスドラッグでの選択範囲指定を禁止します。

Javascript設定の他、CSSの設定を行うことにより、より強固に文字選択禁止にすることができます。

<body onMouseDown="return false;" onSelectStart="return false;">
body {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

指定箇所のみ文字選択禁止にしたい場合

指定箇所のみ選択禁止にしたい場合は、bodyではなく、divタグなどに追記します。

<div class="ban_select" onMouseDown="return false;" onSelectStart="return false;">
....
(選択されたくないエリア)
....
</div>
.ban_select {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

クリップボードに記憶させない方法

右クリックやCtrl + Cからコピーされてもクリップボードにはコピーされない方法。
bodyタグにoncopyイベントハンドラを追加します。

コピーできてるみたいに見せかけて、実はできていないので、これが一番悪質かも…。

<body oncopy="return false;">

まとめた完璧風ソース

上記のコードをまとめたソースコードです。
とりあえず、この設定をしておけば「右クリック禁止&コピペサイト」をつくることができます。

<body class="ban_select"
      onMouseDown="return false;"
      onSelectStart="return false;"
      oncopy="return false;">
..
..
..
</body>
body {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

WordPressサイトの場合

WordPressサイトで右クリック&コピペ禁止サイトを作るのは非常に簡単で、
WP Content Copy Protection & No Right Click」というプラグインをインストールすればOKです。

終わりに

以上がコピペ禁止サイトのつくり方説明でした。

これらの設定で一応コピー禁止サイトになりますが、HTMLやJSの特性上ソースを完全に隠すことは難しく、大抵の場合は少し工夫でテキストのコピーは簡単に行うことができます。

「ウチのサイトの文章はコピーさせんぞ!」
「コピーしたら許さんからな!」

…というセコセコアピールにはなりますが、利便性を考えると、メリットよりはデメリットの方が多いかと思います。

 

因みに、解除する方法は、以下のページにズバリ掲載していますので、ご参考にどうぞ。

コメント

タイトルとURLをコピーしました