モードの変更

img要素にpointer-events:none;を指定する

CSS

CSS TRICK に pointer-events の CSS プロパティを使って、ナビゲーションにあるカレントページのリンクをクリック不能にするデモがあった。

http://css-tricks.com/pointer-events-current-nav/

これを見て、このプロパティを img 要素に使ったらどうなるのと思って試してみた。

<img src="https://placekitten.com/g/250/250" alt="img tag with pointer-event:none;" style="pointer-events: none;">

どうやら PC 版ブラウザでは画像上での右クリックや画像の D&D が不可能になるようだ。コンテクストメニューから保存したりブラウザから別タブに D&D がその画面上からはできない、ということになる。

もちろんソースを表示して画像の URL を直接参照したり、ブックマークレットなどを使えば画像を保存することはできる。そして当然ながら、CSS3 の pointer-events プロパティに対応していないブラウザでは無意味。

さらにスマートフォン版のブラウザではほとんど制限をかけられないようで、たとえば iOS だと長タップで開くコンテクストメニューからの画像保存はできないものの、範囲選択で画像を含めてコピーすれば「メール」アプリなどのドキュメントに画像ごと貼り付けることができた。リッチテキストを扱えるアプリなら多くが可能かもしれない。また、Android 2.3.3 の既存ブラウザではコンテクストメニューの内容に制限がかからなかった。このプロパティ自体が無効のようだ。

画像に直接指定せず、div でワンクッション置いたりするとまた違った挙動なのかもしれないが試していない。

版権のある写真やイラストを扱う場合、このルールを適用することで権利者の利益を少し守ることができそう。ルールを style 属性で指定しても外部 CSS で指定しても効果は同じなので、PC 向けコンテンツで局所的に右クリックを禁止させたい場合にはお手軽な手法かもしれない。