Blogger初心者でもコピペで簡単。ブログに目次を設定する方法

こんにちは、Blogger女子見習いのkarafuruです。
Bloggerを使い始めて、1ヶ月が過ぎようとしています。

今日は、ブログに「目次」を設定するカスタマイズです。

・・・といっても、今回はまさに「コピペ」。
このブログの王道と言ってもいいほど、いさぎよくコピペです。

ブログに目次を作るメリット・デメリット

すっきりしたデザインの多いBlogger。
おかげで、とても読みやすいブログが作れます。

読者目線でいいですよね。

でも、アレがない。
読者にとって有効な、アレがない！

目次です。

ブログを書く際には、見出しなどを使って読みやすくしている方がほとんどだと思います。

その見出しを並べて表示することで、いわゆる本の最初についているような「目次」になります。

目次があるメリットは、


まさに「～やすい」ことだらけ。

逆に、目次があるデメリットは、


うん。
実はわたしも、ひとのブログを読みに行った際には、あまり目次を利用しません。

本文を先に読みたいので、目次は完全無視です。

そういった場合、あまりたくさん項目が並んだ目次だと、存在感がありすぎて、はっきりいって邪魔。
スクロール、めんどいなあ・・・と思っちゃう。

このメリット・デメリットを考えたとき、一番わたしの考えにしっくりくる方法として思いついたのがこちら。


これなら、目次の「イイトコ取り」。
でも、そんな都合のいい「目次」作れるのでしょうか？

コピペで目次を作成

はい。
そんな都合のよい、目次の作り方を教えてくださっているサイトがありました！

じゃん！！
ここです。



たぶん、Bloggerでブログを書いている方は、この方のブログに一度は足を運んでいることと思います。
それだけ、分かりやすく、かみくだいて、親切な説明をされているブログです。

目次に関して言うと、


と、いいことづくめ。
本当に、大変大変お世話になりました。

このブログでのカスタマイズ

まずは、上記ブログからコードをコピーさせていただき、HTML編集の画面にペタリと貼りました。

その上で、自分好みに変えています。
変えるって言ってもね、書いてあることをそのままなぞっただけのことで。

はい、簡単です。

なおHTMLをいじるので、いつでも後戻りできるようにバックアップを取っておいてくださいね。
もう、これ必須。
初心者は、すぐ泣きそうな状況に陥るので、バックアップしておくに越したことはありません！！
・・・わたしがそうなので。

形式を「鮮やかなドット枠の目次」に変更

スケ郎様のブログに掲載されています

色を自分のブログの色に合わせて変更

Bloggerで設定している、自分のブログのブランドカラーを基準にするとスッキリします。

autoNumberをfalseに変更

これにより、目次に番号が振られなくなります。
完全に好みの問題ですよね。

showTocをfalseに変更

これにより、目次が閉じた状態で表示されます。
つまり、読者が自分で見るか見ないかを決められるので、わたしのように目次を使わない人間にとってもウザくない気がします。

widthを100%に変更

これにより、目次の枠がブログの横幅と同じ大きさになります。
こちらの設定も好みだと思うのですが、スマホ画面で見た際に、幅が横幅に合っているとスッキリ見える気がしたので、変更しました。


といった５ヶ所だけ、チャチャッと変えました。

実際にできあがったのが、今ブログに表示されている目次です。

邪魔じゃないし、かわいい。
とても気に入っています。

色を変えるだけで、ずいぶん違った印象になります。
変更する部分は多くないので、やり直しも面倒ではありません。
好みに合わせて、いろいろ試してみて下さいね。

最後までお読みいただき、ありがとうございました。
この記事が、何かのお役に立てば幸いです。