はてなブログで、HTML要素を折りたたむ

ブログ記事内のソースコードを折りたためるようにしたくて、あれこれ調べてみた。
はてな記法を使いつつ、最小限のHTMLタグを自分で追加することで、折りたたみを実現できたので、手順を書いておく。

1. 春木屋さんの fold.js を入手する
2. Googleドライブでjsファイルをホスティングする
3. はてなブログからjsファイルにリンクする
4. 記事中の折りたたみたい部分にHTMLタグを追加する

折りたたみの例 ↓

[コード1を表示する]

def hoge():
    print('hello')
    print('world')

[コード2を表示する]

def fib(n):
    a, b = 0, 1
    while a < n:
        print(a, end=' ')
        a, b = b, a+b
    print()

1. 春木屋さんの fold.js を入手する

ここから fold.js をダウンロードする。
→外部スクリプト：要素の汎用折りたたみ

同様のJavaScriptはいくつかあるが、一番簡単でわかりやすいのが、この fold.js だと思う。
便利なスクリプトの公開に感謝！

2. Googleドライブでjsファイルをホスティングする

昨日の記事を参考に、fold.jsをGoogleドライブにアップロードしてURLを取得する。
→GoogleドライブでCSSやJavaScriptファイルをホスティングする

もちろんレンタルサーバー等の契約があるなら、そっちにアップロードしてもいい。

3. はてなブログからjsファイルにリンクする

この1行をブログに埋め込む。

<script src="{先ほどの fold.js のURL}"></script>

一つの記事だけで使うなら、記事の本文にそのまま書いてしまってもいい。

複数の記事で使うなら、はてなブログのダッシュボードから、[デザイン]→[カスタマイズ]→[ヘッダ]と進み、タイトル下の「HTMLを記述できます」という部分に書く。

（追記：これだと、スマホ版に対応できないので修正）
複数の記事で使うなら、はてなブログのダッシュボードから、[デザイン]→[カスタマイズ]→[記事]と進み、[記事上下のカスタマイズ]→[記事上]という部分に書き、[スマートフォン版にも表示する]にチェックを入れておく。

4.記事中の折りたたみたい部分にHTMLタグを追加する

fold.js の使い方はとてもシンプルだ。

• 折りたたみたいHTML要素に class="js_close" を追加する。
• その一つ前のHTML要素がスイッチに割り当てられる。

＜span＞をスイッチ要素、＜div＞を折りたたむ要素とすると、このようになる。

<span>[ここをクリック]</span><div class="js_close">
ここに書いたものが折りたたまれる。
テキストでも画像でも、なんでもOK
</div>

ブログでは、記事を公開するときに自動でHTMLタグが挿入されるので、スイッチ要素の終わり＜/span＞と折りたたむ要素＜div＞の間は、改行やスペースを入れず、ひっつけて書いておこう。

最初の例だと、こんな記述になる。（コードの部分は、はてな記法を使っている。）

 <span>[コード1を表示する]</span><div class="js_close">
 >|python|
 def hoge():
     print('hello')
     print('world')
 ||<
 </div>

 <span>[コード2を表示する]</span><div class="js_close">
 >|python|
 def fib(n):
     a, b = 0, 1
     while a < n:
         print(a, end=' ')
         a, b = b, a+b
     print()
 ||<
 </div>

さらにカスタマイズするには

• class="js_open" とすると、最初は開いていて、クリックすると折りたたまれる。
• スイッチ要素に title="～" を付ければヒントを追加できる。
• スイッチ要素のマウスオーバー時の色を変更するには、fold.jsを編集する。

なんでも折りたたもう（使用例）

[テキスト]

一画面固定のアクションゲーム。小さなキャラをちまちま動かして画面上部のEXITから出るか、全ての敵キャラを倒せばクリア。仲間を見つけたら、仲間を連れてEXITから出れば、次の面からそのキャラも使えるようになる。敵を一人だけ残して、仲間をすべてEXITに連れ出して、それから残った敵を倒すというのが理想だが、時間制限もあるので、わりと難しい。

[テーブル]

正式名称	武器	呼び方
アスラ	槍	土人
バーバル	弓	じじい
ウォーターナイト	魔法	水のやつ
マッドパピー	バズーカ	バズーカのやつ

[画像も折りたためる]

[Amazon商品紹介も]

ゲイングランド MD 【メガドライブ】

うまくいかない場合

スイッチが機能しないときは、HTMLのソースコードを見て、スイッチ要素と折りたたみたい要素の間に、別のHTMLタグが入っていないか確認しよう。
はてなキーワード自動リンクによって、予期せぬ場所にHTMLタグが挿入されることもあるので注意。
また、ページ読み込み直後はスイッチが反応しないことがある。JavaScriptの読み込みに時間がかかっているだけかもしれないので、少し待ったり、あまりに遅い場合はページをリロードしてみよう。