コピペOK！はてなブログで折りたたみアコーディオンボタン＆テキストの作り方

折りたたみアコーディオンボタン＆テキストの作り方を紹介します。

以前上げたこちらのエントリで、ネタバレのあらすじをアコーディオンテキストにして、クリックしないと読めないようにしました。

www.secret-base.org

テキストだけじゃなく、センシティブな画像や虫画像を上げたい時などにも使えると思います。

サンプル

↓クリックで表示↓

ここに隠して表示したい内容を書き込む。

コード

準備

ダッシュボードから「設定」→「詳細設定」を開き、
「要素にメタデータを追加」
のところに下記コードを追加

<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?v=1.12.4"></script>

記事内

アコーディオンボタンを追加したい箇所に下記のコードをコピペすればOKです。

<div onclick="$(this).next().slideToggle();">
<a style="cursor:pointer;padding: 8px;background: #fa5;border-radius: 8px;color: #fff;">↓クリックで表示↓</a>
</div>
<div id="oritatami" style="display:none;">

ここに隠して表示したい内容を書き込む。

</div>

解説

jQuery

<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?v=1.12.4"></script>

jqueryははてなブログのカスタマイズには欠かせませんのでダッシュボード→設定の「head要素にメタデータを追加」のところに追加しておくと良いです。

<div onclick="$(this).next().slideToggle();">

「クリックしたら次の要素をトグル」というjQueryです。
なので、このdiv閉じタグの下に空白行があるとpタグが追加され、正常に動作しなくなります。

css

<a style="cursor:pointer;padding: 8px;background: #fa5;border-radius: 8px;color: #fff;">

#fa5はrgb値、ここの値を変えれば

赤いボタン（#f00）　や

青いボタン（#00f）

なども思いのままに作れます。

cssを理解できている人なダッシュボードの「デザイン」→「カスタマイズ」→「デザインcss」の箇所にまとめて記載して、本文にはclassで記載する方が良いでしょう。

おねがい

ホント、記事の完パクは勘弁しておくんなまし！よろしくたのんますよ！

まとめ

アコーディオンボタンで隠されたコンテンツは雑誌で言えば袋とじ、読者の皆様にワクワクを届けてみませんか？

Roland ローランド アコーディオン FR-1XB BK ブラック

それではまた！さよならいち・∀・)ノ