画像の保護関連

ブログへの想い入れ
ブログへの想い入れその2
の続きです。
前の記事をお読みいただければ、話がつながります。

ホームページや、ブログに掲載した画像を完璧に保護するのは不可能です。
画面に表示されている以上、見ている方のパソコンのどこかに画像が保管されます。
その場所はちょっと調べれば、誰にでもわかります。
キャプチャを一生懸命防止しても、意味がないのです。
極端な話、画面をデジカメで撮影してしまえば防ぐすべはありません。

私が考えた結論は、
「画像の2次掲載はやめてください」と
明確に書くことです。
そして、画像に著作権表示をはめ込むことです。
これしかないのです。
いろいろ考えた末に行きついたのはここでした。
たとえば、こんな感じ。


画像の転載、2次利用はご遠慮ください。

(まぁこんな写真、使う人いないと思いますが・・・)
でも、やはり対策は取りたいと思う人用に
簡易的な手法を紹介します。

おなじみのこの画像で、実験してみましょう。
(あずさん(稼げない初心者アフィリエイト救済 ASAP塾)ありがとうございます。)
mataiイメージ画
まずは、右クリック防止
mataiイメージ画
ソース
<img src="/img/matai-san.gif" alt="mataiイメージ画" oncontextmenu="return false"/>

みそは「oncontextmenu=”return false”」です。
これは、いわゆる右クリックで出てくるメニューを非表示にします。
そうすることによって、「画像のコピー」を防止します。
よく、bodyタグにつけて、サイト全体を右クリック防止したり、javascriptを使って、
右クリックしたら、ポップアップがでて、「右クリック禁止です。」と表示したりするサイトを見かけます。
mataiイメージ画
ソース

<img src="/img/matai-san.gif" alt="mataiイメージ画" oncontextmenu="alert('右クリック禁止!');return false;" />

こんなのです。設定によっては、ポップアップブロックに引っかかるかもしれません。

個人的にこの手法は好きではないです。
特に、こういうポップアップは、見に来ている人の気分を損ねます。
そもそも、右クリック=画像の不正使用という考えが好きではないです。
ちなみにこれは、簡単に破れます。ブラウザによっては、効果ないものもあります。

次には、CSSを使ったものです。

mataiイメージ画

ソース
まず、スタイルシートに以下を記述します。

span.cover{
  position:absolute;
  display:block;
  width:100%;
  height:100%;
  background-image:url(/img/a.gif);
}

ソース

<p style="position:relative; width:100px; height:100px;"><span class="cover"></span><img src="/img/matai-san.gif" alt="mataiイメージ画" width="100" hight="100" /></p>

スタイルシートの追記ができない場合は

<style type="text/css">
span.cover{position:absolute;display:block; width:100%; height:100%; background-image:url(/img/a.gif);}
</style>

記事の途中に上のソースを入れれば、大丈夫?かもしれません。

試しに右クリックしてみてください。
「画像を保存する」
というようなメニューは出ないと思います。(人によっては出るかも?)

この方法は、「span class=”cover”」で画像をカバーしているようなイメージです。
ただし、ソースを見ると画像のURLが分かってしまいます。

次の方法が、個人的に好きです。

mataiイメージ画
ソース
まず、スタイルシートに以下を記述します。

img#matai{
  background:url(/img/matai-san100.gif) no-repeat;
  width:100px;
  height:100px;
}

ソース

<img id="matai" src="/img/a.gif" alt="mataiイメージ画" width="100" hight="100" />

スタイルシートの追記ができない場合は

<style type="text/css">
img#matai{background:url(/img/matai-san100.gif) no-repeat; width:100px; height:100px;}
</style>

記事の途中に上のソースを入れれば、大丈夫?かもしれません。

右クリック等で画像を保存してみましょう。
あれ?不思議?何もないはずです。

カラクリは、
実際はa.gifというとても小さな透明画像を表示しています。
その画像にスタイルシートを使って、背景画像に「mataiイメージ画」を指定しています。
見えている画像は背景画で、右クリックで保存しようとしているのは
指定した小さな透明画像「a.gif」です。
外部スタイルシート(css)ファイルで指定すれば、ちょっとソースを見ただけでは
画像のパスもわからないです。

まだまだ調べれば、いろいろな方法があると思います。

ちょっと前に、フラッシュを使って、クリップボードに空白を、定期的に書き込む手法がありました。
どんな方法で、キャプチャおこなっても空白になってしまうのです。
これはなかなか強力だなと思ったのですが、最近セキュリティの問題なのか、ブラウザで受け付けなくなってきています。
(すべての環境で立証済みではないです。)

ここまで書きましたが、以上の方法は、
ソースを理解できる人には、効果がありません。

また、最初にも書きましたが、パソコンの画面に表示した時点で
どこかに画像が保存されます。

なので、この対策をとっても万能ではありません。

やはり、最終的には画像に対する製作者の意向を訴えていくしかないのだと思います。

このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録
ボタンの色が白ならば、クリックし+1 を付けてください。
カテゴリー: HTML, JavaScript   パーマリンク

画像の保護関連 への6件のコメント

  1. ご☆ん より:

    初めてコメントします。

    右クリック禁止設定はどうやったらできるんだろうっていうのは以前から

    思っていました。

    今は 楽天ブログで写真を載せることはないですが 以前は楽天ブログで

    たくさんの写真を載せていたので 心配な面もありました。

     

    色々と勉強になります。

    • matai より:

      ご☆んさん

      いつもご訪問ありがとうございます。
      コメントもありがとうございます。

      記事がお役にたてれば、大変光栄です。

      ただ、記事にも書きましたが、どれも完璧ではありません。
      特に個人情報に当たる可能性のあるものは、
      場合によっては画像処理も必要かもしれません。

      ブログによって、いろいろな制限もあると思いますが、ぜひ試してみてください。

  2. はやちゃん より:

    いつもありがとうございます^^

    以前に自分も写真を流用され、面白くない思いをしたことが有ります

    これを参考にして挑戦してみようと思います^^

    • matai より:

      はやちゃんさん

      いつもご訪問ありがとうございます。
      コメントありがとうございます。

      記事がお役にたてましたら、光栄です。
      うまくいかない点がありましたら、教えてください。

      記事に追記していこうと思います。

  3. はじめまして。

    いつも楽しく読ませていただいております。

     

    最近は、WORDPRESSとかでも、写真が綺麗だと感じて右クリックでプロパティなどを見ようとした時などに反応しないWEBなんかも増えたように感じます。

    特に保存という意味ではなくて、画像のサイズを調べたいとか、そんなシュチュエーションの時です。

    また、コメント投稿での、nofollow属性を取り外すというのも増えているみたいですね。

    個人的には、テキスト挿入し、文字を書いておくとか、mataiさまのように、「2次使用はやめてね」と書いておくとか、そんな感じになるのかと思います。

    • matai より:

      アイリスバンクさん

      お返事が遅くなりまして申し訳ございません。

      コメントありがとうございます。
      右クリックがすべて画像の保存と考えられてしまうのはさみしいですよね。
      nofollow属性は、どのくらいの効果があるかはあるのかわかりませんが、
      このサイトでは、プラグインを使ってとり外しています。
      少しでも、コメントしてくださった方のサイトが潤えばいいという気持ちです。

コメントをどうぞ

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" target="" rel="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <br> <cite> <code> <del datetime=""> <em> <i> <li> <ol> <p class="" align="" dir="" lang="" style=""> <span class="" dir="" align="" lang="" style="" title=""> <q cite=""> <strike> <strong> <sub> <sup> <u> <ul> <hr align="" class="" noshade="" size="" width=""> <img alt="" align="" border="" class="" height="" hspace="" longdesc="" vspace="" src="" style="" width="" localsrc="">

コメント大歓迎。ぜひよろしくお願いします。
Wordpressプラグイン「nofollow free」を利用して、ウェブサイトで入力されたURL、コメント内リンクのすべてに対してnofollow属性を取り外しています。
関連記事⇒コメントのリンクタグの「rel=nofollow」について
プラグインの取得は⇒nofollow free
このカスタマイズ文章の作り方の記事⇒nofollow freeカスタマイズ
↓スパムコメント対策
Comments on this blog, 'Akismet' is protected by.