【右クリックコピー禁止】追加CSSで簡単設定！プラグイン不要

前回、画像のみ保存禁止にするプラグイン「No Right Click Images Plugin」を紹介しました。今回は、プラグインを利用しないで右クリックコピーを禁止する方法を紹介。

まず、プラグインによる方法は簡単に導入することができます。

前回のプラグイン「No Right Click Images Plugin」の投稿はこちら

ですが、プラグインを入れすぎと干渉してサイトに悪影響がでることもあります。

今回のコードは、「追加CSS」にちょっとしたコードを追加するだけで、右クリックコピー禁止ができます。

コード追加による右クリックコピー禁止の動作

まず、この記述でどのような動きをするか説明します。

パソコンは「右クリックの画像に関する項目」が表示されなくなります。

スマートフォンでは「画像の上でタッチの長押し」などの動作ができなくなります。

そして、パソコン・スマートフォン両方ともに言えますが、テキスト内容はコピーできます。

※このコードは完全に右クリックを制御できるわけではありません。

style.css（スタイルシート）ファイル、追加CSSに以下のコードを追加します。

img {
pointer-events: none;
}

では、コードの追加方法を解説していきます。

まず、WordPress 管理画面にある「外観」の「カスタマイズ」を開きます。

次に「追加CSS」をクリックします。

最後にわかりやすいように一番下にコードを追加して「公開」をクリックします。

最後に、パソコンで右クリックのコピー禁止できているか、スマートフォンで画像上のタップ禁止ができているか必ず確認してください。

今回の使用したコードをざっくりと説明します。

img {
pointer-events: none;
}

まず、１行目の「img」ですが

img(画像)に対して{　}内の命令を適用します

という宣言になります。

２行目の「pointer-events: none;」は以下の内容になります。

「ポインターの動作」を「しない」と命令になります。

※ここで言うポインターとは、パソコンを操作している時のマウス操作時の矢印マークです。

記述は１行のみですがここに実質的な動作に関する内容が記述されています。

最後でコードは閉じられ終了となります。

なので、これを一つにまとめると「画像に対してマウス操作をさせない」という命令文になります。

そのため、画像をドラッグさせようとして、反応がありません。また、右クリックをしても画像関連のコマンドが表示されていません。

いかがだったでしょうか。「No Right Click Images Plugin」は画像のみを保存を禁止するのに最適なプラグインです。

テキスト内容は防止できません。両方ともとなると他のプラグインを使う必要がありますが…

また、盗用禁止などを過度にやりすぎるとユーザー側の使い勝手(利便性)が悪い傾向にあります。

このコード記述は、画像に対して保存を禁止するため、テキスト内容は保存禁止されません。つまり、一定の利便性も保たれた状態で画像に対するコピーガードできます。

と考えている方はおススメです。

最後までお読みいただきありがとうございました！