cinema-days 映画な日々

目次の自動生成

2020/09/28
目次 TOC
水バラの鉄道対決記事で、長文記事を書いたので、目次を付けてみました。
※過去記事も順次、導入中

目次

今回も、Akira 氏のスクリプトを借用させて頂きました。
<h>タグで項目を拾い、アンカーを付け、目次を自動生成してくれます。
但し、対象エリアは、追記文に限る。

参考サイト:FC2ブログに自動目次機能を設置
見出し目次を生成するTOCスクリプト

見出し目次を生成するTOCスクリプト

見出し目次を生成するTOCスクリプト

以前にもTOCの記事は書いていますが今回jQuery依存なしのvanilla JS(ネイティブJS, pure JS)のご紹介と説明で統一しようと思います。私が今後制作するテンプレートはよほどのことが無い限りjQueryを入れないと思います。それなのにjQueryで紹介というのはやはりマズいもので。...


目次の体裁は、引用(blockquote)の設定を流用し、各<h>に装飾を施しました。

参考サイト:CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

只、そのまま導入しただけでは、カルーセルの「sticky」との関係で、
アンカー戻りの位置がズレてしまった。

下記のサイトより、「jQueryでヘッダの高さ分ページTOPの位置をずらす」スクリプトをお借りしました。

参考サイト:ヘッダ固定時のアンカーリンクずれ解消法

ヘッダ固定時のアンカーリンクずれ解消法|assassin@Web屋

ヘッダ固定時のアンカーリンクずれ解消法|assassin@Web屋

position:fixedでヘッダーを固定しているデザインでページ内リンクを設定すると、リンク先へジャンプした時にヘッダの高さ分、位置がズレてしまうのをどうにか出来ないものか…と格闘したので、その対処法のメモです。 単純にheaderの高さ分paddingとmarginで相殺する 例えば、以下のようなソースに実装すると <div class="header">
ヘッダー
</div>
<div class="content">
<a href="#link01">コンテンツ</a>
</div>



[追記](2022.4.)
長文となる「水バラ」の記事に順次採用:鉄道対決旅・鬼ごっこ・陣取り・BINGO
【スポンサーリンク】
【パソコン】[カスタマイズ]
関連記事
 
タグ : 目次  TOC 
cinema-daysを「人気ブログランキング」で応援cinema-daysを「にほんブログ村」で応援
     シェアする


同カテゴリ  【パソコン】[カスタマイズ]

コメント歓迎!! 0

まだ、コメントはございません。

comment form
コメントは承認制です。コメントツールバーは利用できません。
【お名前・URL・コメント本文】欄の入力は必須になっております。
更  新  順
Hiro
Author: Hiro
発信地:愛知県
TB・CM(承認制)・LINK歓迎
cinemadays on X(旧Twitter)
cinemadays on Facebook