Googleの無料ブログサービス『Blogger』を愛用している昇運さん（@Get_RisingLuck）です。
Twitterで関連情報を見かけたのを好機に、当ブログ（QooQ採用中）に自動目次生成機能を追加しました。
所要時間は2時間以内。
HTML編集直後は予想通りに作動せず、当ブログの構成に合わせて設定変更が必要でした。
現在は想定通りの自動目次生成と中央寄せ表示がされております。
『自動目次生成』は便利です。動作条件は各自設定しましょう
私のHTML編集知識（初歩的）でも、web検索とパソコンがあれば実行可能な内容でした。
bloggerのデザインテンプレートを利用中で、目次機能を探している方の参考になれば幸いです。
参考にするwebサイトは2ヶ所
今回参考にさせていただいたのは、bloggerで運営されているwebサイトです。
- 目次自動生成機能
[Blogger] 目次を見出しから自動生成するプラグイン（忙しい人向け）
『スケ郎のお話』様より - 目次項目の中央配置
[Blogger] 目次を自動生成させるカスタマイズ法
『実践プリズナートレーニング始めました』様より
関連キーワード検索で発見できるのは、本当に助かりました。
変更の前に現状をバックアップ!!
上記の参考元webサイトでも明記されていますが、
ブログを構成している設定を変更する前に、現時点のバックアップを作成しておきましょう。
これを怠ると、予期せぬ編集失敗から復帰するのに多大な労力が必要になります。
blogger【設定画面】⇒【テーマ】⇒【バックアップ】ダウンロードを選択。
ダウンロードされたファイルは、別のフォルダに移動して保管しましょう。
更新した直後もバックアップ!!
更新完了後に気が付いたのですが、無事にデザインテンプレート更新できた時点でもバックアップしておきましょう。
成功した段階を維持しておけば、予期せぬ事態に備える事ができます。
指定の箇所にHTMLをコピペ
自動目次生成のHTMLを追加するため、
blogger【設定画面】⇒【テーマ】HTMLを編集を選択。
</head>の直前に、指定のコードを追加します。
（スケ郎のお話様より）
行数では600～650行前後にあります。
Ctrl+Fで</head>を検索すれば、すぐ見つかるでしょう。
【目次】を画面中央寄せ配置にする方法
目次生成HTMLコードをそのまま有効化すると画面左側に配置されます。
個人的に中央寄せデザインで構成しているので、この時点でコード追記すれば変更できます。
自動生成された目次項目を中央寄せにするコードはこちら。
（実践プリズナートレーニング始めました様より）
内容としては[margin-left:auto;margin-right:auto;]を追記するだけですが、元のHTMLコード文字数が多いので位置にはご注意ください。
動作設定は要確認
コピペして保存すれば、bloggerのデザインテンプレートが更新されます。
エラー表示もなかったので、すぐに目次が生成されると思ったのですが... なぜか記事内に表示されない。
見出し項目を数種類並べたテスト記事で確認したところ、これは不具合ではなく標準の動作設定と分かりました。
記事を構成している見出しの種類と数によっては、自動目次が表示されないのです。
見出し構成に合わせた設定に変更
当ブログでの見出しは、H3複数配置が基本でした。
目次を作成するのはH3見出しからとします。
- H1 使用しない
- H2 記事の代表文 1~2回
- H3 本来の見出し 常用
- H4 見出しの補助
ここは記事編集者によって差異が大きいと思われます。
自分の構成内容に合わせてください。
（スケ郎のお話様より）
当ブログでは『target』を変更
標準設定ではH2見出しが2回配置されていると自動目次が生成表示されます。
target: ["h2", "h3", "h4"],
自分の常用している構成に合わせて【target: ["h3", "h4"],】とした結果、想定していた見出しが生成されるようになりました。
【まとめ】選択肢が増えるメリットは大きい
まずは参照させていただいたblogger運営者に感謝をささげたい。
有益な記事配信、ありがとうございます。
見出しを使って記事編集していれば、既存の目次無しデザインテンプレートでも一括して目次が自動生成されます。
現状で目次は不要という方にも、将来的に導入できる選択肢が増えました。
比較的容易に機能追加できたので、ぜひご検討ください。
コメント