JavaScript

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

  /

今回は、spoiler.jsを使って画像やテキストをモザイク・ぼかし表示する方法をご紹介します。
この技術を使うことで、特定の箇所を隠しつつも、必要な時に見せることができるようになります。

ウェブページ上で特定の情報を隠す必要がある場面は多々あります。例えば、スポイラー情報を含む記事や、重要な内容を一時的に隠したい場合などです。spoiler.jsは、こうしたニーズに応えるための便利なツールです。このブログ記事では、具体的なCSSやJavaScriptのコードを用いて、spoiler.jsをどのように使用するかを詳しく説明します。

Contents

画像やテキストをモザイク・ぼかし表示するCSSの記述

まず、基本的なCSSの設定を行います。このCSSは、ページ全体のスタイルを整えると同時に、spoiler.jsによってモザイク・ぼかし効果を適用するためのものです。

<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の記述

次に、必要なJavaScriptファイル、jquery.min.js、spoiler.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の記述

HTMLの記述では、モザイクやぼかしを適用したい要素にspoilerタグやclass=”spoiler”を設定します。このタグやクラス名を使用することで、spoiler.jsが自動的に効果を適用します。

<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!の公式ドキュメントをご覧ください。以下のリンクからアクセスできます。

ソース元：SPOILER ALERT!

なお、このプラグインはChrome、Firefox、Safariで動作しますが、IEには対応していませんのでご注意ください。

まとめ

今回はspoiler.jsを使って、画像やテキストにモザイク・ぼかし効果を適用する方法をご紹介しました。この技術を使うことで、閲覧者に不要な情報を隠し、必要な時に見せることができます。実際に試してみて、その効果を体験してみてください。

このブログ記事を通じて、簡単にspoiler.jsを使ってモザイク・ぼかし効果を実現できることがお分かりいただけたかと思います。是非、自分のプロジェクトに応用してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

spoiler.js モザイク
関連記事