LoginSignup
1

More than 3 years have passed since last update.

WordPressで特定の画像に右クリック禁止を設定する

Posted at

やりたいこと

・WordPressで特定の画像に右クリック禁止を設定したい

CSSで設定する

style.css
.copy-guard {
    pointer-events: none;
}

class="copy-guard"を指定した画像を選択できなくなるのでお手軽ですが、右クリックは出来ます。
コンテキストメニューに「画像を保存」が表示されなくなるので、簡単に対応するならコレ。

JavaScriptで設定する

index.html
<script type="text/javascript">
document.querySelector('.copy-guard').getElementsByTagName('img')[0].oncontextmenu = function () {return false;} //コンテキストメニューを表示しない
document.querySelector('.copy-guard').getElementsByTagName('img')[0].ondragstart = function () {return false;} //ドラッグさせない
</script>

ブロックエディタの場合、クラスを設定するとHTML上では↓のようになるので、querySelector('.copy-guard')の中のimgを指定するようにします。

index.html
<div class="wp-block-image copy-guard">
<figure class="size-large is-resized">
<img loading="lazy" src="(ファイルURL)" alt="" class="wp-image-275" width="300" height="225" />
</figure>
</div>

余談その1

CSSでpointer-events: none;を指定している画像に、JavaScriptでoncontextmenu = function () {return false;}を指定すると、コンテキストメニューが表示されます。

どっちかだけにしたほうがいいです。

余談その2

JavaScriptを追加するのも面倒だったので、WordPressのブロックエディタ上の「HTMLで編集」機能を使ってoncontextmenu="return false;"をimgタグに仕込もうとしたら、ブロックが壊れました。

なので、WordPressで仕込む場合は、CSSかJavaScriptでやったほうがいいです。
クラシックエディタは大丈夫だと思う。

以下、愚痴

「写真を絶対にコピーできないようにインターネットに載せたい」という要望があり、最終的に対応した結果が右クリック禁止なんですけど、もうインターネットに載せるのやめてもらっていいですかって言いたくなっちゃったよね(´・ω・`)ソンナノムリダヨ

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1