写真の転載対策！透明画像を重ねて元画像をガードする

これは初心者が試行錯誤した記録であって、How toものではないので悪しからず。

写真の転載対策

この前も某まとめサイトで画像が勝手に使われていて「おいおい」となりまして、転載されないような対策をどうするか？と考えてみた。

結論から言えば写真を転載されない完璧な方法は写真をアップしないことなんだけど・・・それもまた味気ないブログになってしまうので、ささやかな抵抗を試みることに。

はっきり言って抵抗する意味ってあまりなくて、抵抗に要する労力に比例した効果を得られるわけでもないんだけど、無抵抗よりは「抵抗してるぜ！」感を出したい自己満足。

今回、写真の上に透明画像を重ねる方法に挑戦！

対策前

画像を右クリックすると保存が出来る。

対策後

ブラウザによっては画像を右クリックしても「名前を付けて画像を保存」が出てこない。もしくは保存できたとしても透明画像が保存される。

やり方

まずは、透明画像を用意。

ペイントとエクセルを使ってGIFかPNG形式の透明画像を作成。

面倒ならファイル名 cover.png(96bytes) の透明画像をここからダウンロードしてもOK

Download

用意した透明画像をサーバー内の写真用フォルダとか好きなところにアップロードします。

続いて、こんなコードをCSSとHTMLに書き込む。

CSS

.img-protect{
position:relative;
width: 500px;
height: 300px;
}
.protect-pic{
position:absolute;
display:block;
width:100%;
height:100%;
background: url(images/cover.png);
}

HTML

これで、バナナ画像（banana.jpg）の上に透明画像（cover.png）を重ねることができた。

問題点

ただ・・・このCSSのコードだと画像が左に寄ってしまう。

オレは写真を中央に寄せて表示させたい派なのだ！！

さらに・・・カメラによって写真の縦横比（アスペクト比）が異なるため、横500pxで統一したとしても他の写真の縦が300pxになるとは限らない。

さらにさらに・・・画像の幅を固定してしまうことでレスポンシブ非対応になってしまい、パソコンで表示する分には問題ないものの、スマホで表示した時に画像が横にはみでちゃう。

最終形態

ということで、最終的に以下のコードにした。

CSS

.img-protect{
position:relative;
margin: 10px auto;
}
.protect-pic{
position:absolute;
display:block;
width:100%;
height:100%;
background: url(images/cover.png);
}

HTML

最初のコードと変わった点だけ赤字で表記。

最初のコードで指定していたwidth（幅）とheight（高さ）の値を削除し、縦でも横でもどんなサイズの写真にも対応可能に。

親要素の位置をmarginで調整し、上下は10pxで少し余白を入れて、左右はautoで真ん中に寄るようにした。ブログのレイアウトによって上下の余白は数値を変えちゃう。