ブログにソースコードを載せる時に、短いソースコードなら「>||」と「||<」で囲うことで綺麗にカラーリングされたソースが表示されます。
int main(void) { printf("hello, world"); }
ソースコードが長くなってくるとスクロールするだけでも大変ですし、ブログの記事も読みにくくなってしまいます。
そこで、はてなブログの記事でソースコードを折りたたむ方法を紹介します。
ソースコードを折たたむ方法
記事の中でソースコードを折りたたみたい部分に次のHTMLを貼り付けてください。はてな記法でもHTML記法でも同じように動作します。
<div onclick="obj=document.getElementById('oritatami_part').style; obj.display=(obj.display=='none')?'block':'none';"> <a style="cursor:pointer;">▶クリックで展開</a> </div> <div id="oritatami_part" style="display:none;clear:both;"> 折りたたみたい内容 </div>
実際にソースコードを折りたたんだサンプルは次のようになります。つぎの「ソースコードを展開する」という文字をクリックしてみて下さい。
今回はこちらの記事を参考にさせていただきました。
fukafuka295.jp