Webの記録

右クリック禁止で画像のコピーガード(ドラッグ禁止対策追加)

投稿日:2011年3月25日 更新日:

この記事は約 4 分で読めます。


【2015.2.20追記】設置方法にドラッグ禁止についても、対策追加しました!

今、あるところのサイト制作をしているのですが・・・。
「画像の著作権を守るため、画像のコピーガードをしてください」という要望がありました。

画像をお持ち帰りする方、いるんですね。。。。
今回、改めて言われて・・・考えました。。。。
どうすれば、コピーガード出来るのかな??対策を私なりに考えてみました。



簡単に画像をコピーガードと言いますが・・・。
キャプチャー(Windowsなら「Ctrl」(もしくはShift)+「PrtSc」 、Macなら「Shift」+「コマンド」+3で「画面全体のキャプチャ」・「Shift」+「コマンド」+4で「指定範囲」)しちゃえば、どんなに画像のコピーガードをしても意味がないです。

ついでに言うと、ソースコードを見る事が出来る人ならソースから、JavaScriptでコピーガード出来るように設定してればJavaScriptをoffにしていれば、画像のコピーガードなんてやっぱり意味ないです。

コピーガードを解除する手立ては幾らでも・・・・ネットで検索すれば出てきます。
なので・・・頑張っていろいろやってみるけれど・・・、気休め・初心者の方の対策という感じでする位の程度なんですね・・・。

そう考えると、コピーガードの難しさをとても感じます!!

ひとまず、いろいろ・・・・試しています!!
・・・で、今回は、「右クリック禁止とドラッグ禁止」にチャレンジします!


設置方法。

これは比較的簡単に出来ます!!

oncontextmenu="return false;"

これを入れるだけです。あとは・・これをドコに入れるかです。

  • 全体を「右クリック禁止」にする場合。
    <body oncontextmenu="return false;">
  • 段落(Pタグ)を右クリック禁止にする場合。
    <p oncontextmenu="return false;">ここに文字</p>
  • 画像(imgタグ)を右クリック禁止にする場合。
    <img src="画像のパス" oncontextmenu="return false;" />

こんな感じで、タグに

oncontextmenu="return false;"

を入れるだけです。


【2015.2.20追記】「右クリック禁止」だけでなく、「ドラッグも禁止」にしたい場合は、以下を記述します。

onMouseDown="return false;" onSelectStart="return false"

全体でドラッグ禁止・右クリック禁止という風にしたい場合は、以下のように記述します。

<body onMouseDown="return false;" onSelectStart="return false" oncontextmenu="return false;">


余談。

ただし・・・全体を「右クリック禁止」するのは、ユーザビリティを考えたら・・・どうなの??というところです。。。
画像の「右クリック禁止」は、サムネイルクリックで大きな画像を表示する別のjQueryのライブラリと組み合わせると、サムネイル画像は良いのですが・・大きな画像の右クリック禁止は上手くいきませんでした。

【画像コピーガードの関連記事】

-Webの記録
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

Facebookページで「30いいね!」を獲得したら出てくる「インサイト」画面。

この記事は約 1 分で読めます。 ゆるゆると更新していたFacebookページ。 ようやく「いいね!」の数が30を超えました。 すると、今まで見る事が出来なかった「インサイト」という項目が表示されるよ …

no image

WordPress 「この記事は●分で読めます」をプラグインなしで表示させたい時

この記事は約 1 分で読めます。 よく他の方のブログで記事の冒頭に「この記事は●分で読めます」という表示がされているのを見かけます。 これがあると、その記事を読むかブックマークするかを判断出来て便利だ …

no image

WordPress プラグイン「Dynamic To Top」で上に戻るボタンを簡単に設置♪

この記事は約 1 分で読めます。 よくいろんなサイトを閲覧していて、ページの下へスクロールしていくと・・・「上に戻る」ボタンを見かけます。 そこで今回は、Wordpressのプラグイン「Dynamic …

no image

Facebook向けに最適なOGP設定の仕方をメモ。

この記事は約 1 分で読めます。 何かのサイトで「いいね!」をした時に、友達のニュースフィードに確実に出したいなら・・・OGPの設定が必要! ・・・と、いうワケで最近はサイトを作ったら「OGP設定」を …

no image

画面のスクリーンショット(キャプチャー)をとる3つの方法+1

この記事は約 2 分で読めます。 Webサイトのスクリーンショット(キャプチャー)をとる時、画面に表示されている部分のみの場合や、Webサイト1ページ分全体などあります。 特にWebサイト1ページ全体 …