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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

jquery.gmap3.jsを使って、Googlemapを簡単にカスタマイズ♪

この記事は約 1 分で読めます。 今回は、GoogleMapを埋め込んで、カスタマイズ出来るjQuery プラグイン「jquery.gmap3.js」。使ってみたら楽に出来たので、メモです。 配布元: …

WordPressのウィジェットに表示した「タグクラウド」をカスタマイズしてみる

この記事は約 2 分で読めます。 WordPressのタグクラウドを表示させる方法として、「ウィジェットに表示させる方法」と、「オリジナルのsidebar.phpにテンプレートタグを記述させる方法」と …

no image

Facebookページ コメント返信機能の設定をしてみた!

この記事は約 1 分で読めます。 Facebookページにコメントに対するコメントの返信、どのようにされてましたか? 私は都度相手の名前を入れて、誰に対する返信なのかを表示していました。 今回「返信機 …

no image

JavaScriptオンオフの設定と確認。

この記事は約 2 分で読めます。 最近「jQuery」が面白くていろいろ試していますが、JacaScriptがオフ環境ではあんまり意味のないモノになっています。 全くWebの知識がない人にとって、Ja …

no image

無料Facebookアプリ「Pronto ContactForm」を試してみた♪

この記事は約 2 分で読めます。 最近、Facebook関連の便利なアプリをたくさん見掛けます。 Facebookページでお問い合せフォームが必要になった時に便利なアプリ「Pronto Contact …