記事の要素の調査 - 準備編(1) - Bloggerの記事に目次をJavaScriptで自動的に付与する

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

Blogger の記事に目次を自動的に付与するためには、まず目次を挿入する箇所や目次として表示する見出しの収集対象箇所を見極める必要があります。

早速 Chrome の要素を検証機能で Blogger の記事を調べてみましょう。

Blogger の記事の要素

調べてみるとBloggerの記事は上記のように次の <div>要素に囲まれていることがわかりました。

<div class="post-body entry-content" id="post-body-xxxxxxxxxxxxxxxxxxx" itemprop="description articleBody"> … </div>

従って、目次の挿入箇所を突き止めるには div 要素の id が post-body- で始まっているものを特定して、その要素に対して目次を挿入すれば出来そうですね。

同様に、目次として表示する見出しの収集対象箇所も div 要素の id が post-body- で始まっているものを特定して、その要素の中に記載されている見出し要素を列挙すればよさそうです。

そういった処理なら、JavaScriptで比較的簡単に記載できるので、意外とスムーズに目次の自動挿入・自動生成が行えそうです。

次は、ページを開いたときに自動的に目次を付与する方法を検討します。

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

2014年4月24日木曜日