【Pick Up!!】『ブログ用語集』始めました!100以上の用語をサクッと解説!

画像ドラッグ禁止!右クリックコピー禁止もCSSで超簡単設定!プラグイン不要!

画像ドラッグ禁止!右クリックコピー禁止もCSSで超簡単設定!プラグイン不要!

前回は、画像を守る為に、ホットリンク(直リンク)を禁止する方法をご案内しました。

ホットリンク(直リンク)の禁止は、外部サイトから、自分のサイト画像URLに直接リンクを張り使用されるという事象を防ぐことが出来ます。

ですがこれだけだと、右クリックでコピーや保存、ドラッグでパソコンに直に保存が出来てしまいますね。
画像を簡単に入手する手立てが残っています。

特にオリジナルのイラストや写真を載せている方は、転用等の不正利用や転売されてしまう危険性が考えられます。

では、どうすれば良いのでしょうか?

今回は、大事なご自身の画像を不正利用されないために、画像ドラッグ&右クリック禁止の方法をご案内します。
設定方法もCSSでとっても簡単!

CSSの記載場所から、記載の方法まで、初心者の方にもわかるように、詳細に解説していきます。

ホットリンクの設定と一緒に利用すれば、画像関係のトラブルは大きく回避できます。

もし、無断で画像利用されたくないとお考えでしたら、とても簡単にできるので、是非試してみてください。

●この記事を読むと分かること
・画像ドラッグ&右クリックコピー禁止のCSS簡単設定方法

目次

どうして画像ドラッグ禁止にするの?

画像ドラッグ禁止にする理由は、

・無断利用されないようにする為

この一言につきます。

特にオリジナルで写真やイラストを掲載していた場合、勝手に画像を抜き取られて、他のサイトで使用されていたり、悪質な場合は、販売されていたりが考えられます。

もちろん、サイトの管理人さんの中には「自由に使って!」という方もいるでしょう。

そのような場合は、画像ドラッグ禁止などの対策は不要ですよね。

ですが、知らない所で不正に利用されてしまい、要らぬトラブルに見舞われないためにも、対策を施しておくに超したことはありません。

場合によっては、皆さんも聞いたことがあるでしょう。
何らかしら画像など使う側としても、「著作権侵害」の違法に当たる場合もありますので、気を付けましょう。

著作権とは

著作物を作ったら、それが保護される権利のことです。
オリジナルの写真やイラストに関しては、ピンッ!ときませんか?
著作権はどこかに申請して権利を得るものでなはく、著作物が出来上がった段階で権利が発生しています。
なので、オリジナルの写真やイラストを自分のサイトから勝手に引っ張られ、使用された場合、著作権侵害にあたる可能性もでてきます。
WEB制作をする際は、マナーを守って活動していきましょうね。

画像ドラッグ禁止にプラグインは使いません

くま太君

jQuery(JavaScript)って言う言語を使う方法もあるけど、面倒なの。
だから、より簡単にできるCSSを今回選んでみたよ。
マッツンがCSS好きって言うのもあるけど……

ここではCSSを利用し、プラグインを利用しない画像ドラッグ禁止方法をご案内します。

プラグインを入れたら簡単なのに、なぜわざわざCSSを使うのでしょうか?

画像のみ禁止に対応、No Right Click Images Pluginはどうなの?

くま太君

このプラグインは、現状アップデート待ち。
どうなるかな?

実は「No Right Click Images Plugin」という、画像のみをドラッグ&右クリックコピー禁止できるプラグインがあります。

変なコードを書き込むよりも、プラグインを使用する方が安心感がありますよね。

数多くあるコピー禁止のプラグインの中から、この「No Right Click Images Plugin」をピックアップした理由は、「画像のみ禁止」を対象としているからです。

ですが今現在(2022.3.24)このプラグインを確認すると、「最終更新11ヶ月前・使用中の WordPress バージョンで未検証」となっていました。

私の経験上、余程古いバージョンのもので無い限り、「WordPress バージョンで未検証」となっていても、問題無く使えるプラグインは多いです。

わざわざ、ダウングレードをして対象のプラグインを利用するケースもあるくらいなので。
(セキュリティの関係上、お勧めしませんが……)

ですが、未検証であるからには何が起こるか保証はありません。

皆さんの環境はそれぞれ違うので(テーマや使っているプラグイン、そしてそれらのバージョン等の組み合わせなど)、危ない橋は渡らず今回は見送りました。

今後、「No Right Click Images Plugin」がアップデートされたら、試してみるのも良いと思います。

その他のコピー禁止系プラグインはどうなの?

くま太君

今回はテキストコピー禁止にしない方法を試しているよ。
あくまで画像のみに禁止効果をかけたい方法なの。
だから、今回ここはスルーするね。

「No Right Click Images Plugin」の他に、コピー禁止系プラグインがあります。

このコピー禁止系プラグインは、テキストもコピー禁止になるものがあります。

テキストコピー禁止は、盗用禁止としては良い方法ですが、ユーザー側の使い勝手が悪い傾向にあります。

例えば、文中に調べたい単語が出てきた場合や、使いたいHTMLコードなどがあったとします。

単語やHTMLコードがコピー出来ないために、それを利用して、その後のアクションを起こすことができません。

短い単語であれば問題ないでしょう。
手入力でもね。

ですが、長ったらしいHTMLコードを、自分で手入力したいですか?

HTMLなどのコード入力はスペースがおかしいだけで、動かないなど不具合が出る可能性があります。

そんな手間な事はしたくないですよね?

コピペ、したいじゃなですか。

このような事から、サイトの離脱に繋がる可能性があるので、個人的にあまりお勧めではないかな、と考えています。

テキストのコピー禁止を利用するのなら、ご自身のサイトの内容を吟味した上で利用するのが良いと思います。

ページ毎にコピーさせないなどの設定を考えるなど、ユーザビリティを考える必要があるでしょう。

このような理由から、コピー禁止系プラグインも今回は除外して考えました。

実はプラグインの入れすぎは良くない?

くま太君

マッツンポリシー?

私の経験からも感じている事ですが、以下の事が心配事としてあります。

・セキュリティレベルの低下の恐れ
・各プラグインやテーマのPHPが干渉を起こし、不具合が起こる恐れ
・サイトの動作が悪くなる

この点に関しては、よく言われていることでもあります。

実際、サイトの動きが悪くなったり、動かなくなったりという不具合に出くわしたことがあります。

あるプラグインを切ると正常に戻ると言うことは、よくある話です。

プラグインがバージョンアップして、Wordpress・テーマ・他のプラグイン等と相性が悪くなる可能性もゼロとは言い切れません。

せっかく良かれと思って組み込んだのに、泣く泣くプラグインを削除する、なんてことも……
プラグイン同士のデータが干渉してしまっているのですね。

そのため私は、簡単に出来るなら、プラグインはなるべく使わないという方針を取っています。

今回は該当するプラグインも無いので、CSSを利用していきます。

画像ドラッグ&右クリック禁止をCSSで簡単設定!

くま太君

CSSだけの記述だから、とても簡単に出来るよ!

style.css(スタイルシート)ファイルに、以下黒ボックス内のコードを書き込むだけです。

この記述で、サイト内の画像全てがドラッグと右クリックで画像をコピーや保存が出来なくなります

img {
pointer-events: none;
}

これだけ。
簡単ですね。

このCSSコードを記載する場所ですが、

・FTPを使って「子テーマ」のstyle.cssファイルに追記する
・Wordpress上で追記する

上記どちらの方法でもOKです。
では、それぞれの実際の書き方を見てみましょう。

FTPを使って「子テーマ」のstyle.cssファイルに追記する場合

一つ目の方法です。
FTPを使い、style.cssファイルに書き込む時は、ファイルのコピーを取りバックアップしておきましょう。

ファイルの置かれている階層はこちらです。

wp-content/themes/●●_child/style.css
STEP
style.cssファイルをダウンロード

子テーマのstyle.cssをダウンロードします。

親テーマでファイル編集をした場合、テーマのバージョンアップ等で上書きされて、消えてしまう事があります。そのため、編集のコードを書き込む時は、子テーマを利用しましょう。

エディタでファイルを開きます。
※バックアップ用にファイルのコピーを取っておきましょう。

STEP
1番最後にCSSコードを追加
img {
pointer-events: none;
}

上記コードを追加したら、保存してファイルを閉じます。

STEP
FTPで元の子テーマフォルダにアップロード

終了です。

たったこれだけ!とても簡単ですね。

お疲れ様でした。

WordPress上で追記する

二つ目の方法です。
WordPressの管理画面上で設定します。

外観 → カスタマイズ → 追加CSS

下記図の③にコードを追記したら、右上の「公開」ボタンをクリックして終了です。

Wordpressの管理画面css記載場所手順
img {
pointer-events: none;
}

※テーマファイルエディターに記載でもOKですが、最初に開くと、アラートが出てビックリするので、上記の方が気持ち的に楽に作業できると思います。

記述するコードは同じです。

●外観 → テーマファイルエディター → スタイルシート (style.css)

ページ毎にCSSを効かせたい場合

先にご案内したCSSの記載場所ですと、サイト全体に効果がかかります。

ですが、あるページのみにこのCSSを効かせたい場合は、CSSの記載場所を変えます

1番簡単なのは、テーマに寄りけりかもしれませんが、該当ページの編集画面に「CSS」を書き込めるボックスがあると思います。

そこに追記してあげれば、そのページだけにCSSの効果がかかります。

くま太君

開いている編集画面の内容だけに効果がかかるから、コードの使い分けができて結構便利だよ。

該当ページのみ効くので、装飾やデザインをチョット変えたいという時は、編集画面にある「CSS」を書き込めるボックスはとっても便利です。

上記以外の書き方について試してみた

user-drag:none;

これは、やはり読んでそのまま「ユーザーにドラッグさせないよ」というCSSコードです。

この記事を書くとき、このコードを利用してテストしていたのですが、実は反応しませんでした。

そのため、今回ご案内した「pointer-events:」でポインターのアクション止めちゃえ!という暴挙?にでました。
他に色々追加するのも面倒だったので。

今回追加する画像ドラッグ禁止用CSSコードの簡単解説

今回ご案内したCSSのイベント「pointer-events」は幅広いブラウザに対応しています。

設置も簡単ですし、使い勝手が良いと感じたのでこちらを使用することにしました。

ポインター不可のcss対応表
img {
pointer-events: none;
}

今回使用したコードを分解すると、

img
画像(img)に対して{ }内の内容を適用するね!という意味になっています。

pointer-events: none;
読んだままだったりするのですが、「ポインターの動作」を「しない」よ!という意味です。

※ポインターとは、パソコンを操作している時に、マウスを動かすと一緒に動く矢印などのマークです。リンク上に乗ると「指マーク」等に変化しますね。それです。

要約すると「画像に対してマウス操作をさせない」という命令文になっています。

そのため、画像をドラッグさせようとして、掴もうとしても反応がありません

また、右クリックをしても、画像に対するコマンド(したい事)が表示されていません

CSS適用前と適用後の右クリックの違い
CSS適用前後の右クリックの状態

CSSは文字を装飾したり、枠を描いたり、位置調整をしたりと装飾・レイアウトのイメージが強いです

しかし、ドンドン「動き」に対するコードも増えて、とても簡単にレイアウトと少々異なる部分でも利用できるようになりました。

個人的には便利になって嬉しい限りです。

今回のまとめ。画像ドラッグ&右クリックコピー禁止で画像を守ろう!

色々な方のブログを拝見させて頂く中で、素敵なイラストや写真を目にする機会があります。

世の中にはちょっとズルイ人もいます。

一生懸命作った皆さんの素敵な作品が、不正な事に利用される可能性がある事が、とても嫌でした。

そのため、不正利用や転売等から、画像を守る方法をまとめる事にしました

今回はCSSのみを使用して、自身のサイト画像をドラッグ&右クリックコピー禁止する方法をご案内しています。

このようにすることによって、オリジナルイラストや写真を無断利用されるケースを格段に下げることができます

せっかく一生懸命作成したオリジナル作品を、知らない所で転用・転売されるのは、気持ちの良いものではありませんよね。
正直気分悪い!です。

ホットリンク対策と並行して利用することによって、より画像に対する不正対策を強化することができます。

サイトによっては、個人利用であれば、ドンドン使って!という場合もあると思います

なのでご自身のサイトのオリジナルイラストや写真を、無断使用不可としているのであれば、画像ドラッグ禁止をお試しいただければなと思います。

ここまでお読み頂き、ありがとうございました。

☆読んでくれてありがとう!よかったらシェアしてね!☆
目次