KUSU'S SITE
2018年4月5日

サイト上のテキストをコピー禁止にするには??

  

 自分のサイトのテキストを他の人が別のサイトにコピペしてしまう…なんてことがたまにあったりします。

また、自分のサイトのソースコードを見られてしまい、ソースがそのまま知らないサイトに使われてしまう…なんてことも無きにしもあらずですよね。。。

そこで今回は、PCとスマホのそれぞれのコピー禁止の方法についてご紹介したいと思います!

PCサイトでコピー禁止を実装するには?

 まず、PCサイトでコピー禁止を実装するには、<body>タグを以下のように書き換えましょう。

<body oncopy='return false;'>

これでコピーを禁止にすることができます。

また、ソースコードを見られないようにするには、同じく<body>タグを以下のように書き換えましょう。

<body oncontextmenu='return false;'>

上のように書き換えることで右クリックができなくなるので、右クリックしてソースコードを見ることができなくなります!

応用として、コピー禁止とソースコードの閲覧禁止を両方実装したい時は、以下のように書き換えることで実装可能になります!

<body oncontextmenu='return false;' oncopy='return false;'>

スマホサイトでコピー禁止を実装するには?

 スマホサイトでコピー禁止を実装するには、PCサイトの時と同じように<body>タグを書き換える…というよりかは、CSSで制御するような形になります。

コピー禁止を実装するには、以下のCSSをbodyのCSSに記述しましょう。

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

2行目の
-webkit-touch-callout:none;
リンク長押しのポップアップを無効化する際に必要なCSSになります。

3行目の
-webkit-user-select:none;
テキスト長押しの選択ボックスを無効化するのに必要なCSSで、これがスマホサイトでコピー禁止を実装する時に必要なCSSになります!

まとめ

 以上がサイト上のテキストをコピー禁止にする方法でした!

最近、色々なサイトを見ているとコピー禁止を実装しているところも増えてきたように思えます。
この機会に、ご自身のサイトにコピー禁止を実装してみるのもよいかもしれませんね(^^)

スポンサーリンク
スポンサーリンク

コメントを残す




CAPTCHA


スポンサーリンク

ホームページ制作について

ホームページの制作依頼希望の方
はまず↓をクリック!
ホームページの制作依頼希望の方はまず↓をタップ!
サービスの詳細

WordPress講習会について

WordPress講習会について
気になる方ははまず↓をクリック!
WordPress講習会について気になる方はまず↓をタップ!
サービスの詳細

TWITTER


ページトップに戻る