久々にブログの手入れをした管理人（@sh_rainbow295）です。
タイトルにあるサイドバーの見出し、ずっと修正をしたかったんです。しかし一度手を入れてうまくいかなかった過去があるので放置しておりました。
ようやく、ほぼほぼですが完成できてよかった……！
Digipressさんのテーマは情報が少なくて、カスタマイズする時はいつも難儀します。
いつものごとく力業な部分も多々ありますが、記録として残しておきたいと思います。
現在は「Affinger5」テーマを使っていますが、CSSの設定はほぼ弄らずに使用できているので、Affinger5をはじめとして他テーマでも参考になるかと思います。
完成形
こんな感じです。
スクロールすると固定なのは以前と変わりありませんが、スクロールバーがつきました。
また、閲覧している見出しに合わせて強調表示するようにもしました。
主な作業は以下の2つです。
- サイドバーの目次用オリジナルスタイルシート（ユーザーCSS）の設定
- プラグイン Easy Table of Contents・Q2W3 Fixed Widgetのインストール・設定
目次の固定だけでOKの場合
- 「ウィジェット」にすすみ、サイドバーエリアに「DPカスタムテキスト」を挿入する
- ショートコード「[ dp_toc]」を入力する*1 … Continue reading（ショートコードの半角スペースは、入力する時に削除してください）
- 「スクロールしてサイドバーが空になったときは常に表示」にチェックを入れる
この手順だけでOKです。
スクロールバーをつけたりしたい場合に、以下の内容を参考にしてみてくださいませ。
必要なプラグインのインストール・設定
Easy Table of Contents・Q2W3 Fixed Widgetプラグインのインストールを行い、有効化します。
Digipress側の目次自動表示を有効化している場合は、忘れずに無効化しておきましょう。
ダッシュボード内の「Digipress→詳細設定」内のシングルページ表示設定項目にすすみ、「表示位置」プルダウンを「表示しない」にします。
Easy Table of Contentsプラグインのみ、ちょこっと設定が必要です。
基本的な設定については、以下の記事にわかりやすくまとめられています。
■記事内で生成される目次を閉じる・開く処理をしたい場合
「プラグインの CSS スタイルの読み込みを禁止します。チェックすると、上記の外観のオプションは無視されます。」のチェックを必ず外してください。
でないと、折りたたみを許可していても開閉ボタンが表示されなくなってしまいます。
オリジナルスタイルシートの設定
以下の記事を参考にさせていただきました。
■目次のデザイン
■リストのカウンタ値をリセットして、改めて付与させる
そして、以下の2点を変更・追加しました。
- 目次の高さ（スクロールバーが出るまでの大きさ）を変える
→上記コードの45行目にあるmax-heightプロパティの値を変更しました。 - 各見出しのカウンタを表示する
→上記コードの24行目～37行目にあたる部分を追加しました。
余談：目次タイトル前のアイコン
「目次タイトル前にアイコン」のコードでは、Webフォントは「Font Awesome」を使っていますが、Digipress独自のもあります。
そちらを使う場合はTable of Contents Plus の目次をレスポンシブと番号の有無に対応させたカスタムCSSサンプルを参考に、以下のように変更すればOKです。*2他のWebフォントもcontentプロパティを使えば設定できるっぽいんですがマニュアルが見つかりません……
#ezw_tco-3 .ez-toc-title:before {
font-family:dpicons;
font-size:16px; /*アイコンのサイズ*/
content:"\e670";
padding-right: 6px;
}
サイドバーに見出しを表示する
ウィジェットの「サイドバー」エリアに、「目次」ウィジェットを挿入します。
「タイトル」と「閲覧中セクションのハイライト色」はお好みで。
「Fixed widget」には必ずチェックを入れてください。
上記のように設定したら完成です！
まとめ
ひとまずやりたいことができたので満足です。
あとは「閲覧中セクションのハイライト色」が見出しタイトル全体に反映してくれれば言うことなしです。
なんでか、カウンタ部分にしか色ついてないんですよね……。
そういえばEasy Table of Contentsプラグインの設定項目に「ウィジェットの固定セレクタ」っていうのがあるんですけど、どうもこちらの想定通りに動いてくれなくて泣く泣く設定を断念しました。
目次設定したウィジェットのclassかid要素を設定すればいいんじゃないの？ だめなの？
これが解決されれば、Q2W3 Fixed Widgetプラグインは入れなくてもいいんですけどね……。
何回かアップデートされた後にでもまた試してみたいと思います。
脚注
