サイトに掲載した画像をダウンロードできなくする方法

2018/12/14 ITよろず

サイトに掲載している画像をダウンロードするときは、マウス右クリックや長タップでメニューを表示してダウンロードします。このメニュー表示をしないように指定します。また、画像をドラッグすることでも画像ファイルを取得できます。なのでドラッグも無効にすれば完全に画像ファイルをダウンロードできなくなります。

画像ファイルをダウンロードできなくする指定

右クリックメニューの非表示

ダウンロードできなくする画像の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(); ?>の後に記述します。

シェアする