そのため記事に目次をつける場合、外部のプラグイン(外から読み込むもの)を導入するか、手動で導入する必要があります。
外部のプラグインを導入する場合、自動で全ての記事に目次を作ってくれるものや、デザインがあらかじめ揃ってるものもあります。
しかし外部のプラグインを導入することにより、ブログの読み込み速度が遅くなってしまいます。
また、文字数の多い記事の場合に目次は有効で、少ない文字数の記事だと逆に邪魔に感じてしまいます。
多くのブログでは、目次が必要な記事の方が少ないでしょう。
なので、今回はBloggerに手動で目次を作る方法についてまとめていきます。
コピペ用テンプレも作ったなび!
*Bloggerの新テーマ【Orange ZELO】に自動目次機能を追加しました。詳しくはこちらをご覧ください。>>自動目次機能を追加しました!【Orange ZELO】
Bloggerで目次を作ろう
今回は例として、本記事の下の方に飛ぶ目次を作ってみました。
このような目次が作れるようになります。
『ここに飛ぶよ!』を押すと、記事の下に飛ぶことができます。
飛んだ先には戻るボタンがあるなび!あそんでみるなび〜!
それでは作っていきましょう。
まず記事を書き、目次の項目にしたい場所に見出しをつけます。
Bloggerの記事編集画面を『HTML』に切り替え、目次の項目にしたい部分にid='toc(項目数)'とつけていきます。
idをつけたら、記事中の目次を作りたい部分にこのHTMLを貼り付けます。
そしたら、記事編集画面を『HTML』から『作成』に切り替えてみましょう。
目次のhtmlを貼り付けたところが次のように表示されていると思います。
記事編集画面の右側にパーマリンクという部分があると思うので、そこから記事のURLを取得しましょう。
『自動パーマリンク』と『カスタムパーマリンク』がありますが、『自動パーマリンク』のままで大丈夫です。
取得できたら、作成した目次の『目次:』とかかれたところにカーソルをおき、1度改行をします。
記事編集画面からリンクを選択します。
表示するテキストに『目次の項目』、ウェブアドレスに『コピーしたパーマリンク + タグにつけたid』を次のように書きます。
これでOKです。本記事初めのような見出しができると思います。
あとは記事を公開して試してみましょう。
Bloggerの記事編集画面を『HTML』に切り替え、目次の項目にしたい部分にid='toc(項目数)'とつけていきます。
tocは"Table of contents"つまり目次のことなび!
(項目数)のところは始めを1として、順番につけていきます。<h2 id='toc1'>ここに飛ぶよ!</h2>
idをつけたら、記事中の目次を作りたい部分にこのHTMLを貼り付けます。
<div style="background-color: white; border-radius: 8px; border: 2px solid #888; margin: 0 24px; padding: 16px 24px;">
<div style="color: #888888; font-size: 20px;">目次:</div>
</div>
そしたら、記事編集画面を『HTML』から『作成』に切り替えてみましょう。
目次のhtmlを貼り付けたところが次のように表示されていると思います。
目次:
記事編集画面の右側にパーマリンクという部分があると思うので、そこから記事のURLを取得しましょう。
『自動パーマリンク』と『カスタムパーマリンク』がありますが、『自動パーマリンク』のままで大丈夫です。
取得できたら、作成した目次の『目次:』とかかれたところにカーソルをおき、1度改行をします。
表示するテキストに『目次の項目』、ウェブアドレスに『コピーしたパーマリンク + タグにつけたid』を次のように書きます。
これでOKです。本記事初めのような見出しができると思います。
あとは記事を公開して試してみましょう。
コメント