Webの記録

スマホサイトの画像コピーガード対策

投稿日:2015年1月6日 更新日:

この記事は約 2 分で読めます。

android_mini
スマホ向けのサイト制作の機会が増えました。
PC向けの時にいろいろとしていた画像コピーガード対策も、スマホ対応しなくてはならなくなってきました。
画面の長押しすると、画像を保存することができます。
しかし今回は、画面の長押しを制御することで対策をしてみました。


iPhoneで画面の長押しを制御

以下の一文でiPhoneでは、画面の長押しを制御できるようですが

-webkit-touch-callout: none;

何故か・・・私が試したiPadでは、画面の長押しが出来てしまったので・・・cssを以下のようにしてみました。
すると、iPhone・iPadでの画面長押しができなくなり、画像のコピーができなくなりました。

html {
user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-webkit-touch-callout: none;
}



しかしAndroidで試してみたところ・・・、画面の長押しの制御ができませんでした。
-webkit-touch-calloutの対応は、iOSだけのようですね。

Androidでも画面の長押しを制御

結局、画像を背景にしてみました。
・・・で、上に透明画像を被せてみて、終了!
昔書いた記事「透明画像を置いて画像をコピーガードする。」で、やった方法で・・・。


するとAndroidでもiPhoneでも、画面の長押しの制御ができました。


ここまで頑張ったけれど、キャプチャーをとられたら無意味だったりしますが、ひとまず長押し制御対策でした。。。

-Webの記録
-, , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

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

関連記事

no image

WordPressテンプレートタグをメモ【コンテンツ編】

この記事は約 1 分で読めます。WordPressにはたくさんのテンプレートタグがあります。 似たようなものや、同じ結果なのに記述の仕方が何通りもあったりするので、後で「何だっけ?」って思う事もしばし …

no image

WordPressプラグイン「Simple Map」でスマホ対応GoogleMapを簡単設置。

この記事は約 1 分で読めます。 GoogleMapは、いろいろとお世話になっています。ただスマホで時々面倒だと思うのが、スクロールしていてGoogleMapに何気に指が触れてしまった時。 画面の横幅 …

no image

jQuery「Supersized」でフルスクリーンのスライドショーを簡単設置

この記事は約 1 分で読めます。 大きな画像をフルスクリーンでスライドするjQueryライブラリ「Supersized」を試してみました。 画面のサイズが変わっても、画像の縦横比を維持したままキレイに …

no image

WordPress ローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法

この記事は約 2 分で読めます。 WordPressでサイト制作をする時。 XAMPPやMANPなどローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法をメモします。 ※Wordpressは既 …

no image

LIghtBox風画像ギャラリーを「ColorBox」で作ってみた♪

この記事は約 1 分で読めます。LightBoxのように、画像を拡大表示出来るjQueryプラグインを探してみました。 たくさんLightBox風のライブラリはありましたが、今回は「ColorBox」 …