Photo by Lukas from Pexels
先日作成した記事で、記事の一部を折りたたんで、必要なときだけ展開して表示させるような仕組みを取り入れました。
ちょっとひとつの記事が長くなってしまったので、参考情報的な部分は必要な人だけ表示できるようにして、読みやすくしたかったのです。
いつも仕事で使っているNotes（IBMのグループウェアのクライアントソフト；ちなみにIBMからインドの会社に売却するようですが）とかだと当たり前の機能なんですけどね。
はてなブログでは、記事を二分割して後半を折りたたむ「続きを読む」という記法が使えますが、これはトップページのみで有効な機能で、要するにトップページを「全文表示」に設定していても、「一覧表示」のように記事の一部のみ表示させて、全文を読みたいときは個別記事ページに飛ばす、という動きを実現するものなので、ちょっと今回の目的では使えません。
そこでHTMLとJavaScriptを使って実装してみました。
HTMLを使って記事の一部を非表示にしたり表示したりするには、対象の記事部分をdivタグで囲み、そのdiv要素のstyle属性のdisplayプロパティをnoneにしたりblockにしたりすることで実現できます。
<div style=”display: block;”>
この部分は表示されます。<br />
この部分は表示されます。<br />
この部分は表示されます。<br />
</div>
<div style=”display: none;”>
この部分は表示されません。<br />
この部分は表示されません。<br />
この部分は表示されません。<br />
</div>style属性は簡単なJavaScriptで変更できるので、例えば特定の要素のonclick属性にそのJavaScriptを書いておけば、その要素をクリックしたら記事の表示、非表示を切り替えることができます。
以下の例では、記事の表示、非表示を切り替える要素の表現を少し凝って、表示、非表示に伴って▼記号を回転させるようにしています。
（IBMのNotesに敬意を表して･･･）
<!-- 折りたたみセクションポインタ -->
<p style="cursor:pointer;color:blue;"
onclick="obj=document.getElementById('section1').style;
objT=document.getElementById('open1').style;
if (obj.display==='none'){obj.display='block';objT.transform='rotate(0deg)'}
else{obj.display='none';objT.transform='rotate(-90deg)'}">
<span id="open1" style="display:inline-block;transform:rotate(-90deg);">
▼</span>ここをクリック</p>
<!-- 折りたたみセクションポインタ（ここまで） -->
<div id="section1" style="display:none;">
この部分に表示、非表示させたい記事部分を記載します。<br />
この部分に表示、非表示させたい記事部分を記載します。<br />
この部分に表示、非表示させたい記事部分を記載します。<br />
この部分に表示、非表示させたい記事部分を記載します。<br />
この部分に表示、非表示させたい記事部分を記載します。<br />
</div>
上記HTMLを実際に表示されると以下のようになります。
▼ここをクリック
グレーの枠内のHTMLを記事にコピペすれば簡単に使えると思いますので、よかったらお試し下さい。
なおひとつの記事の中の複数の場所で使う場合は、div idの’section1’と、span idの’open1’（それぞれ2カ所）は、使う場所毎にユニークな名前を付けてやる必要があります。
また、はてなブログの編集で、はてな記法あるいはMarkdown記法を使っている場合、HTMLのdivタグで囲まれた範囲内では簡易記法が無効なので注意が必要です。
改行は<br />、見出しは<h1>～</h1>、<h3>～</h3>などのHTMLタグを使うことになりますので、divタグをよく使う場合は混乱しないよう、見たままモード（のHTMLの編集モード）かHTMLモード（はてなブログProのみ）を使う方がいいのかも知れません。
