spoiler.jsを使って画像やテキストをモザイク・ぼかし表示する方法｜DAD UNION

spoiler.jsを使って画像やテキストをモザイク・ぼかし表示する方法をご紹介します。
該当箇所の画像やテキストをモザイク・ぼかし効果で表示します。

Contents

画像やテキストをモザイク・ぼかし表示するCSSの記述
spoiler.jsを使って画像やテキストをモザイク・ぼかし表示するJavaScriptの記述
画像やテキストをモザイク・ぼかし表示するHTMLの記述
画像やテキストをモザイク・ぼかし表示するデモページ
ソース元：SPOILER ALERT!

画像やテキストをモザイク・ぼかし表示する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>