jquery.flip-quote.jsでウェブサイトの引用文をハイライト表示する簡単ガイド｜DAD UNION

ウェブサイト上で引用文を目立たせたいですか？ jquery.flip-quote.jsを使用することで、引用符（“”）内のテキストをハイライトし、インタラクティブな演出を加える方法をご紹介します。このツールを使えば、ユーザーがページをスクロールすると引用文が効果的に表示され、クリックすることで色が変わります。この記事では、CSS、HTML、JavaScriptの各部分にわたって、このスクリプトを実装する方法を詳しく解説します。

Contents

CSSで魅力的な引用文のスタイルを作成
HTMLで引用文をハイライト表示
JavaScriptでインタラクティブな機能を追加
jquery.flip-quote.jsを使って文章の引用符のテキストを引用しハイライト演出表示するデモページ
ソース元：jQuery Flip-Quote
まとめ

CSSで魅力的な引用文のスタイルを作成

まずは、jquery.flip-quote.cssをウェブページに組み込み、基本的なスタイリングを行います。
ここでは、フォントサイズや行間、余白などの基本的なスタイルを設定し、引用文が際立つようにします。

<link href="jquery.flip-quote.css" rel="stylesheet"/>
<style>
body {
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.8em;
}
h1{
  text-align: center;
  font-size: 18px;
  line-height: 1.8em;
  padding: 20px 0 200px 0;
}
#main{
  padding: 0 0 200px 0;
  width: 700px;
  margin: 0 auto;
}
</style>

HTMLで引用文をハイライト表示

次に、HTMLを使って、文章の引用符とハイライト表示するエリア（class=”container”）をマークアップします。
この部分では、ウェブページのメインコンテンツエリアと引用文を表示するコンテナを設定し、jquery.flip-quote.jsの効果を最大限に活かせるようにします。

<div id="main">
  <h1>jquery.flip-quote.jsを使って文章の引用符（“”）内のテキストをハイライトテキストとして引用し、下にスクロールするとハイライト箇所が反転演出表示します。<br>ハイライト箇所をクリックすると文章の引用符テキストに色が付きます。</h1>

  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト<q>ハイライトハイライトハイライトハイライトハイライトハイライト</q>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <div class="container"></div>
<br>
<br>
<br>
<br>
<br>
  <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと<q>はいらいとはいらいとはいらいとはいらいとはいらいとはいらいとはいらいとはいらいとはいらいと</q>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p>
  <div class="container"></div>
</div>

JavaScriptでインタラクティブな機能を追加

ここでの主な目的は、jquery.flip-quote.jsを使って引用文にインタラクティブな動作を追加することです。
このステップでは、jQueryライブラリとjquery.flip-quote.jsを読み込み、引用文の動きをカスタマイズするオプションを設定します。

$(‘文章エリア’).flipQuote({オプション})を記述します。オプションでは「container:ハイライト表示エリア」「quoteSelector:引用符エリア」を記述します。

<script src="jquery-3.1.1.min.js"></script>
<script src="jquery.flip-quote.js"></script>
<script>
$('#main').flipQuote({
  quoteSelector: 'q',
  container: '.container'
});
</script>