QooQ 目次を付ける【Blogger】
今日はQooQカスタマイズして、記事に目次をつけたいと思います。
そんなに長文のノウハウ系の記事を書くわけでもありませんが、目次があったほうが読みやすいかな。（特にスマホの時は）
目次を付ける
参考にさせていただいたのはこちら。HTMLをいじるので、最悪に備えて予めバックアップをお忘れなく！
[Blogger] 目次を見出しから自動生成するプラグイン（忙しい人向け）
指定されたコードを</head>の直前にコピペするだけ。その上簡単なオプション設定でカスタマイズもできちゃう優れものです。
目次は記事内の見出し（デフォルトでh2以降）を項目として拾っていくので、見出しがまったくない記事では目次は生成されません。読む人の事を考えて、見出しをつけながら文章を書く事が必要です。
CSSカスタマイズ
見た目（デザイン）のカスタマイズについては、コード末尾の<style type="text/css">…</style>の部分にあるCSSを自分好みに整えれば設置完了です。
デフォルトでは以下のとおり。※空白・改行を入れて見やすくしていますが同じものです
.b-toc-container{
background:#f9f9f9;
border:1px solid #aaa;
padding:10px;
margin-bottom:1em;
width:auto;
display:table;font-size:95%
}
.b-toc-container p{
text-align:center;
margin:0;
padding:0
}
.b-toc-container ul{
list-style-type:none;
list-style:none;
margin:0;
padding:0
}
.b-toc-container>ul{
margin:15px 0 0
}
.b-toc-container.hide>ul{
display:none
}
.b-toc-container ul li{
margin:0;
padding:0 0 0 20px;
list-style:none
}
.b-toc-container ul li:after,.b-toc-container ul li:before{
background:0;
border-radius:0;
content:""
}
.b-toc-container ul li a{
text-decoration:none;
color:#008db7!important;
font-weight:400;
display:flex;
align-items:flex-start;
flex-wrap:nowrap
}
.b-toc-container ul li .toc-number{
margin:0 .5em 0 0;
white-space:nowrap
}
.b-toc-container ul li .toc-text:hover{
text-decoration:underline
}本家サイトでもカスタマイズ例をいくつか提示して下さっているのでご参考まで。
目次のセンタリング
目次をセンタリングしたい場合は、こちらのCSSではなくオプションの項目をいじります。デフォルトは以下のとおり。※★印はこちらで説明の為に追記
//以下のオプションを好みに合わせて変更して下さい
var toc_options = {
target: ["h2", "h3", "h4"],
autoNumber: true,
condTargetCount: 2,
insertPosition: "firstHeadBefore",
showToc: true,
width: "auto",
marginTop: "20px", ★
marginBottom: "20px", ★
indent: "20px",
postBodySelector: ".widget.Blog"
}上記★印の2行を削除して、以下の1行に書き換えます。（上下20px・左右自動で設定）
margin: "20px auto", ※マージンは1行で指定
＜注意＞一部、相性の悪いBloggerテンプレートがあります
既知のものでは、Materiappolo。（作者スケ郎さんの返信コメントより）
サイドバーへ目次を配置（追従型）
上記、スケ郎のお話/スケ郎さんが作られたものを、IB-Note/Fumaさんが改良されたプログラムでは、オプション設定で簡単にサイドに追従型の目次を表示することができます。もちろんサイド非表示設定も可能です。
QooQで使う場合にはCSSでサイドバーの高さを指定しないと機能しないようですので、ご注意を。
私も新しいテンプレート（2023年2月よりJetthemeに切り替え）にした時に取り入れました。サイドに表示させるときの幅や、今どこを読んでいるかのハイライトなどについて、もう少しカスタマイズを加えています。
8-stars.blogspot.com現在モバイルではサイドの目次は非表示にしてありますが、上へ戻るボタンのように下に目次ボタンを表示させて必要な時に表示できればなと考えており、今後の課題の1つになっています。
当ブログ内、QooQカスタマイズ記事をまとめました
8-stars.blogspot.com
