ログイン
英会話| 婚活| 北海道専門学校| 東北専門学校| 東海専門学校| 沖縄専門学校| ホームページ制作| 2万円HP制作|

DTP・Webデザイン系企業に就職したスタッフIhaのブログテンプレート制作目録です。イラスト、フォト、プログラム、呟きなどいろいろ投稿していきます。基本的にはブログテンプレートデザインを制作した過程を書いています。

 

CSSで画像を右クリック保存させないようにする方法

最近(と言っても去年の8月くらい)から、仕事でWordPressを使うことが多くなってますが、今回書く記事はCSSなのでどの環境でも使えるネタかもしれません。

 

そこで今回は絶対配置を利用したレイヤー構造のようなCSSです。

そのような事態になったのは、只今進捗中の案件に関係しています。

 

クライアントから「ライセンスをどうしても掲載したい」という要望がありまして、しかも「DL(右クリックで画像を保存)されないようにしてくれ」とか無茶振りされました。DL以前の問題でキャプチャー撮られたら終わりですよ、と提案しましたが、やっぱり「どうしても掲載したい」とごねてました。

 

まあGoogle検索で探してたら、それっぽいのを発見しました。それが、

CSSで画像を右クリック保存させないようにする方法です。

 

下の画像を右クリックすると保存できます。
アクアオーシャン

 

ですが、下の画像は右クリックしても表示されているアクアオシャンという画像を保存できません。

アクアオーシャン

 

画像の上に絶対配置で透過GIFを置いているため、直接的に右クリックで画像の保存ができないようになってます。

ソースはこちら。

 

HTML

<div class="dlng">

    <span class="guard"></span>

    <img src="/img/hoge.gif" width="500" height="166" />

</div>

 

CSS

.dlng{

    position:relative;

    padding:0;

    width:500px;

    height:300px;

}

 

.guard{

    display:block;

    position:absolute;

    width:100%;

    height:100%;

    background:url(/img/hogehoge.gif);

}

そもそも右クリックをさせない方法

 

下の画像はJavascriptで右クリックできないようにしてあります。

アクアオーシャン

 

Javascript

<img src="./img/hogehoge.jpg" oncontextmenu="return false;" />

 

これで右クリックができなくなります。<body>に付けるとページ全体で右クリックができなくなります。ただ個人的には<img>タグにもこういった制限をあまり掛けたくありません。

 

右クリックは結構頻繁に使うため、ソースを見たり、Firefoxだと画像のサイズを閲覧する事ができなくなってしまいます。

 

ちなみにJavaScriptをオフにされると、このスクリプトを入れた意味がなくなります。OSがMacだと右クリックの概念がないのでスクリプトも意味がありません。

 

結局、Web上で画像を不正にダウンロードされたくないのであればアップロードしない方が良いのです。不正ダウンロードする人を増やすだけで逆効果だと思います。

 

したがって、ライセンスなんていう企業情報の塊が入ったものを晒すなんていう考えが、自分には理解できません。保持している事を証明したければ、ライセンス名だけを入力でも良いと思います。

 

Calendar

<< 2018年04月 >>
1234567
891011121314
15161718192021
22232425262728
2930     

Me

profile
プロフィールは個別に作りたいと思うのは自分だけでしょうか?上の画像は訓練校に居た頃制作。デッサンしたことあるけど、これはただのラクガキです。ちょっとレイヤー効果追加。

ブログテンプレート量産中!・・・でも今はPHPとjQueryで遊んでるラボの人です。

最近はラボよりもWordPressやタウンネットブログのエンジンを使ってサイト制作(仕事)をやってます。

QR Code

ihaのブログ

RSS

RSS1.0 RSS2.0