はてなブログでの折りたたみ機能の利用方法

本日ははてなブログの使い方です。
記事の一部を折りたたむ手順を備忘録として記事にしておきます。

はてな記法での利用手順

記事を書く際、はてな記法を利用している場合、HTMLタグがそのまま利用できます。
折りたたみを行うHTMLのサンプルは以下の通りです。

<div onclick="obj=document.getElementById('20190720_folding_text').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">クリックで展開</a>
</div>
<div id="20190720_folding_text" style="display:none;clear:both;">
折りたたみテキスト
</div>

1行目と4行目の id は同一名を設定します。サンプルでは'20190720_folding_text'と設定している部分です。
同一ページで同じ id の組合せが存在すると、折りたたみ動作が誤動作してしまいます。必ず一意な id を設定します。

以下のように、はてな記法の本文にHTMLタグを直接描き込みます。

プレビューで確認すると、書き込み箇所が折りたたまれていることがわかります。

クリックで展開

折りたたみテキスト

折りたたみの中にはコード記述や画像も設定できます。

クリックで展開

def main(
  print('test')
  return

main()

クリックで展開

参考ページ

fukafuka295.jp