spoiler.jsを使って画像やテキストをモザイク・ぼかし表示する方法をご紹介します。
該当箇所の画像やテキストをモザイク・ぼかし効果で表示します。
Contents
画像やテキストをモザイク・ぼかし表示するCSSの記述
※必要に応じて変更して下さい。
<style type="text/css"> <!-- body { margin: 0px; font-size:14px; } h1{ font-size:16px; font-weight:normal; line-height:1.4em; text-align:center; padding:15px 0 10px 0; } h2{ font-size:14px; font-weight:normal; line-height:1.2em; text-align:center; padding:0 0 15px 0; } #idWrap{ width:700px; margin:0 auto; } p{ padding:20px; font-size:14px; text-align:center; } --> </style>
spoiler.jsを使って画像やテキストをモザイク・ぼかし表示するJavaScriptの記述
※jquery.min.js、spoiler.jsファイルを読み込みます。$(‘モザイク・ぼかし表示するタグ要素’).spoilerAlert({オプション})でモザイク・ぼかし表示するエリアを設定します。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script src="spoiler.js"></script> <script type="text/javascript"> $(function(){ $('spoiler').spoilerAlert(); //ぼかしを入れるタグ $('.spoiler').spoilerAlert({max: 20, partial: 6}); //ぼかしを入れるタグのclass名 }); </script>
画像やテキストをモザイク・ぼかし表示するHTMLの記述
※モザイク・ぼかし表示するタグ要素(spoilerタグ、class=”spoiler”)を用意しました。必要に応じて変更してください。
<div id="idWrap"> <h1>画像やテキストをモザイク or ぼかして表示します。</h1> <h2>以下、マウスオーバーでぼかしが若干薄くなり、クリックで元のテキストや画像が表示されます。</h2> <p><spoiler>どうですか?モザイク or ぼかしのテキストが表示されましたか?</spoiler></p> <div align="center"><img src="logo1.jpg" alt="" class="spoiler"></div> </div>
画像やテキストをモザイク・ぼかし表示するデモページ
ソース元:SPOILER ALERT!
ソース元:SPOILER ALERT!
IEには対応してない様ですね。(対応ブラウザはChrome、FireFox、safari)
html上でフォトショやイラレの効果的なことが出来るみたいです。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告