WEB制作

サイトの文章や画像を簡単にコピーできないようにするには?

投稿日:

 

Devanath / Pixabay

作ったサイトの文章や画像を簡単にコピーできないようにする方法です。
画像の保存を完全に防ぐことはできません。
でも、コピーにひと手間かかることが抑止力にはなるようです。
ソースコードを見る人には無効ですが、表示されたサイトを閲覧している限りにでは効果があります。

右クリック禁止をHTMLに記述する

<body oncontextmenu="return false;">

HTMLのbodyタグに上のような設定をします。

CSSでドラッグしても文字を選択できないようにする

body{
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
}

CSSのbodyタグに設定します。

 

スマホ対策は長押しアクション禁止

長押し禁止でスマホでの画像保存をできないようにします。

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

 

あとは、JavaScriptで画像をガードするとなおよいらしい。

他にも、画像の保護方法としては、
◎背景画像として扱う
◎画像の上に透明な画像を載せる
などがありました。

 

<参照したサイト>
http://idd.tokyo/blog/?p=225
https://moriawase.net/copy-guard
https://www.tam-tam.co.jp/tipsnote/html_css/post15170.html
https://qiita.com/shisama/items/be0e432711de359598ed
http://kajico.kajilabo.net/prohibit_image_storage/

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

jQueryでウィンドウサイズによって読み込む画像を切り替える

サイトデザインの確認のために、 全体を一枚のJPGで書き出してサクッとブラウザで確認してもらいたい時に ブラウザの幅を広げると大きな画像に、狭めると別に用意した小さな画像を表示させたい! HTMLだけ …

no image

コメントアウトの書き方★html & css & php

WEB制作ではhtml & css & phpを触ることが多いですが、コメントアウトの書き方がぞれぞれ違うので忘れないようにメモ。 ちなみに、コメントアウトとは、ソースコード側に書いて …

CSS★fontawesome 6 を疑似要素で使う

リニューアル案件でfontawesomeを使用。MacでのテストはOKだけど、Winで表示テストすると文字化けしてアイコンフォントが表示されない。恐らくCSSの設定が間違ってるんだ!と思ったので、いろ …

no image

リストマークと字下げインデントのまとめ

画像なしで表現するリストマークのサンプルいろいろ 行頭記号やリストマークなどの装飾を、画像なしで実現する方法を紹介しています。 リストアップの条件は、 先頭に何かしら装飾をつける 2行目以降の先頭を1 …

no image

HTML特殊文字—ちょっと使いたい時に

 よく使う記号、使われる記号、いざという時の… < &lt; &#60; > &gt; &#62; 左の二つは、HTMLなどのマークアップ言語で …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。