ブログ運営とーく

【5分で完了】WordPressで文字や画像をコピー禁止にする

・時間をかけて書いたテキストが転用されたら嫌だな…

・テキストのコピペを防ぐ方法ってないの?

・htmlとかCSSとかはよくわからないから、初心者でもできる方法がいいな

 

こんな時に使えるコピーガードの実装方法を、画像つきでわかりやすく解説します。

 

実装後はこうなります。

  • 【PC】右クリックは可能だが範囲指定、コピーはできない
  • 【スマホ】範囲指定できない、3Dタッチも無効

ちなみに僕はCSSもhtmlも「読めない」「書けない」「意味わからない」と三重苦のド素人ですが、そんな底辺スキルの僕でもプラグインを使って5分でできたのでご安心を。

ただ、調べた時にわかりやすいページが無かったからついでに作っちゃおうと、そういう経緯です(ゲス顔)

 

【画像付き】コピーガードの実装方法

手順は以下の通り。

  1. WordPressのダッシュボード(管理画面)を開く
  2. プラグイン「Simple Custom CSS」をインストールして有効化
  3. ダッシュボードの「外観」から「カスタムCSS」を開く
  4. 表示されている文字列を全部消し、CSSを貼り付ける
  5. 「更新」ボタンを押す
  6. 実装できたか確認する

めちゃくちゃ簡単です。ここから画像を使って解説しますね。

 

①WordPressのダッシュボードを開く

 

多分、一番見慣れてるであろうこの画面です。

 

②プラグイン「Simple Custom CSS」をインストールして有効化

 

画面左のメニュー一覧から「プラグイン」→「新規追加」を選択。

 

検索BOXに「Simple Custom CSS」と入力して、「今すぐインストール」を押す。

 

インストールが終わるとボタンが「有効化」に変わるので、押す。

 

③ダッシュボードの「外観」から「カスタムCSS」を開く

 

有効化すると「外観に」「カスタムCSS」というメニューが増えているので、押す。

 

④表示されている文字列を全部消し、CSSを貼り付ける

 

初めて開く時は「ここにCSSコードを入力してください」的なテキストがあるので、全部消します。(一度消して再インストールしてみたんですが復元できず、ごめんなさい。)

 

消したら、以下のCSSを貼り付けます。

body{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
    }    

 

貼り付けたら以下のようになります。

 

⑥「更新」ボタンを押す

 

最後に「カスタムCSSを更新」を押して完了です。

 

⑦実装できたか確認する

 

実際にブラウザから、コピーガードが機能しているか確認してみましょう。

範囲指定できなくなっていれば成功です。お疲れ様でした!

 

最後に:コピーガードのメリット・デメリット

コピーガードのメリット

・無断転用、盗作、悪用の防止

これに尽きますね。

サイトを訪れてくれるユーザーは完全にランダムなので、中には悪意を持って利用しようとする人も少なからずいます。

コピーガードのデメリット

・引用、拡散してもらいにくくなる

引用してもらったりリンクを貼ってもらうことは、多くの人の目に触れる機会になるだけでなく、被リンクをもらうことで直接的にSEO上の評価にも繋がります。

これを事実上放棄するのは割と大きなデメリットになると思います。

コピーガードを実装した方が良いケース

  • 自作のイラストなどの著作権を守りたい場合
  • 文章に独自性や唯一性が無く、コンテンツを容易に複製できてしまう場合

こういった場合はコピーガードを使ってもいいのかなと。

 

というわけで、コピーガードも一長一短です。

あなたのサイトの内容や性質に合わせて使い分けてみてください。

 

この記事が参考になったら
\Follow me!/

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA