はてなブログでソースコードを折りたたむ方法

ブログにソースコードを載せる時に、短いソースコードなら「>||」と「||<」で囲うことで綺麗にカラーリングされたソースが表示されます。

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>

実際にソースコードを折りたたんだサンプルは次のようになります。つぎの「ソースコードを展開する」という文字をクリックしてみて下さい。

▶ソースコードを展開する

int main(void)
{
	printf("hello, world");
}

　

今回はこちらの記事を参考にさせていただきました。
fukafuka295.jp