jquery.flip-quote.jsを使って文章の引用符のテキストを引用しハイライト演出表示する方法 DAD UNION

jquery.flip-quote.jsを使って文章の引用符（“”）内のテキストをハイライトテキストとして引用し、下にスクロールするとハイライト箇所が反転演出表示する方法をご紹介します。
ハイライト箇所をクリックすると文章の引用符テキストに色が付きます。

Contents

jquery.flip-quote.jsを使って文章の引用符のテキストを引用しハイライト演出表示するCSS記述
jquery.flip-quote.jsを使って文章の引用符のテキストを引用しハイライト演出表示するHTML記述
jquery.flip-quote.jsを使って文章の引用符のテキストを引用しハイライト演出表示するJavaScriptの記述
jquery.flip-quote.jsを使って文章の引用符のテキストを引用しハイライト演出表示するデモページ
ソース元：jQuery Flip-Quote

jquery.flip-quote.jsを使って文章の引用符のテキストを引用しハイライト演出表示するCSS記述

※jquery.flip-quote.cssファイルを読み込みます。文章エリア（#main）の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>

jquery.flip-quote.jsを使って文章の引用符のテキストを引用しハイライト演出表示するHTML記述

※文章エリア（#main）と引用符を引用してハイライト表示するエリア（class=”container”）を用意します。

<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>

jquery.flip-quote.jsを使って文章の引用符のテキストを引用しハイライト演出表示するJavaScriptの記述

※jquery-3.1.1.min.js、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>