右クリック禁止・ドラッグ操作禁止にする方法

画像の無断使用に対する抑止力を!

とある案件で画像に対し「右クリック禁止」「マウスでのドラッグ操作禁止」を行い無断使用に対する抑止および【私はこの画像を使われたくありません】という意思表示を行う方法を考える機会がありました。
禁止してもウェブサイトに掲載された時点であの手この手でダウンロードできるので完全な防止にはなりませんが牽制になりますね。

課題

  • ページ全体に右クリック・ドラッグ禁止は不便なので画像のみに適用
  • WordPressでどうやるか

結果的にはショートコードを作って適用する方法にしました(後述)

考えた過程

プラグインを使う?

「WordPress」「コピーガード」など色々検索した結果、私がプラグインを導入する基準にしている条件にはまるものが無かったので諦めました。

選定基準はインストール数、評価、メンテナンス履歴など色々ですが、なんとなくウーンだったので見送り。

先日参加したWordCamp Tokyo2017で紹介されていた、誰かが文章をコピーしたら通知してくれるプラグインは面白いと思ったので紹介しておきます。
何かの案件で使う機会がありそう。

プラグイン作者さんのブログ「着ぐるみ追い剥ぎペンギン」
WordPress:誰かが記事をコピーしたら教えてくれるプラグインCCC(Check Copy Contents)を作ってみた。

ショートコードにしよう。

javascriptで右クリック、画像ドラッグを禁止します。

参考にさせて頂いたブログ:Web雑記帳。右クリック禁止で画像のコピーガード(ドラッグ禁止対策追加)

onMouseDown='return false;' onSelectStart='return false' oncontextmenu='return false;

これをショートコード

onMouseDown='return false;' onSelectStart='return false' oncontextmenu='return false;'

で呼び出して好きな場所に挿入できるようにしました。(cg=CopyGuardの略にした)

function copyGuard() {
    return "onMouseDown='return false;' onSelectStart='return false' oncontextmenu='return false;'";
}
add_shortcode('cg', 'copyGuard');

ちょっとまって!

でもこの方法だとimgタグの中に書いてもビジュアルエディターとテキストエディター切り替えたらショートコード消されちゃうんですよね。
テキストエディターで記入して切り替えずに編集ページから離脱しないと消されてしまう。

複数担当者が居る環境ならカスタムフィールドを使ってメモ覧を作り、「このページではショートコードをimgタグ内で使用しているのでエディタ切り替え禁止!他のページでテキストエディターに切り替えてから編集画面を開いてください」とかいちいち書く必要があるかもしれませんね。
管理が面倒。却下。

結果

という訳でショートコードで作るのはscript部分だけじゃなくて、divにくっつけて枠として作る事にしました。

function copyGuardBox( $atts, $content = null ) {
return '<div onMouseDown="return false;" onSelectStart="return false" oncontextmenu="return false;" class="cgb">'.$content.'</div>';}
add_shortcode('cgb', 'copyGuardBox');

こちらはこんな感じでショートコードで囲って使います。(cgb=CopyGuardBoxの略にした)

ここに画像を貼り付ける

試しこの画像↓に使ってみました。
メディアファイルにリンクしているのでクリックは出来るけど、右クリックとドラッグ操作はできませんね。良い感じ!


リルとカイト

でも画像にキャプションを付けるとショートコードで囲めないのでそのうちもうちょっと使いやすいのを考えたい。
いや~使う機会ないかなぁ?

WordCamp Tokyo 2017に参加してきたレポートも書きたいのになかなかなかなか・・・

この記事にコメントを残す