サイトに掲載している画像をダウンロードするときは、マウス右クリックや長タップでメニューを表示してダウンロードします。このメニュー表示をしないように指定します。また、画像をドラッグすることでも画像ファイルを取得できます。なのでドラッグも無効にすれば完全に画像ファイルをダウンロードできなくなります。
画像ファイルをダウンロードできなくする指定
右クリックメニューの非表示
ダウンロードできなくする画像のHTMLタグに、以下の記述をすればメニュー表示ができなくなります。
<img src=”image.jpg” oncontextmenu=”return false;” />
ドラッグの無効
同じく対象の画像のHTMLタグに、以下の記述をすればメニュー表示ができなくなります。
<img src=”image.jpg” onmousedown=”return false;” />
これらの両方を指定すると完全に画像ファイルをダウンロードできなくなります。
<img src=”image.jpg” oncontextmenu=”return false;” onmousedown=”return false;” />
テキストを選択できなくする
テキストの選択だけをできなくするには以下を記述します。
<body onselectstart=”return false;”>
特定の文字列だけを指定するには「p」や「span」タグに指定します。
<p onselectstart=”return false;”>テキスト</p>
サイト全体に適用したい場合
特定の画像ファイルだけではなく、サイト全体にこの動作を適用したい場合は「body」タグに上記を記述すればサイト内の全ての内容に適用されます。「onmousedown=”return false;”」は、テキストの選択もできなくなります。
<body oncontextmenu=”return false;” onmousedown=”return false;”>
また、特定の場所に指定したい場合は「div」タグに使用すればできます。
JQueryでサイト全体の画像だけを対象にする
上記のようにHTMLタグに属性を追加することで対応できるのですが、imgタグに直接書く方法だとその画像だけが対象となり、bodyタグに書くと画像以外の全ても対象となります。サイト全体の画像だけを対象にしたい場合は、jQueryを使って表示するページの全てのimgタグに属性を追加するようにすれば、imgタグ１つづつに属性を記述しなくても１つの変更で対応できます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$('img').attr('onmousedown', 'return false');
$('img').attr('onselectstart', 'return false');
$('img').attr('oncontextmenu', 'return false');
});
</script>
このコードを<head>…</head>の間に記述すれば対応できます。
WordPressを使用しているサイトは以下のように記述します。
<script>
jQuery(function(){
jQuery('img').attr('onmousedown', 'return false');
jQuery('img').attr('onselectstart', 'return false');
jQuery('img').attr('oncontextmenu', 'return false');
});
</script>
WordPressは標準でjQueryが読み込まれるので、上記のスクリプトを記述するときは<?php wp_head(); ?>の後に記述します。
