コピペでOK｜感想ブログ向け『ネタバレを読む＆隠す』ボタンを作ったよ
色々なブログを読んでいると不意に本や映画やゲームのネタバレが目に入ってつらい思いをしたことはありませんか？
昔ながらの方法だとネタバレ部分の文字を背景色と同じ色にして「以下ネタバレ。反転表示」といった書き方をしていたり。
↓こんな感じ↓
ネタバレ文章ネタバレ文章ネタバレ文章ネタバレ文章
これでもいいんですけどもう少しいい感じに表現したいと思ったので自分用に作ったコピペで簡単に実装できる『ネタバレを読む＆隠す』ボタンをシェアします。
特に目新しい技術とかは使っていません。
感想ブログ向けってタイトルには書いてますが、例えば閲覧注意な画像を普段は見えなくしておいて閲覧者側で見る見ないを選べるにする等、ちょっと変えるだけで色々使えると思います。
CSSやJSが殆どわからない人でもできるだけ簡単に色やフォントサイズを変更できるようにしています。もっとスマートなスクリプトにしたい方は各自変更してください。
以下、サンプル・ソース・設置方法等。
サンプル
（class="netabaretxt"の付いたタグで囲んだところを表示／非表示できます）
ネタバレ文章ネタバレ文章
ネタバレ文章ネタバレネタバレ文章ネタバレネタバレ文章ネタバレネタバレ文章ネタバレ
ネタバレ文章ネタバレ文章
（このように画像も表示／非表示できます）
設置手順・ソース
一応説明も書いてますが基本コピペで動きます。
（1）はてなブログ：設定→詳細設定→headに要素を追加／ライブドアブログ、FC2ブログ、wordpress等も<head>～</head>内に記述してください。
Font Awesomeのアイコンを使うために必要な記述です。
（2）はてなブログ：デザイン→カスタマイズ→デザインCSSに追加／ライブドアブログ、FC2ブログ、wordpress等も各ブログで決められているCSS内に記述してください。
.netabarebtnは「ネタバレを読む！/ネタバレを隠す！」部分の設定です。幅は160pxに設定してますが表示する文字を変更した場合は適当な数値に調整してください。
.netabaretxtはネタバレ本文領域の設定です。背景色、余白の設定だけしてますがネタバレ領域の文字色等もここに設定してください。
（3）はてなブログ：デザイン→カスタマイズ→ヘッダ→タイトル下に追加／ライブドアブログ、FC2ブログ、wordpress等も各ブログのJSを書ける場所に記述してください。
3ヵ所ある<i class="fa fa-exclamation-triangle" style="color:#FFCC00;font-size:2em;"><i>でアイコンのサイズと色を設定できます。
誰でも変更しやすいように直接スタイル指定してますが、Font AwesomeのCSSで用意してあるサイズ指定等のクラスを使う事もできます。
（4）記事内のネタバレを書きたい部分に下記のような感じで設置してください。
.netabaretxtのクラスで囲まれた領域が非表示になります。.netabaretxtを付ければ囲むタグはdivでもpでもOKです。
設置手順は以上です。お疲れさまでした。
