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

Google Mapの吹き出しを消してみた

この記事は約 1 分で読めます。 Google Mapをサイトに表示させる方法は、たくさんあると思います。 単純にGoogleMapを開いて、「ウェブサイトへの地図埋め込み用 HTMLコード」をそのま …

no image

スマホ用にWebクリップアイコンを設置してみた

この記事は約 1 分で読めます。 Webクリップアイコンの設置はとても簡単!アイコン素材をちゃんとアップして、1行link要素を書くだけです。 iPhone、iPad、Androidでホーム画面にショ …

no image

Google Maps表示用スクリプト「google_map_api_js」を試してみた♪

この記事は約 1 分で読めます。 以前「jquery.gmap3.js」を使ってGoogle Mapsを表示させてみました。(「jquery.gmap3.jsを使って、Googlemapを簡単にカスタ …

no image

WordPress オリジナルテーマでデザインをカテゴリごとに変更したい時

この記事は約 1 分で読めます。 オリジナルテーマを自分で作成していて、それぞれのカテゴリーごとにテンプレートを変えたり、デザインを変えたりしたい時。 いろいろな方法があると思います。 「bodyにカ …

no image

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

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