とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

webサイトの画像を簡単には保存できないようにするCSS「pointer-events」が便利

webサイトの画像を簡単には保存できないようにするCSS「pointer-events」が便利

クライアントワークの

webサイトの受託案件で

たまにくる要望。

 

「画像保存できないようにしてほしい」

 

web製作あるあるだと思います。

 

結論から言うとwebサイトの画像を

保存できなくする方法はありません。

webにあがっている以上、それは

どうしようもないことです。

サイト側でどんな処理をしようが

正直スクリーンショットとられて

終わりですからね。

 

クライアントもそんなことは

わかっていて言ってきます。

クライアントが言うのは

簡単には保存できないようにしたい」

ということが多いです。

 

いろんなユーザがいるので

リテラシーの高いユーザからすると

スクショとっておしまいですが、

webサイト側で画像保存できないように

処理しておくことで、ちょっとした抑止

にはなる、という考えですね。

 

右クリック禁止にしたり、

スマホだと長押し禁止にすることで、

そこであきらめるユーザが少しは

いるかもしれません。

スクリーンショットを

知らないユーザもいるかもしれません。

 

クライアントのポリシーとしては

あくまで提供側としては

「画像保存をよしとしていませんよ」

というスタンスをアピールをしたいわけです。

ただのポーズだったりします。

 

なんでそんなことするの?というと

それはクライアントのスポンサーへの

配慮だったり大人の事情があったりします。

 

単にそのクライアントの一番上の

決裁者が古い人間で画像保存に対しての

リテラシーがないだけで、そうしろと

言ってきてるのかもしれません。

 

web屋としてはこのご時世に

そんな処理しても無駄ですよという話は

しますが、それでもやってくれという

クライアントはいますし「簡単に」保存

できないようにする処理はむずかしくないので

かたくなに拒否するような要件でもありません。

 

webサイトの画像保存を

禁止する方法としては

以下の方法があります。

  1. JavaScript での右クリック時にアラート表示
  2. 画像の上に透明な画像を重ねる手法
  3. CSSでのマウス操作の制限
  4. 画像URLでのアクセスを禁止する

いちばん簡単に実装できてかつ、

スマートなのは3番目のCSSでの処理です。

 

画像(img要素)にたいして

pointer-events:none;

をかけるだけ。

 

これでマウス操作が制限されて

画像の上で右クリックも

ドラッグ・ドロップもできなくなります。

もちろんスマホでの長押しもできません。

 

注意点としては、pointer-events:none; を

かけた場合、その画像を囲む aタグの

リンクのクリック領域がおかしくなることです。

対処法としては、リンク(a要素)に対して

display:inline-block; をかければ良いです。

 

なので、まとめ。

 

img {
  pointer-events:none;
}
a {
  display:inline-block;
}
 

ですね。

 

より詳しく解説しているサイト貼っておきます。

neos21.hatenablog.com

techmemo.biz

qiita.com

 

pointer-events:none; はけっこう便利な

プロパティで、使い方を工夫すれば

リンクにする箇所・しない箇所を

制御できるので、使い勝手がいいプロパティです。

おぼえておくといいと思います。

coliss.com