どうも、そらです！
今回は、サイト内の画像がコピー・保存されるのを防ぐやり方を紹介していきたいと思います。
一度サイト上に投稿した画像を、完璧に保護することは困難です。
こちらの記事で紹介する方法も、完全に画像を保護することができるものではありませんので、その点は予めご了承ください。
すべてのコピー・保存を防ぐことはできませんが、この方法を用いることで簡単に右クリックで保存されることは防げますし、「あまり画像をダウンロードしてほしくない」という意思を読み手に伝えることができます。
htmlコードの利用例も挙げているので、少しでも画像を保護したいという方はぜひ試してみてください！
（記載しているコードは、2024/11/15時点で動作確認したものとなります）
この記事で分かること
・画像を保護する（右クリックで画像のコピー・保存されるのを防ぐ）方法
WordPress で画像のコピー・保存を防ぐやり方
WordPress で制作したサイト上で、画像を保護する方法は以下のようなものが挙げられます↓
① CSS により右クリックや保存機能の制限する
② html 編集によって、元の画像の上から透明な画像を張り付ける
③ プラグインを使用する
WordPress のプラグインは様々な機能を追加できて便利ですが、沢山のプラグインを追加するとサイトが重くなったり、機能に不具合が生じたりすることもあります。
そのため本記事では、①、②の方法を紹介していきたいと思います。
CSS を用いた画像の保護方法
まずはCSS を用いて画像を保護する方法を紹介します！
使用するコードはこちら↓
img {
pointer-events: none;
}
こちらのコードを追加CSS の欄に書き込めば、書き込んだ場所の画像を右クリックで保存・コピーとドラッグができなくなります。
サイトの画像すべてに適用したい場合は、WordPress の管理画面のサイドバーから、ガイダンス→カスタマイズ→追加CSS を選択して書き込めばOKです。
記事ごとに使い分けたい場合は、新規投稿→（ページの下の欄までスクロール）→カスタムCSS の欄に書き込めばその記事内に反映できます。
CSS を反映して画像を張り付けるとこんな感じになります↑
右クリックしてみると、画像の保存、コピーの項目が消えていると思います。
html コードを用いた画像の保護
次に、html コードを用いた画像の保護の仕方を紹介します。
使用するコードはこちら↓
html のコード
<figure class=”img-guard”>
<img src=”①貼り付けたい画像のURL” style=”position: absolute;”>
<img src=”②透明な画像のURL” style=”position: absolute;”>
</figure>
①貼り付けたい画像のURL
利用したい写真をWordPressにアップロードし、写真のURLをコピーしてここへ張り付けましょう。
写真のサイズは、後述のCSS コードにて”width”、”height”の数字を変えると自由に変更可能です。
②透明な画像のURL
透明な画像をWordPress 上にアップロードし、そのURLを張り付けましょう。
CSS のコード
.img-guard{
position:relative;
width: 250px;
height: 170px;
}
上述のhtml コードのCSS です。
“width”、”height”の数字を変えると写真のサイズが自由に変更できます。
これらのコードを記入すると、画像の保存をしようとしても透明な画像がダウンロードされることになります。
終わりに
今回は、WordPress で制作したサイトの画像を保護するためのやり方を紹介しました。
冒頭でも述べたように、これらの方法を用いても完全にコピー・保存を防止することはできません。
しかしこのような対策をすることで、画像をダウンロードされる回数を減らしていくことはできると思います。
少しでも画像を保護したいと思う方は、試してみてくださいね！
今後もWordPress の使い方などを利用例と合わせて公開していきないなと思っています。
それではまた、次の記事で！
