画像のみをコピペできないようにする方法

こんにちは、こんばんは、初めまして?

☆海貝あかりと申します。

今回はエイプリルフールで挙動を確認した画像のコピペ禁止方法をご紹介したいと思います。

目次・めにゅ~

右クリック禁止はリスキー

HTMLやブログをなさっている方ならご存知かと思いますが、右クリック禁止警告や全右クリック禁止などのコピペ対策がある中、それは「単純に記事を紹介したかったのに」という方や「貼ってあるリンクになんか飛べないんだけど?」などのリスクを伴います。

ããã¥ã¼ã¹ãè¦ã¦ä¸å®ãªæ°æã¡ã«ãªãç·æ§ãã¥ã¼ã¹ãè¦ã¦ä¸å®ãªæ°æã¡ã«ãªãç·æ§ãï¼»ã¢ãã«ï¼ã¢ããªã¢ã¼ãï¼½ã®ããªã¼åçç´ æãæ¡å¤§

https://www.pakutaso.com/20171049297post-13780.html

また、マウスでの右クリックは(マウスではなくとも)何ら特別なことでは、ありません。

そんな中、ふと右クリックの中にある機能を使いたくなった時に使えないブログだと分かったなら、そんな不便なサイトに何度もアクセスしたいと思うでしょうか?

私なら、不便なサイトは次も利用するかと聞かれれば、限りなくなしに近いとだけ答えます。

なので、そこで思いつくのは、「画像だけでも流失しづらくできないかな?」ということ。

今回はそのコードについて主に取り上げていきたいと思います。

文章のコピペ禁止はできないの?

えっと、画像じゃなくて文章の一部コピペ禁止とかはできないの?と思う方もいらっしゃるかもしれませんね。

f:id:UmikaiAkari:20180329231347p:plain

結論から言いますと、一部のみをコピペ禁止はどうにも難しそうです。

そもそも、完全にコピペ禁止はどのサイトやどの記事でも取り上げられていますが、ちょっとネットに詳しい人ならすぐに見破られてしまうので無理でしょう。

あと、はてなブロガーは、完全コピペ禁止は恐らく何をやろうとできないと思います。

詳しくは、HTMLやCSSコードでコピペ禁止コードを紹介してくださっているこちらの記事へどうぞ。

www.usamofu.com

画像をコピペできないようにするってどうゆうこと?

え?右クリック禁止とかでもなく、画像だけをコピペできないようにするってどうゆうこと?と思いますよね。

f:id:UmikaiAkari:20180330002043p:plain

実は、少しだけ

・画面サイズを自分の手で手直ししなくてはいけない

はてなブログの使用のためか、一記事一画像のみにしかコードが使用できない

というデメリットがあるのですが、画像そのもののコピペを防ぐのは画像の上に透明なフィルターをかけるという方法で表示させると「画像をコピーする」という文言だけがきれいに右クリック機能から消えます。

それ以外は使用できるので、成功したときはなかなかの感動モノでした。

それを紹介してくださっているのがこちら。

y-com.info

まぁ、はてなブログの場合、全体を丸っとコピーして自分の記事にペーストしてしまえば、コードから何から何までコピーされて読み取られちゃうんですけどね……^^;

ひとまずコードを張り付けておきます。 

  <style type="text/css">
.no_copy{
background:url('画像のURL');
background-size:contain;
width:600px;
height:400px;
}
</style>
<div class="no_copy"></div>

 これで1ピクセル単位で画像の大きさにセットしていきます。

 

実際に画像コピーさせにくくなるの?

 これは私がエイプリルフールで使ったネタで実証済みです。

リスキーなことこの上なしで自分の加工済み自撮り写真を載せたわけですから。

 

これから上記のコードを使って実際当日の再現を行います。

 

※今度は消す予定のない記事なので、スクショ画像の上からさらにペインティングして顔を半分消していますが悪しからず。

 

 こんな感じです。もし私の整形級メイクで気分を害されないようであれば、是非この画像の上で右クリックを試してみてください。

 

 
自分の顔が消える記事じゃなくて今後も残る予定の記事に残ってるってなんだかドッキドキ!怖いですね><
まぁ、この記事にも書いたのですがいろんな人に「変わるねぇ……」と言われた画像なのでこの画像のみで普段の私を見つけることはできないでしょうが……^^;
 
ちなみにごの画像を張り付けるのに使用したピクセルサイズは(上のコードが横の長さ、下のコードは縦の長さです。)600×290です。
PCサイズに調整をしているので、スマホではうまく表示されていないかも……。
スマホから見た人はごめんなさい。
それでは、今回はここまで!
お付き合いいただきましてありがとうございました!
☆海貝あかり