記事一覧はページ下部の「Bloggerの記事に目次をJavaScriptで自動的に付与するシリーズ」よりどうぞ。
「見出しに<>が入っているとその部分が表示されない不具合を修正」で作成したJavaScriptをClosure Compiler（Googleが提供しているコード圧縮・最適化ツール）で圧縮・最適化したソースコードを配布します。
ソースコード：
<!-- 目次の自動生成 START -->
<b:if cond='data:blog.pageType == "item"'>
<!-- 投稿ページにのみ目次を表示する -->
<script type='text/javascript'>
//<![CDATA[
<!--
var min_auto_generated_index_items=2;generateIndex();function generateIndex(){for(var a=document.getElementsByTagName("div"),d=0;d<a.length;d++)if(0==a[d].id.lastIndexOf("post-body-",0)){generateIndexForObj(a[d]);break}}
function generateIndexForObj(a){function d(a){for(var b=0;b<a.childNodes.length;b++){var c=a.childNodes[b].tagName;void 0!==c&&(c=c.toLowerCase(),0==c.lastIndexOf("h",0)&&(""==a.childNodes[b].id&&(a.childNodes[b].id="auto-generated-index_target"+e),c=Number(c.substr(1,c.length-1)),f+='<div id="auto-generated-index_content_h'+c+'"><a href="#'+a.childNodes[b].id+'">'+a.childNodes[b].innerHTML+"</a></div>\r\n",e++));d(a.childNodes[b])}}var f="",e=0;d(a);e>=min_auto_generated_index_items&&(a.innerHTML=
'<div id="auto-generated-index"><div id="auto-generated-index_title">目次</div><div id="auto-generated-index_content">'+f+"</div></div>"+a.innerHTML)};
//-->
//]]>
</script>
</b:if>
<!-- 目次の自動生成 END -->
スタイルシート：
#auto-generated-index_title
{
border-style:solid;
border-width:1px;
border-color:#999999;
background-color:#eeeeee;
font-weight:bold;
margin:10px 100px 0px 20px;
}
#auto-generated-index_content
{
border-style:solid;
border-width:1px;
border-color:#999999;
background-color:#ffffff;
font-weight:normal;
margin:0px 100px 20px 20px;
}
#auto-generated-index_content_h1
{
text-indent:1em;
}
#auto-generated-index_content_h2
{
text-indent:2em;
}
#auto-generated-index_content_h3
{
text-indent:3em;
}
#auto-generated-index_content_h4
{
text-indent:4em;
}
#auto-generated-index_content_h5
{
text-indent:5em;
}
#auto-generated-index_content_h6
{
text-indent:6em;
}
ソースコードの効率化・圧縮について
効率化・圧縮前のファイル：2.66 KB (2,732 バイト)効率化・圧縮後のファイル：877 バイト (877 バイト)
効率化・圧縮の前後を比較すると約1/3くらいのサイズになっています。
Bloggerへの設置方法
「シリーズ完結 - 最適化済みサンプル配布 - Bloggerの記事に目次をJavaScriptで自動的に付与する」と内容は同じですが参考のためにそのまま載せておきます。
Bloggerのソースコード
テンプレートのHTMLのカスタマイズにより、記事よりも後の位置に 目次生成用の JavaScriptを記載しました。
赤枠で囲った位置に目次生成用の JavaScriptを追加
少し上に記事が表示される部分である”ブログの投稿”の widget がある。
イメージ的には以下の位置に 目次生成用の JavaScriptを追加したことになります。
ブログの投稿の下に 目次作成用の JavaScript を挿入した
※ テンプレートのHTMLのカスタマイズは慎重に行ってください。この操作により、ブログの表記が崩壊する恐れがあります。編集する前にテンプレートのHTMLを保存しておき、いつでももとに戻せる状態にしておくことが理想的です。
スタイルシート
マイブログ→テンプレート→カスタマイズ→上級者向け→CSSを追加にて、カスタム CSSのテキストボックスにスタイルシートを記述します。まとめ
今回は「見出しに<>が入っているとその部分が表示されない不具合」を修正しました。もし他にも不具合を見つけた方がいらっしゃいましたら、コメント欄等で報告して頂ければ幸いです。
「Bloggerの記事に目次をJavaScriptで自動的に付与する」シリーズ
- そうだ！Bloggerの記事に目次を付けよう！
- 記事の要素の調査 - 準備編(1) - Bloggerの記事に目次をJavaScriptで自動的に付与する
- ページを開いたときに自動的に目次を付与する - 準備編(2) - Bloggerの記事に目次をJavaScriptで自動的に付与する
- 記事のページにのみ目次を付与する - 準備編(3) - Bloggerの記事に目次をJavaScriptで自動的に付与する
- とりあえず目次というテキストを挿入してみる(テスト環境) - 実践編(1) - Bloggerの記事に目次をJavaScriptで自動的に付与する
- とりあえず目次というテキストを挿入してみる(実際の環境) - 実践編(2) - Bloggerの記事に目次をJavaScriptで自動的に付与する
- とりあえず見出しを列挙してみる(テスト環境) - 実践編(3) - Bloggerの記事に目次をJavaScriptで自動的に付与する
- とりあえず見出しを列挙してみる(実際の環境) - 実践編(4) - Bloggerの記事に目次をJavaScriptで自動的に付与する
- 見出しにアンカーを付与し、目次から見出しへジャンプできるようにする(テスト環境) - 実践編(5) - Bloggerの記事に目次をJavaScriptで自動的に付与する
- 見出しにアンカーを付与し、目次から見出しへジャンプできるようにする(実際の環境) - 実践編(6) - Bloggerの記事に目次をJavaScriptで自動的に付与する
- シリーズ完結 - 最適化済みサンプル配布 - Bloggerの記事に目次をJavaScriptで自動的に付与する
コメントを投稿 （ここをクリックしてコメント投稿フォームを表示）
コメント投稿機能について