読者です 読者をやめる 読者になる 読者になる

フィンラン堂

ウラジーミルが雑記してく場所

【はてブロでも使える!】画像を保存されるのを防ぐ方法

自分のサイトに貼った画像を保存させたくない!無断転載をされたくない!なんてことありますよね。そんな時はこれから紹介するやり方が役に立ちます。どうぞ、使ってみてください。

やり方

PCとスマホ両方とも画像を保存させなくするには右クリックを禁止するタグ長押しを無効にさせるタグ組み合わせます。

 

iPhoneで保存されるのを防止する

はてなブログの場合~

以下のコードをデザインCSSに張り付ける

f:id:fin-suomi:20170126202930p:plain

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

 ~他のブログサービスや自分のHPでやる場合~

以下のコードを張り付ける。CSS編集があったなら上のコードをCSS編集のところに張り付けてください。

<style>
    img{
      touch-callout:none;
      user-select:none;
      -webkit-touch-callout:none;
      -webkit-user-select:none;
      -moz-touch-callout:none;
      -moz-user-select:none;
    }
</style> 

 スマホで画像保存を禁止するやりかたその2

上のやり方が聞かない場合保存メニューが出てくる前にアラートを表示させちゃえというちょっと無茶なやりかたもあるようです。

はてなブログの場合はヘッダーのところに張り付けてください。

f:id:fin-suomi:20170126203700p:plain

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(function(){
        var timer;
        $("img").on("touchstart",function(){
            timer = setTimeout(function(){
                alert("保存できませんでした

")
            },500)
            return false;
        })
        $("img").on("touchend",function(){
            clearTimeout(timer);
            return false;
        })            
    })
</script>

 

☆PCで画像保存されちゃうのを防ぐ方法

ページ全体で右クリックを禁止しちゃいます。同時にドラッグも禁止させてしまいます。

先ほどと同じように以下のコードを画像のようにヘッダのタイトル下にコピーペーストしてください。

f:id:fin-suomi:20170126204118p:plain

<body onMouseDown="return false;" onSelectStart="return false" oncontextmenu="return false;"> 

 

画像のところだけ右クリック禁止

 HTML編集を選択し、imgタグの最後にこれを代入させる。

 oncontextmenu="return false;"

 例:<img src="画像のパス" oncontextmenu="return false;" />

 

問題点

画像URLを取り出すフリーソフトを使われたり、ソースを表示させる機能を使われたりとこの記事で紹介したやりかたはいくらでも回避するやりかたがあります。

完全に画像保存を防ぐことは今の段階では難しいと思います。