Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8656

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

$
0
0

やりたいこと

・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(){returnfalse;}//コンテキストメニューを表示しないdocument.querySelector('.copy-guard').getElementsByTagName('img')[0].ondragstart=function(){returnfalse;}//ドラッグさせない</script>

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

index.html
<divclass="wp-block-image copy-guard"><figureclass="size-large is-resized"><imgloading="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でやったほうがいいです。
クラシックエディタは大丈夫だと思う。

以下、愚痴

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


Viewing all articles
Browse latest Browse all 8656

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>