TOP  >  WebDesign  >  Webページ内の画像を保存させない方法
2007年12月13日

Webページ内の画像を保存させない方法

ブログを始めtumblrなどのサービスがある中で、考え方自体が古いのかもしれませんが、見ては欲しいがコピーしてほしくはない、大事な写真、作品というのはあるものです。今日紹介するのはWEBページ内の画像を保存させない方法です。

Webページ内の画像を保存させない方法

あくまで簡易的なので、本当に保存しようと思えばいくらでも方法はあるのですが、参考までに記していきたいと思います。

詳しくは以下

原理から先にお話しすると、イメージタグでは無く、スタイルシートでその背景に画像を指定するという方法です。実際どうなるかと言うと以下の通り。

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

ドラッグまたは保存してもダウンロードされるのはダミー画像ファイルとなります。

実際のソースコードは以下の通り

<p style=”background: transparent url(https://design-develop.net/wp-content/uploads/2007/12/nocopy.jpg) no-repeat scroll 0%;”><img src=”https://design-develop.net/wp-content/uploads/2007/12/clear.gif’ alt=’clear.gif” alt=”ダミー画像” height=”440″ width=”335″ /></p>

imgタグにダミーの画像ファイルを指定しておきます。ダミー画像は 1px × 1px の透過GIFで用意してください。さらに本来表示させたい画像を背景画像として表示するために段落タグ<p>で囲みます。念のため背景画像はしっかりと位置や属性指定をしてあげた方が上手くみたいです。

背景に画像が存在するのでソースを見られたり、背景画像を保存されればそれまですが、簡易で対策したい方は試してみてください。

via kconf

posted 02:53  |  
Category: WebDesign   
tag: webdesign

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る