画像のダウンロードを制限したいとお悩みの方へ
あるお客様から、「ホームページの画像にマウスを置くと、画像の右上にダウンロードボタンのようなマークが表示されてしまう」というご相談をいただきました。画像のダウンロードを避けたい場合、気になるアイコンですね。いただいたスクリーンショットを確認したところ、これはMicrosoft Edge特有の「ビジュアル検索」アイコンであることがわかりました。このカメラマークが表示されると気軽に画像ダウンロードできるため、ご協力を得て顔写真を提供いただいている場合などは特に、運営者にとっては気になる機能です。
この記事では、このEdgeの「ビジュアル検索」アイコンを非表示にする方法について技術者向けにご案内します。
ご依頼いただく方はこちらから↓
画像がダウンロードされるのを防ぎたい場合
Edgeの「ビジュアル検索」機能に限らず、サイトに掲載した画像がダウンロードされるのを防ぎたい場合、通常、以下の対策が考えられます。
・右クリックを禁止する
・見えないレイヤーを重ねる
ただし、これらの方法では、Edge特有の「ビジュアル検索」アイコンが表示されることへの解決にはなりません。ここでは、Edgeの「ビジュアル検索」アイコンを表示させないための対策に絞って解説します。
Edgeのビジュアル検索アイコンを非表示にする方法
方法1：画像を背景画像として設定する
背景画像として画像を設定することで、Edgeの「ビジュアル検索」アイコンは表示されなくなります。CSSで背景画像を設定する方法は次のとおりです。
css
.element {
background-image: url('your-image.jpg');
background-size: cover;
background-position: center;
width: 100%;
height: auto;
}
これは特定のHTML要素に背景画像を指定するだけのシンプルな方法で、Edgeのアイコンが出現しません。画像として利用する必要がないデザイン上の装飾であれば、この方法がベストでしょう。
方法2：CSSで「pointer-events」を使う
もう一つの簡単な方法として、画像にCSSのpointer-events: none;を適用する方法があります。このスタイルを画像に適用すると、Edgeの「ビジュアル検索」アイコンが表示されなくなります。実際のコードは次のようになります。
css
img {
pointer-events: none;
}
これにより、マウスオーバーのイベントが発生しなくなり、ビジュアル検索アイコンも表示されなくなります。この書き方は、全ての画像タグに影響を与えるため、特定の画像のみに設定したい場合にはCSSセレクタを工夫しましょう。特に、ドロップメニューやクリック可能なボタンには影響が出ないよう注意が必要です。
注意点
・ホバーイベントがある場合には注意
ホバーイベントが必要な場合、このスタイルは避けた方がよいでしょう。ホバーイベントがある要素（通常はaタグ）にpointer-events: none;を使うと、クリックやマウスの反応がなくなります。ですから、必要に応じて調整してください。
以上が、Edgeのビジュアル検索アイコンを消すための簡単なCSSの設定方法です。役に立ったと思ったら、ぜひ文末のハートマークを押していただけると励みになります！
