Bloggerの記事に目次を作る方法

Bloggerには自動で目次を作ってくれる機能がありません。

そのため記事に目次をつける場合、外部のプラグイン(外から読み込むもの)を導入するか、手動で導入する必要があります。

外部のプラグインを導入する場合、自動で全ての記事に目次を作ってくれるものや、デザインがあらかじめ揃ってるものもあります。

しかし外部のプラグインを導入することにより、ブログの読み込み速度が遅くなってしまいます。

また、文字数の多い記事の場合に目次は有効で、少ない文字数の記事だと逆に邪魔に感じてしまいます。

多くのブログでは、目次が必要な記事の方が少ないでしょう。

なので、今回はBloggerに手動で目次を作る方法についてまとめていきます。
コピペ用テンプレも作ったなび!
*Bloggerの新テーマ【Orange ZELO】に自動目次機能を追加しました。詳しくはこちらをご覧ください。

>>自動目次機能を追加しました!【Orange ZELO】

Bloggerで目次を作ろう

今回は例として、本記事の下の方に飛ぶ目次を作ってみました。

このような目次が作れるようになります。

目次:
ここに飛ぶよ!
・戻るためのめじるじ!

『ここに飛ぶよ!』を押すと、記事の下に飛ぶことができます。
飛んだ先には戻るボタンがあるなび!あそんでみるなび〜!
それでは作っていきましょう。



まず記事を書き、目次の項目にしたい場所に見出しをつけます。

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です。本記事初めのような見出しができると思います。

あとは記事を公開して試してみましょう。

ここに飛ぶよ!




Bloggerなびでは、こちらの記事にこの目次をアレンジしたものを設置しています。

>>Blogger最強テーマ【OrangeZELO】の機能・特徴を紹介します

コメント