※当サイトにはプロモーションが含まれています。
クライアント スクリーンショットで画像をコピーされないようにする方法を教えてくれ！
にゃテック それは難しいにゃ。
残念ながら、スクリーンショット（スクリーンキャプチャ）そのものを完全に防ぐことは難しいです。
そのため、画像を保護する確実な対策としては、下記のように画像自体にウォーターマーク（or コピーライト）を付けるのが一番かと思います。
ただ、画像を作成するたびにウォーターマークやコピーライトを埋め込む作業は、手間に感じる場合もあると思います。
そこで今回は、CSSやJavaScriptを使って、画像の上にテキスト（© hoge.com など）を重ねて表示する方法を解説します。
ウォーターマークは、画像の上に透かしとして表示する目印のことを指します。
一方、コピーライトは、作品の著作権者を示す権利表示（©マークなど）を意味します。
この２つは目的や表示方法に違いはありますが、作品の無断利用を抑止し、制作者・権利者を明示するという点では共通しています。
画像の上にテキストを重ねて表示する方法
ここでは、ワードプレス（WordPress）でブロックエディタ（Gutenberg）を使用している場合の方法を解説します。
そのため、クラシックエディターを使用している場合は適用されないのでご注意ください。
想定される画像HTMLの構造
ワードプレスでブロックエディタを使用している場合、画像ブロックは、一般的に次のようなHTML構造で出力されます。
<figure class="wp-block-image">
<img src="..." alt="...">
</figure>
この<figure>タグに対して、ブロック設定の「追加CSSクラス」に、wmのようなクラス名を付与します。
にゃのらいと wmは、watermarkの略だにゃ。
つまり、下記のようなHTML構造（画像ブロック）にします。
<figure class="wp-block-image wm">
<img src="..." alt="...">
</figure>
ブロックエディタでクラスを付与する方法について
上記の様にブロックタブにある、高度な設定 > 追加CSS にクラスwmを記載します。
この追加付与したクラスwmに対して、CSSを定義します。
ウォーターマークを付与するCSSについて
下記が、ウォーターマークを付与するCSSになります。
これを「追加CSS」に記載します（※追加CSSへの記載方法はページ下方にあります）。
figure.wp-block-image.wm{
position: relative !important;
width: fit-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
isolation: isolate;
font-size: initial !important;
line-height: normal !important;
}
figure.wp-block-image.wm > img{
position: relative !important;
z-index: 0 !important;
display: block;
max-width: 100%;
height: auto;
}
figure.wp-block-image.wm::after{
content: "© hoge.com" !important; /* コピーライト */
position: absolute !important;
right: 8px !important; /* 表示位置 */
bottom: 8px !important; /* 表示位置 */
z-index: 10 !important;
visibility: visible !important;
height: auto !important;
display: inline-block !important;
font-size: 12px !important;
line-height: 1 !important;
padding: 4px 6px !important;
color: #000 !important; /* テキスト色 */
background: rgba(255,255,255,0.75) !important; /* 背景色 */
pointer-events: none !important;
}この内容を記載すると、次のように反映されます。
width: fit-contentとmargin: autoを指定することで、画像の幅に合わせた状態で中央寄せを実現しています。
また、content: “© hoge.com” !important;の部分では、表示するコピーライト（ウォーターマーク）の内容を指定しています。
たとえば、「無断コピー転載・禁止」といった文言を表示したい場合は、次のように記述します。
content: "無断コピー転載・禁止" !important;なお、ウォーターマークの表示位置は、
right: 8px !important;
bottom: 8px !important;の指定によって調整しています。
数値を変更することで、画像の右下からの距離を細かく調整することができます。
なお、HTMLを<figure class=”wp-block-image wm”>の構造にすれば、テキスト（HTML）編集をすることで、クラシックエディターでも同様に反映させることが可能です。
下記は、実際に賢威のクラシックエディターで記述した内容が反映された例です。
この方法により、画像をコピーする目的で行われるスクリーンショットに対して、一定の抑止効果が期待できます。
ただし、この方法だけでは、画像をドラッグ＆ドロップしたり、右クリックから保存できてしまいます。
にゃテック そのため、ドラッグ操作を制限するCSSなどの対策を併用することが望ましいと思います。
これらの対策について詳しく紹介しているのが、次の記事です。
作成した図解や、キャラクター画像などをダウンロードやコピーされたくないと思っている方もいるのではないでしょうか？ 特に、複雑な制度を説明した図解なんかを流用されてしまったら悲しいですよね･･･。 そこで、今回は、比較的簡 …
「自分が書いた記事をパクられてしまった！」といった経験をお持ちの方もいるかもしれません。 Google検索は、コピーコンテンツだとしても、検索エンジンに先にインデックスされた方が、オリジナルのコンテンツだと見なされる傾向 …
補足：ワードプレスの「追加CSS」の編集箇所について
現在のワードプレステーマにCSSを追加したい場合、左メニューにある、
外観 > カスタマイズ
を選択します。
追加したいCSSを記述します（コピペして貼り付けます）。
「公開」ボタンを押して保存すれば完了です。
なお、追加CSSに記載する際に、ブラウザ上で全角から半角に変換すると、エンコーディング（文字コード）の関係で、不具合が発生することがあります。
その為、編集する時は、メモ帳などに貼り付けたものを編集をしてからペーストするようにしましょう。
なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。
その際は、強制リロード（ハードリフレッシュ）をしてみてください。
各ブラウザごとの、強制リロードの方法は次の通りです。
| Windows | Mac | |
|---|---|---|
| Google Chrome | 【Ctrl＋F5】 【Ctrl＋Shif＋R】 |
【Command＋Shift＋R】 |
| Microsoft Edge | 【Ctrl＋F5】 【Ctrl＋Shif＋R】 |
【Command＋Shift＋R】 |
| Mozilla Firefox | 【Ctrl＋F5】 【Ctrl＋Shif＋R】 |
【Command＋Shift＋R】 |
| Safari(Mac) | ‐ | 【Command＋Option＋R】 |
強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。
