Blogger関連の良いもの見つけた：目次編

Bloggerを初めて数日、他の人のブログを見ていてやはり『「目次」がほしい！』と思いました。

だってどんなドキュメントにも目次はあるじゃないですか！

しかし、Bloggerの機能を見ていると、「UIで簡単に作れない」。「いや、 IT業界に居る人間なんだからHTML書けよ」と思われるかもしれませんが、「毎回、ブログ書く度につくるのだるい！！！！！」ということでググりましたｗ

そしたら見つけました。Script組んでくれている人。そんな神様のScriptをご紹介します。

どこにあるか

最初にどこにあるかを紹介します。

以下のリンク先にあります。

※ ここで、スクリプトを転記しません。以下のサイトに行ってみてください。

[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）

設定方法

[テーマ]-

の[▼]-[HTML を編集]を押して、テーマのHTMLを開きます。

「</head>」をCtrl-fを押して検索し、</head>の上に当該サイトのスクリプトのHTMLを入れます。

保存ボタンを押して、目次プラグインの設定が完了です

簡単ですね！！！！！

使い方

見出し（h2～４）が目次になる

使い方は簡単で、Bloggerで見出しに文字を書くだけです。

始めて置いた見出しの上に目次が表示されます。

※ 主見出し、小見出しではなく見出しが必要です

HTMLビューを使う

Bloggerの投稿時に左上の鉛筆ボタンを押すとビューが変えられます。

そこでHTMLビューに変更すると、HTMLを直接修正出来ます。

目次を作る場合はある程度このHTMLビューを使わないとうまくいかない場所が出てきます。

HTMLフォーマッター

HTMLビューを開くと、改行のないHTMLが表示されるのでギョッとします。

しかし、ご心配なくフォーマッターがちゃんと用意されてます

上記の[Ξ]のようなアイコンを押すとその場でフォーマッターが動き、HTMLが整形されます。

上手くいかない場合

デフォルトの場合のうまくいかなかった例を提示いたします。

※ 私が上手くいかなかったものなので、他にもあるかもしれません。

テーマのHTML保存時にエラーが出た

テーマのHTMLに目次プラグインを入れて、保存ボタンを押したときに、

”The widget settings in widget with id <b>AdSense1</b> is not valid. An internal error occurred. Please try again."

というメッセージが出ました。

調べてみたところ、広告のプラグインが関連付けられてないようで起こられてます。

気にしないで良いです。ちゃんとプラグインは保存されています。

参考：お客様のブログは AdSense に関連付けられていません。

見出しが出ない

見出し（h2タグ）が2つ以上ないと目次が自動で作成できないようです。

見出しを2つ以上おいてください。

また、小見出しや主見出しで作っていたりしませんか？

※ 私は小見出しで作ってて、「あれぇ～？」ってなりました

何もない見出しが出来る

h2タグなどが空っぽの状態で存在しています。

HTMLビューで余分なh2タグを削除しましょう。

※ 作成ビューで作って居たら結構できました。。。

2段目、3段目の見出しが出ない

見出しの中に小見出しがないと作成されません。

作成ビューだとわからないのですが、HTMLビューで見たときに、h2タグが囲われているdivタグ内にh3がないと見出しが出ませんでした。

<div>

<h2>見出しです</h2>

<div>

<h3>小見出しです<h3>

</div>

みたいになってないとダメということです

最後に

今回は、Bloggerが始めた人（である私）が最初に欲しくなる目次のプラグインを紹介させていただきました。

また、何か欲しくなったらググりって紹介します！ｗ

IT社員の歩み

このブログを検索