簡単に画像を「右クリック&ドラッグ&直接リンク」させない方法・対策

WordPress(ワードプレス)で作成している管理サイトで、/wp-content/uploads/ 以下の階層に保存されているフォルダの写真が、直接表示されていることがわかりました。

写真・画像に関しては、知識がある人であれば簡単に保存できるので、ある程度は致し方ないかな。とは思っていたのですが、アート写真等のフォトギャラリーとしてアップしている画像に関しては、やっぱり極力不正利用はされないようにしたいですよね。

ってことで、ほんの少し対策しておけば一般のユーザーの方からの不正利用やダウンロード等はかなり防げるかと思いますので、今回は『簡単に画像を「右クリック&ドラッグ&直接リンク」させない方法・対策』です。

簡単に画像を「右クリック&ドラッグ&直接リンク」させない方法

プラグインを入れたら簡単やん!という方もおられるかと思いますが、プラグインを複数入れることで管理が大変にもなりますし、競合することも多々あり、トラブルの原因となることもありますよね。ですのでプラグインを使わなくてすむのであれば、極力使わない方がいいと思っています。

ということで、ここでもプラグインを使わず進めていきます。

1 右クリック保存対策

まずはJavaScriptを使って右クリックできないようにする方法です。

<script type="text/javascript">
document.addEventListener('contextmenu', function (e) {
  if (e.target.tagName === 'IMG') {
    e.preventDefault();
  }
});
</script>

これをWordPressで読み込んでいるjsファイルなり、footer.phpファイルの閉じる直前に記述するなりすれば、右クリックで画像を保存はできなくなります。

ちなみにこの記述は、ページ読み込み後に実行されるようにするなど、なるべく最後の方に記述することをオススメします。

2 ドラッグ保存対策

上記の設定で画像は右クリックできないようになったので、問題解決かな?と思っていたのですが、
実は簡単にドラッグしてパソコン内にドラッグできちゃったんですよね。

といわけで、以下のcssを追記します。

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

これで画像をドラッグして保存できなくもなります。

ちなみに元からドラッグできないものもあったのですが、それはcssの設定やJavaScriptの処理によるもののようですね。

あと注意として、以下の記述を入れて、クリックできないようにしたのですが、これだとaタグのリンクで画像を使えないので、正直使えないかな?ということで却下しました。

img {
  pointer-events: none;
}

ただ個別に設定等すれば、使いようによっては使えるかもですね。

3 直接リンク対策

上記設定をしても、一応リンクを直接打てば、画像は普通に表示されます。

ですので、念の為画像の不正利用等の対策のために、/wp-config/uploads/ 以下にある画像ファイルは、他の外部サイトからの直接リンクできないようにします。

まずは、 /wp-content/uploads/ディレクトリに.htaccessファイルを作成し、以下の記述をコピペします。

<FilesMatch "\.(jpg|jpeg|png|gif|avif|webp)$">
  SetEnvIf Referer "^http(s)?://(www\.)?3stars\.life" local_referrer
  Order Allow,Deny
  Allow from env=local_referrer
  # セキュリティ強化のためのヘッダーを追加
  Header set X-Content-Type-Options "nosniff"
</FilesMatch>

これでOKです!と言っていたのですが、SNSでサムネが表示されていないことが確認されましたので、以下追記します。

追記:2024/8/4
SNSでシェアされるはずのサムネイルが表示されなくなったので、それを避けるため、この対策(記述)は最終的にオフにしました。

冷静にに考えたら、外部サイトからの直接リンクをできないようにしたので、そらそうなりますよね。

というわけで、これはSNSとかでシェアされない、できなくても問題ない時に記述してくださいね。

併用して対策を

WordPressで制作したサイトで、画像を表示しつつ、右クリック等での保存を防ぐ方法は他にもいくつかありますが、完全に思い通りに画像のダウンロードを防ぐことは現状ではできません。どんなに対策をしても、この記事を見てるようなWebデザイナーやプログラマーの方等、知識をもった方であれば簡単に画像なんて保存できてしまいますよね。知識がない方であっても、スクリーンショットすることもできますしね。

また、3 直接リンク対策に追記したように、SNSでサムネイルが表示されないなどの弊害もでてきます。

ですので、このような対策をよく考えて併用しておくことで、画像をダウンロード保存するのに一手間も二手間もかかり、簡単に画像を保存できない、という状況を作ることができ、一定の効果は見込めますので、ぜひ不正利用の防止に役立ててください!

Google AdS



関連記事

WordPressでリダイレクト:『.htaccess』の書き方まとめ


『.htaccess』は変更する頻度が少ないので、変更する時に勉強して把握しても、一度変更してしまえばそれでおしまい!と…

記事を読む▷


これは便利!!WordPressの投稿内に、管理者やログインユーザーにしか見れないメモを残す方法


よく投稿を途中まで作って、なかなか仕上げれずに長い期間あいてしまうと『これなんのサイト参考にしてたんやっけ?』とか『え〜…

記事を読む▷


Facebookでシェアした記事のサムネイル画像がおかしい時、表示されない時の解決方法


せっかく面白そうなネタを見つけたので、早速Wordpressに記事を投稿!でもいざFBでシェアしようとしたら、サムネイル…

記事を読む▷


:before :afterなどの擬似要素で contentプロパティの日本語が文字化けする!原因と対処(回避)方法

【文字コード変換ツール】:before :afterの擬似要素などでの日本語の文字化け対策:原因・対処(回避)方法


以前から:before :afterなどの擬似要素で、contentプロパティに日本語を入れて使用していたのですが、『文…

記事を読む▷


onMouseOver、onMouseOutで、簡単に画像を切り替える


今までマウスオーバー等で画像を切り替える時は、jQueryを使ったり、cssで画像を重ねてopacityで画像を透過させ…

記事を読む▷


Message

メールアドレスが公開されることはありません。

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

PAGE TOP