refirio.org

HTML

HTMLは以下のとおりです。class="hidearea" を設定した場所がネタバレ領域になります。

<p>ここは普通の文章です。</p>
<div class="hidearea">
  <p>ここはネタバレ文章です。</p>
</div>

また、以下のように title 属性も設定すると、ネタバレボタンに表示される文字になるようにしてみます。

<p>ここは普通の文章です。</p>
<div class="hidearea" title="ネタバレ">
  <p>ここはネタバレ文章です。</p>
</div>

CSS

CSSは以下のとおりです。span.hidearea はネタバレボタンのスタイル、div.hidearea はネタバレ領域が表示された時のスタイルです。

「JavaScriptがOFFの時は、ネタバレ領域をドラッグすれば文章を読むことができる」という動作にするため、ネタバレ領域の文字色と背景色は同じにしています。（後ほど、JavaScriptで本文の文字色を変更します。）

<style>
span.hidearea {
  cursor: pointer;
  padding: 3px 10px;
  border: 2px solid #AAAAAA;
  background-color: #EEEEEE;
}
span.hidearea:active, span.hidearea:hover {
  background-color: #AAAAAA;
  color: #EEEEEE;
}
div.hidearea {
  padding: 5px 10px;
  border: 2px solid #AAAAAA;
  background-color: #EEEEEE;
  color: #EEEEEE;
}
</style>

JavaScript

JavaScriptは以下のとおりです。まずはjQueryと、自作プラグインの jquery.hidearea.js を読み込みます。jquery.hidearea.js は、ネタバレボタンを作成してくれるjQueryプラグインです。オプションとしてview（ネタバレボタンに表示される文字）とcolor（ネタバレ領域の文字色）とspeed（ネタバレ領域が表示される時のアニメーション速度）を指定することができます。

<script src="../jquery.js"></script>
<script src="jquery.hidearea.js"></script>
<script>
$(document).ready(function() {
  $('.hidearea').hidearea({
    view: '表示する',
    color: '#000000',
    speed: 'slow'
  });
});
</script>

また、以下のように close: true を指定すると、ネタバレ領域が開閉式になるようにしています。

$(document).ready(function() {
  $('.hidearea').hidearea({
    view: '表示する',
    color: '#000000',
    speed: 'slow',
    close: true
  });
});

プラグイン

jquery.hidearea.js の内容は以下のとおりです。

(function($) {
  $.fn.hidearea = function(option) {
    var settings = $.extend({
      view: 'hidearea',
      color: '#000000',
      speed: null,
      close: false
    }, option);

    $(this).each(function() {
      $(this).before('<p><span class="hidearea">' + ($(this).attr('title') ? $(this).attr('title') : settings.view) + '</span></p>').css('color', settings.color).hide();
    });

    $('span.hidearea').click(function() {
      if (settings.close) {
        $(this).parent().next().toggle(settings.speed);
      } else {
        $(this).hide().parent().next().show(settings.speed);
      }
    });

    return this;
  };
})(jQuery);

まずは

$.fn.hidearea = function(option) {
  var settings = $.extend({
    view: 'hidearea',
    color: '#000000',
    speed: null,
    close: false
  }, option);

の部分でオプションを受け取ります。

$(this).each(function() {
  $(this).before('<p><span class="hidearea">' + ($(this).attr('title') ? $(this).attr('title') : settings.view) + '</span></p>').css('color', settings.color).hide();
});

ネタバレ領域を探し、その直前にネタバレボタンを配置します。さらに本文の文字色を指定された色にしてから、ネタバレ領域を非表示にしています。

$('span.hidearea').click(function() {
  if (settings.close) {
    $(this).parent().next().toggle(settings.speed);
  } else {
    $(this).hide().parent().next().show(settings.speed);
  }
});

ネタバレボタンがクリックされたときに実行する処理です。ネタバレ領域が開閉式に指定されている場合、jQueryの toggle() を使ってネタバレ領域の表示・非表示を切り替えます。ネタバレ領域が開閉式に指定されていない場合、ネタバレボタンを非表示にしてからネタバレ領域を表示しています。