Blogger:見出しから目次を自動生成 その1 ~ 漫博堂    

11/14/2013

Blogger:見出しから目次を自動生成 その1



目次をクリックすると、読みたい場所まで飛ばしてくれる機能、ページ内リンク。
驚きました!それを自動で作ってくれるスクリプトがあるんですね・・・!




jQueryを使って見出しから目次を自動生成できると知り、Bloggerのテンプレートで試してみました。

JavaScriptをテンプレートにコピー

参照サイトへ行き、JavaScriptの部分をコピー。
そのままBloggerのテンプレートに貼りつけるとエラーが出るので、

Escape HTML Entities へ行き、
Enter/paste text to HTML Escape:の中にペースト、

右側のチェックボックスの、
□Replace < > "
□Escape special characters (& and non latin chars)
にチェックを入れます。



そうして出たソースを、Bloggerのテンプレート編集画面の
</head>タグの前にペーストします。
<script>タグは追加で記入します。

<script>ここにコピーしたソース</script>


 cssをテンプレートにコピー

参照サイトのcssをコピー。
Bloggerテンプレートの<b:skin>タグの中にペーストします。
<b:skin>ここにコピーしたcssソース</b:skin>


 記事の投稿をHTMLで編集

テンプレートを保存したら、ブログの記事を書きます。
見出し1</h3>
文章文章文章文章文章文章 <br /> <h3>
ここは見出しに影響されない</h3>
<br />
文章文章文章文章文章文章<br />
<div class="tocChild">
<div id="toc">
</div>
<h3>
見出し1</h3>
文章文章文章文章文章文章 <br />

<h4>
見出し2</h4>
文章文章文章文章文章文章<br />

<h5>
見出し3</h5>
文章文章文章文章文章文章


<div id="toc"></div> の場所に目次が生成されます。

目次に反映させたい記事と見出しは、
<div class="tocChild">ここに書きます</div>



 補足

見出しをh3のみに統一しても、動作はするようです・・・?



見出しから目次を作成する、方法その2もご紹介してます。


スポンサードリンク
       

 
 

0 コメント :

コメントを投稿

 

Copyright @ 2013 漫博堂 .