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.

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

関連記事

no image

日本語文章校正ツールを使ってみた。

この記事は約 1 分で読めます。 今回は、Yahoo!Japan校正支援Webサービスを利用した校正支援ツールを試してみました。 誰かに伝える文章を書く時に使えそうな、Webツール「日本語文章校正ツー …

モバイル フレンドリー テストで合格しているのに、「スマホ対応」ラベルが付かない時

この記事は約 1 分で読めます。 スマホで検索していると「スマホ対応」と表示されるようになって、しばらく経ちました。 検索している時の順位も、「スマホ対応」と表示されてないページより、表示されているペ …

no image

「ページ内リンクはするするスクロール」にチャレンジ!!

今日は・・・、「ページ内リンク」でちょっとイイカンジにスクロールするjQueryにチャレンジです。
ページ内リンクをそのまましても(javaScriptなし)出来ますが、そのままだといきなり戻り先に到着してしまってびっくりするので、「yuga.js」でするするという動きをつけてみました。

no image

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

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

no image

右クリックで独自メニューを出して画像のコピーガード

この記事は約 1 分で読めます。 画像のコピーガードを3通り試しています。 今回は「右クリックで独自メニューを出す」方法を試してみました。 「右クリック禁止で画像のコピーガード」、 「透明画像を置いて …