[PC・スマホ]サイト上の画像の保存をできる限り阻止する対策法 | hi-posi Front-End blog
クライアントから「サイト内の画像を保存できないようにしてほしい！」というご要望をいただくことがたまにあります。 ウェブサイトに画像を掲載している以上、画像保存を完全に阻止するということは不可能です。 ソース読めば画像のパスなんてわかるし。最後は画面キャプチャしちゃえばいいし。 なので完全に阻止することはできませんが、できる限り画像保存までの手間を増やす対策をご紹介します。 １：jQueryで「contextmenu」イベントを使って右クリックを禁止にする ２：スマホの場合 CSSを使って長押しアクションを禁止する ３：スマホの場合2 jQueryのタッチイベントを使って画面の長押し後に表示されるメニューを表示させないようにする ４：jQueryライブラリ「dwImageProtector Plugin」を使って対象画像の上に透過画像を重ねる １：jQueryで「contextmenu」
![[PC・スマホ]サイト上の画像の保存をできる限り阻止する対策法 | hi-posi Front-End blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3dc975c11ef80489c34cee076c9d6afb23bc3dc/height=288;version=1;width=512/http%3A%2F%2Fhi-posi.co.jp%2Ftech%2Fwp-content%2Fuploads%2F2015%2F04%2FdwImageProtectorPlugin.jpg)
横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
