この記事は「そうだ！Bloggerの記事に目次を付けよう！」から始まる一連の「Bloggerの記事に目次をJavaScriptで自動的に付与する」シリーズの構成記事です。
記事一覧はページ下部の「Bloggerの記事に目次をJavaScriptで自動的に付与するシリーズ」よりどうぞ。

以上で「Bloggerの記事に目次をJavaScriptで自動的に付与する」シリーズは完結です。
最後に前回の「見出しにアンカーを付与し、目次から見出しへジャンプできるようにする」で作成したJavaScriptをClosure Compiler（Googleが提供しているコード圧縮・最適化ツール）で圧縮・最適化したソースコードを配布します。

※ このバージョンのバグを修正した新しいバージョンがあります。
「見出しに<>が入っているとその部分が表示されない不具合を修正 - 最適化済みサンプル配布 - Bloggerの記事に目次をJavaScriptで自動的に付与する」

ソースコード：

<!-- 目次の自動生成 START -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 投稿ページにのみ目次を表示する -->
<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].innerText+"</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のソースコード

テンプレートのHTMLのカスタマイズにより、記事よりも後の位置に目次生成用の JavaScriptを記載しました。

blogger_index_insert_template_insert_pos

赤枠で囲った位置に目次生成用の JavaScriptを追加

少し上に記事が表示される部分である”ブログの投稿”の widget がある。

イメージ的には以下の位置に目次生成用の JavaScriptを追加したことになります。

blogger_index_insert_template_insert_pos_design

ブログの投稿の下に目次作成用の JavaScript を挿入した

※ テンプレートのHTMLのカスタマイズは慎重に行ってください。この操作により、ブログの表記が崩壊する恐れがあります。編集する前にテンプレートのHTMLを保存しておき、いつでももとに戻せる状態にしておくことが理想的です。

スタイルシート

マイブログ→テンプレート→カスタマイズ→上級者向け→CSSを追加にて、カスタム CSSのテキストボックスにスタイルシートを記述します。

まとめ

「Bloggerの記事に目次をJavaScriptで自動的に付与する」シリーズはいかがだったでしょうか？

このシリーズを通じて少しずつ目次の機能に肉づけをしていき、最終的に実用的に使える目次の自動作成用 JavaScript を作成しました。

何かこのシリーズの記事に対してもっと詳しく聞きたい点や、今後付け加えたり取り上げてほしい内容がありましたら、コメント等で教えてください！

Dr.ウーパのコンピュータ備忘録

2014年4月24日木曜日

シリーズ完結 - 最適化済みサンプル配布 - Bloggerの記事に目次をJavaScriptで自動的に付与する

ソースコード：

スタイルシート：

ソースコードの効率化・圧縮について

Bloggerへの設置方法

Bloggerのソースコード

スタイルシート

まとめ

「Bloggerの記事に目次をJavaScriptで自動的に付与する」シリーズ

[バグフィックス]

コメントを投稿

おすすめの投稿