くま太君ターゲットは画像だけ！
前回は画像を守る為に、ホットリンク（直リンク）を禁止する方法をご案内しました。
ホットリンク（直リンク）の禁止は、外部サイトから、自分のサイト画像URLに直接リンクを張り使用されるという事象を防ぐことが出来ます。
ですがこれだけだと、右クリックでコピーや保存、ドラッグでパソコンに直に保存が出来てしまいますね。
画像を簡単に入手する手立てが残っています。
特にオリジナルのイラストや写真を載せている方は、転用等の不正利用や転売されてしまう危険性が考えられます。
くま太君じゃあ、どうすれば良いの？
今回は、大事なご自身の画像を不正利用されないために、画像ドラッグ＆右クリック禁止の方法をご案内します。
設定方法もCSSでとっても簡単！
CSSの記載場所から、記載の方法まで、初心者の方にもわかるように、詳細に解説していきます。
ホットリンクの設定と一緒に利用すれば、画像関係のトラブルは大きく回避できます。
もし無断で、簡単に画像利用されたくないとお考えでしたら、とても簡単にできるので、是非試してみてください。
●この記事を読むと分かること
・画像ドラッグ＆右クリックコピー禁止のCSS簡単設定方法
どうして画像ドラッグ禁止にするの？
画像ドラッグ禁止にする理由は、
この一言につきます。
特にオリジナルで写真やイラストを掲載していた場合、勝手に画像を抜き取られて、他のサイトで使用されていたり、悪質な場合は、販売されていたりが考えられます。
もちろん、サイトの管理人さんの中には「自由に使って！」という方もいるでしょう。
そのような場合は、画像ドラッグ禁止などの対策は不要ですよね。
ですが、知らない所で不正に利用されてしまい、要らぬトラブルに見舞われないためにも、対策を施しておくに超したことはありません。
場合によっては、皆さんも聞いたことがあるでしょう。
何らかしら画像など使う側としても、「著作権侵害」の違法に当たる場合もありますので、気を付けましょう。
画像ドラッグ禁止にプラグインは使いません
くま太君jQuery（JavaScript）って言う言語を使う方法もあるけど、面倒なの。
だから、より簡単にできるCSSを今回選んでみたよ。
マッツンがCSS好きって言うのもあるけど……
ここではCSSを利用し、プラグインを利用しない画像ドラッグ禁止方法をご案内します。
プラグインを入れたら簡単なのに、なぜわざわざCSSを使うのでしょうか？
画像のみ禁止に対応、No Right Click Images Pluginはどうなの？
くま太君このプラグインは、現状アップデート待ち。
どうなるかな？
※2022年11/14現在、WordPress6.1と互換性あり、と更新されています。後日、使い勝手を試してみたいと思います。
実は「No Right Click Images Plugin」という、画像のみをドラッグ＆右クリックコピー禁止できるプラグインがあります。
変なコードを書き込むよりも、プラグインを使用する方が安心感がありますよね。
数多くあるコピー禁止のプラグインの中から、この「No Right Click Images Plugin」をピックアップした理由は、「画像のみ禁止」を対象としているからです。ですが今現在（2022.3.24）このプラグインを確認すると、「最終更新11ヶ月前・使用中の WordPress バージョンで未検証」となっていました。
私の経験上、WordPressプラグインは、余程古いバージョンで無い限り、「WordPress バージョンで未検証」となっていても、問題無く使えるプラグインは多いです。
わざわざ、ダウングレードをして対象のプラグインを利用するケースもあるくらいなので。
（セキュリティの関係上、お勧めしませんが……）
ですが、未検証であるからには何が起こるか保証はありません。
皆さんの環境はそれぞれ違うので（テーマや使っているプラグイン、そしてそれらのバージョン等の組み合わせなど）、危ない橋は渡らず今回は見送りました。
今後、「No Right Click Images Plugin」がアップデートされたら、試してみるのも良いと思います（2022年11/14現在、アップデート済みを確認）。
その他のコピー禁止系プラグインはどうなの？
くま太君今回はテキストコピー禁止にしない方法を試しているよ。
あくまで画像のみに禁止効果をかけたい方法なの。
だから、今回ここはスルーするね。
「No Right Click Images Plugin」の他に、コピー禁止系プラグインがあります。
このコピー禁止系プラグインは、テキストも一緒にコピー禁止になるものが多いです。
テキストコピー禁止は、盗用禁止としては良い方法ですが、ユーザー側の使い勝手が悪い傾向にあります。
例えば、文中に調べたい単語が出てきた場合や、使いたいHTMLコードなどがあったとします。
単語やHTMLコードがコピー出来ないために、それを利用して、その後のアクションを起こすことができません。
短い単語であれば、手入力でも問題ないでしょう。
ですが、長ったらしいHTMLコードを、自分で手入力したいですか？
WEB言語などのコード入力はスペースがおかしいだけで、動かないなど不具合が出る可能性があります。
そんな手間な事はしたくないですよね？
くま太君コピペしたいの。
このような事から、サイトの離脱に繋がる可能性があるので、私の経験上からも、あまりお勧めではないと考えています。
テキストのコピー禁止を利用するのなら、ご自身のサイトの内容を吟味した上で利用するのが良いでしょう。
ページ毎にコピーさせないなどの設定を考えるなど、ユーザビリティを考える必要があるでしょう。
このような理由から、コピー禁止系プラグインも今回は除外して考えました。
実はプラグインの入れすぎは良くない？
くま太君マッツンポリシー？
私の経験からも感じている事ですが、以下の事が心配事としてあります。
この点に関しては、よく言われていることです。
実際、サイトの動きが悪くなったり、動かなくなったりという不具合に出くわしたことがあります。
あるプラグインを切ると正常に戻ると言うことは、よくある話です。
くま太君「サイトに不具合がでたら、プラグインを切れ！」は
ある意味、合い言葉。
プラグインがバージョンアップして、Wordpress・テーマ・他のプラグイン等と相性が悪くなる可能性もゼロとは言い切れません。
せっかく良かれと思って組み込んだのに、泣く泣くプラグインを削除する、なんてことも……
プラグイン同士のデータが干渉してしまっているのですね。
そのため私は、簡単に出来るなら、プラグインはなるべく使わないという方針を取っています。
その具体的な理由は、⇒WordPressプラグインの入れすぎ注意？！なんで？ダメなの？
今回は該当するプラグインも無いので、CSSを利用していきます。
画像ドラッグ＆右クリック禁止をCSSで簡単設定！
くま太君CSSだけの記述だから、とても簡単に出来るよ！
style.css（スタイルシート）ファイルに、以下黒ボックス内のコードを書き込むだけです。
この記述で、サイト内の画像全てがドラッグと右クリックで画像をコピーや保存が出来なくなります。
img {
pointer-events: none;
}これだけ！
簡単ですね。
このCSSコードを記載する場所ですが、
上記どちらの方法でもOKです。
では、それぞれの実際の書き方を見てみましょう。
FTPを使って「子テーマ」のstyle.cssファイルに追記する場合
一つ目の方法です。
FTPを使い、style.cssファイルに書き込む時は、ファイルのコピーを取りバックアップしておきましょう。
ファイルの置かれている階層はこちらです。
wp-content/themes/●●_child/style.css子テーマのstyle.cssをダウンロードします。
※親テーマでファイル編集をした場合、テーマのバージョンアップ等で上書きされて、消えてしまう事があります。そのため、編集のコードを書き込む時は、子テーマを利用しましょう。
エディタでファイルを開きます。
※バックアップ用にファイルのコピーを取っておきましょう。
img {
pointer-events: none;
}上記コードを追加したら、保存してファイルを閉じます。
終了です。
たったこれだけ！とても簡単ですね。
お疲れ様でした。
WordPress上で追記する
二つ目の方法です。
WordPressの管理画面上で設定します。
下記図の③にコードを追記したら、右上の「公開」ボタンをクリックして終了です。
img {
pointer-events: none;
}ページ毎にCSSを効かせたい場合
先にご案内したCSSの記載場所ですと、サイト全ページに効果がかかります。
ですが、あるページのみにこのCSSを効かせたい場合は、CSSの記載場所を変えます。
1番簡単なのは、テーマに寄りけりかもしれませんが、該当ページの編集画面に「CSS」を書き込めるボックスがあると思います。
そこに追記してあげれば、そのページだけにCSSの効果がかかります。
くま太君開いている編集画面の内容だけに効果がかかるから、コードの使い分けができて結構便利だよ。
該当ページのみ効くので、装飾やデザインをチョット変えたいという時は、編集画面にある「CSS」を書き込めるボックスはとっても便利です。
上記以外の書き方について試してみた
user-drag:none;これは、やはり読んでそのまま「ユーザーにドラッグさせないよ」というCSSコードです。
この記事を書くとき、このコードを利用してテストしていたのですが、実は反応しませんでした。
そのため、今回ご案内した「pointer-events:」でポインターのアクション止めちゃえ！という暴挙？にでました。
他に色々追加するのも面倒だったので。
今回追加する画像ドラッグ禁止用CSSコードの簡単解説
今回ご案内したCSSのイベント「pointer-events」は幅広いブラウザに対応しています。
設置も簡単ですし、使い勝手が良いと感じたのでこちらを使用することにしました。
img {
pointer-events: none;
}今回使用したコードを分解すると、
img
画像（img）に対して{ }内の内容を適用するね！という意味になっています。
pointer-events: none;
読んだままだったりするのですが、「ポインターの動作」を「しない」よ！という意味です。
※ポインターとは、パソコンを操作している時に、マウスを動かすと一緒に動く矢印などのマークです。リンク上に乗ると「指マーク」等に変化しますね。それです。
要約すると「画像に対してマウス操作をさせない」という命令文になっています。
そのため、画像をドラッグさせようとして、掴もうとしても反応がありません。
また、右クリックをしても、画像に対するコマンド（したい事）が表示されていません。
CSSは文字を装飾したり、枠を描いたり、位置調整をしたりと装飾・レイアウトのイメージが強いです。
しかし、ドンドン「動き」に対するコードも増えて、とても簡単にレイアウトと少々異なる部分でも利用できるようになりました。
個人的には便利になって嬉しい限りです。
今回のまとめ。画像ドラッグ＆右クリックコピー禁止で画像を守ろう！
色々な方のブログを拝見させて頂く中で、素敵なイラストや写真を目にする機会があります。
世の中にはちょっとズルイ人もいます。
一生懸命作った皆さんの素敵な作品が、不正な事に利用される可能性がある事が、とても嫌でした。
そのため、不正利用や転売等から、画像を守る方法をまとめる事にしました。
今回はCSSのみを使用して、自身のサイト画像をドラッグ＆右クリックコピー禁止する方法をご案内しています。
このようにすることによって、オリジナルイラストや写真を無断利用されるケースを格段に下げることができます。
せっかく一生懸命作成したオリジナル作品を、知らない所で転用・転売されるのは、気持ちの良いものではありませんよね。
正直気分悪い！です。
ホットリンク対策と並行して利用することによって、より画像に対する不正対策を強化することができます。
でも、これをやったからって、100%不正対策が出来ているとは言えません。
抜き取ろうとしたら、方法はあるので……。
ですが、不正を狙っている側からしたら、対策を破る為の一手間が必要になります。
その分、リスクは下がるので、不正利用されたくない時は、やはりおすすめです。
また、サイトによっては、個人利用であれば、ドンドン使って！という場合もあると思います。
なのでご自身のサイトのオリジナルイラストや写真を、無断使用不可としているのであれば、画像ドラッグ禁止をお試しいただければなと思います。
ここまでお読み頂き、ありがとうございました。
＼ 【広告】SWELLなら、設定も編集もサクサク快適！ ／
WordPressテーマ『SWELL』の詳細は公式サイトで！