コンテンツをプロテクトしてくれるcss

2022.1.10 更新

皆さまごきげんよう。
以前、画像の右クリック、ドラッグ&ドロップ禁止のプラグインのご紹介をしたのですが、

画像を守るワードプレスプラグイン No Right Click Images Plugin、Easy WaterMark、Image Watermark

うちのテーマと互換性が無くなってしまったのか、原因不明なのですが、このプラグインが全く効いていないことに最近気付きました((((( ；ﾟДﾟ)))

そこで今回は、一行でコンテンツをプロテクトしてくれるcssをご紹介します。

コンテンツをプロテクトしてくれるcss

そんな魔法の一行がこちらです。↓

img {
  pointer-events: none;
}
//すべての画像のマウスイベント (クリック、ドラッグ、ホバー等) を無効にする

今までプロテクト系プラグインをネットで探し、インストールして設定したりしていた手間が、imgにこの一行を設定しただけであっさり解決してしまいました(笑)

更に、本文もプロテクトしたいという場合はこちら ↓

user-select: none;//テキストを選択不可にする
touch-callout: none;//タッチデバイスで長押しした時のポップアップメニューの表示を無効

私の場合は、ソースコードもコピー不可ですと使い勝手がよくないので画像だけにしておりますが、こちらも本文などに対して設定すればより強力ですね。

あとは、画像にウォーターマーク（透かし）も入れておくのもオススメです！

画像を守るワードプレスプラグイン No Right Click Images Plugin、Easy WaterMark、Image Watermark

これでひとつ、無駄にプラグインを入れる必要がなくなり、非常にスッキリです。

プラグインはとても便利ですが、ワードプレスのアップデート後に互換性が無くなってしまったり、プラグイン同士のコンフリクトでうまく動かないこともありますので、できるだけ最小限にしておきたいものです。

これからはプラグインを探す前に、まず自分で修正できる方法を探してみようと思います(^^)