こんにちは！ズマペンです。
今日は自分のホームページの文字をコピーできなくする方法をお伝えします。

こんな方にお勧めです。
・自分のホームページの情報を守りたい、盗まれづらくしたい。
・大事なノウハウ、文章や画像をコピペされづらくしたい。

※完全にコピペを防ぐことはできないのでご注意ください。
あくまでコピペしづらくする方法と捉えてください。

方法①htmlに記述する

コピー禁止にしたい部分に、下記のタグを追加します。

onCopy="alert('コピー禁止'); return false;"

下記は実装例です。
divタグじゃなくても効きます。

<div onCopy="alert('コピー禁止'); return false;">
この部分はコピー禁止になります。
</div>

右クリック禁止も足しておくと、より効果的です。

onContextmenu="return false;"

こんな感じで足しておきます。

<div onCopy="alert('コピー禁止'); return false;" onContextmenu="return false;">
この部分はコピー禁止＆右クリックも禁止になります。
</div>

方法②cssに記述する

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

具体的な記述例は下記になります。

p,
img,
ul,
ol {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

実装した結果

下記が実際に試してみた内容です。
コピーできるか試してみてください。

こちらは方法①htmlに記述する方法です
・ピンク色の中で右クリックできるかな？
・文字をコピーできるか試してみてね。

こちらは方法②CSSに記述する方法です
・文字を選択（反転）できるか試してみてね。
・文字をコピーできるか試してみてね。

この記事を書いた人

---

上級ウェブ解析士　水間 祐平
出身：千葉県千葉市
資格：上級ウェブ解析士／産業カウンセラー
趣味：映画鑑賞、スポーツ観戦、草野球

中小企業を専門に合計400サイト以上のホームページの運用・分析を担当。現在も常時100サイト以上のアクセス解析を行い、数値データから導き出す改善提案で、多くの成功事例を生み出している。また、企業のWeb・広報担当者向けにアクセス解析のセミナー研修を行っている。