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

ファビコンその後・・・。

この記事は約 2 分で読めます。3月2日投稿した「ファビコン」の話、その後・・についてです。 実は、IEでのファビコン表示が出来ずに苦戦していたんです。 そこで・・・いろいろ試した結果。 本日、やっと …

no image

WordPressのバージョンを消す方法。

この記事は約 2 分で読めます。 WordPressのバージョンによってはセキュリティー的に脆弱性があるようで、いろいろネット検索をしていると表示を消した方が良いと出て来たので消してみたいと思います。 …

no image

Yahoo!アクセス解析を使ってみた感想【レポート】

この記事は約 1 分で読めます。 以前、「Yahoo!アクセス解析を設定してみました!」でYahoo!アクセス解析を設定し、Google Analyticsと一緒にこのブログのアクセス解析を開始しまし …

no image

WordPress ローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法

この記事は約 2 分で読めます。 WordPressでサイト制作をする時。 XAMPPやMANPなどローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法をメモします。 ※Wordpressは既 …

no image

WordPress カスタムフィールドを使ってみる

この記事は約 1 分で読めます。 WordPressの便利な機能のひとつ「カスタムフィールド」に今回チャレンジします♪ 「カスタムフィールド」は、記事本文とは別に項目を独自で作って表示するものです。