そこで目次用プラグインを以前使用していたテーマVaster2の時から別に書き加えて実装していましたが、新テーマ（QooQ）に変えた時に以前の目次プラグインから変更しまして、それについて今回新しいのをあれこれ探したのと目次の件は前回お知らせだけだったので作業の備忘録としてまとめました。
 |
| 画像はイメージです｜BoskampiによるPixabayからの画像 |
目次を生成するプラグイン
目次を生成するには専用のプラグインを用意します。つまりHTMLのスクリプト、プログラムコードをブログに設置する事が必要です。そうすればエントリのアップロード時（投稿時）に自動的に生成されます。WordPressなどではプラグインとして最初から実装されているとか。前のテーマであるVaster2でも目次を生成するスクリプトをHTMLで記述していました。それはVaster2の配布先であるトーマスイッチさんのブログで目次を生成するスクリプトがプラグインとして公開されていたからなんですが、今回ラムネグさんのQooQに変更したことで、今まで使用していた目次でも動作確認はしましたが、思うところがあり、新しいプラグインを探しました。
今回の変更点
今回の変更点は目次の表示、非表示のあるものです。Wikipediaにもありますよね目次関連項目のところにある[表示、非表示]。あれと同じようなものです。目次表示はPCの時は気にならないんですけれど、モバイルでは見る時に要らない場合も有るかなと思い、訪問してくれた人が邪魔だなと思ったら非表示に出来るのもいいかもと考え、あれこれ検索した結果、こちらのブログエントリを参考にさせていただきました。[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）
https://www.sukerou.com/2018/10/blogger-table-of-contents-javascript.html
てらさとさんのブログ『スケ郎のお話』のエントリです。
こちらのコードをそのまま使用させて頂いています。作業はBloggerダッシュボード画面からテーマ→HTMLへ進み、HTML編集画面が開いたらCtrl+Fで＜/head＞を検索。見つけたらその上にコードを貼り付けるだけで目次が生成できます。
カスタマイズ
この目次生成スプリクト、オプションで表示のやり方なども変更できるすぐれものです。私はwidthを変更して100％にして横幅いっぱいにしています。モバイルならいいんですがPCではQooQでは投稿部分の幅が可変のため拡がるのです。基本は目次は左に表示のため環境よっては空間がぽっかり空くので、目次の背景を投稿部分に合わせて拡がるようにしました。以下私が変更したところを貼っておきます。（オプション部分のみ）
全体のコードはリンク先のブログ『スケ郎のお話』のエントリからお願いいたします。
変更部分↓
var toc_options = {
target: ["h2", "h3", "h4"],
autoNumber: true,
condTargetCount: 2,
insertPosition: "firstHeadBefore",
showToc: true,
width: "100％",
marginTop: "20px",
marginBottom: "20px",
indent: "20px",
postBodySelector: ".widget.Blog"
};
最初はセンターにしようと思ったんですがなかなか上手くいかなくて苦肉の策ですが、とりあえずぽっかり空いた空間を気にしないでよくなったので（目次自体は左側になっていますが）これはこれで良いかなと考えています(^^;実はもとのサイズで中の目次項目センターもやってみたんですが、文字通りセンター寄せになり統一感が薄れるので文字左寄せはそのままで表示するようにしました。じゃあそもそもの投稿の幅をという話もあったんですが、現在いろいろ試行中でうまくいかなかったのと、この投稿幅はレスポンシブなため小さくすると小さく自動で対応してくれるのでそのままにして、ブラウザでの見やすさをまずは優先と思ってそちらはとりあえず今はそのままとしています。
ちなみにこのプラグイン、デフォルトでは見出し1個だけでは目次生成されません。目次1個で目次を生成させる場合にはcondTargetCountの指定する数字を１へ変更しておけばOKです。デザイン変更分のスクリプトも用意されているのでそちらのスクリプトをつかって装飾するもよしなど使い勝手のよい目次プラグインでした。
投稿
0 件のコメント:
コメントを投稿
お読みいただきありがとうございました。ご意見、ご感想などございましたら、コメントをよろしくお願いいたします。【なおコメント出来る方をGoogleアカウントをお持ちの方に現在限定させて頂いております。】