目次にヘルプボタンを追加 - 2nd - Bloggerの記事に目次をJavaScriptで自動的に付与する

序章

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


2nd シリーズでは、1st シリーズで作成した目次機能に基本的な機能追加を行います。

今回の目的

2nd シリーズ第５回目の今回は以下の機能を実装します。

目次にヘルプボタンを追加し、ヘルプボタンを押すことで公式サイトへ飛べるようにして目次作成機能の最新情報や様々な情報を得られるようにする。

今回の機能実装のポイント

目次の右上にヘルプボタン(?)を追加して、目次についての情報にアクセスできるようにします。

アクセス先のページとして、次のページを作成しました。

Dr.ウーパのコンピュータ備忘録: Bloggerの記事に目次をJavaScriptで自動的に付与する - サポートページ
http://upa-pc.blogspot.jp/p/addindex.html

修正後のスタイルシートとコードは次のようになりました。

スタイルシート

#auto-generated-index_help
{
    float:right;
    font-weight:bold;
    border-width:1px;
    border-style:solid;
    width:1em;
    text-align:center;
}

コード

html_index = "<div id=\"auto-generated-index\"><div id=\"auto-generated-index_title\">" + index_title + "<span id=\"auto-generated-index_help\"><a href=\"http://upa-pc.blogspot.jp/p/addindex.html\" title=\"この目次について\" rel=\"nofollow\">?</a></span></div><div id=\"auto-generated-index_content\">" + html_item + "</div></div>";

結果

以上のコードにより、次のように目次の右上にヘルプボタンを追加することが出来ました。

目次 : ヘルプボタンの追加

次回は「完成コード配布」を行います。

修正

2014/12/17

• "この目次について"のリンクに rel="nofollow" を追加

---

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