JavaScript

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

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

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>

jquery.flip-quote.jsを使って文章の引用符のテキストを引用しハイライト演出表示するデモページ

jquery.flip-quote.jsを使って文章の引用符のテキストを引用しハイライト演出表示するデモページ

ソース元:jQuery Flip-Quote

jQuery Flip-Quote

 

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