目次の自動生成
水バラの鉄道対決記事で、長文記事を書いたので、目次を付けてみました。
※過去記事も順次、導入中

今回も、Akira 氏のスクリプトを借用させて頂きました。
【スポンサーリンク】※過去記事も順次、導入中

今回も、Akira 氏のスクリプトを借用させて頂きました。
<h>タグで項目を拾い、アンカーを付け、目次を自動生成してくれます。
但し、対象エリアは、追記文に限る。
参考サイト:FC2ブログに自動目次機能を設置
見出し目次を生成するTOCスクリプト

目次の体裁は、引用(blockquote)の設定を流用し、各<h>に装飾を施しました。
参考サイト:CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
只、そのまま導入しただけでは、カルーセルの「sticky」との関係で、
アンカー戻りの位置がズレてしまった。
下記のサイトより、「jQueryでヘッダの高さ分ページTOPの位置をずらす」スクリプトをお借りしました。
参考サイト:ヘッダ固定時のアンカーリンクずれ解消法

[追記](2022.4.)
長文となる「水バラ」の記事に順次採用:鉄道対決旅・鬼ごっこ・陣取り・BINGO
但し、対象エリアは、追記文に限る。
参考サイト:FC2ブログに自動目次機能を設置
見出し目次を生成するTOCスクリプト

見出し目次を生成するTOCスクリプト
以前にもTOCの記事は書いていますが今回jQuery依存なしのvanilla JS(ネイティブJS, pure JS)のご紹介と説明で統一しようと思います。私が今後制作するテンプレートはよほどのことが無い限りjQueryを入れないと思います。それなのにjQueryで紹介というのはやはりマズいもので。...
目次の体裁は、引用(blockquote)の設定を流用し、各<h>に装飾を施しました。
参考サイト:CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
只、そのまま導入しただけでは、カルーセルの「sticky」との関係で、
アンカー戻りの位置がズレてしまった。
下記のサイトより、「jQueryでヘッダの高さ分ページTOPの位置をずらす」スクリプトをお借りしました。
参考サイト:ヘッダ固定時のアンカーリンクずれ解消法

ヘッダ固定時のアンカーリンクずれ解消法|assassin@Web屋
position:fixedでヘッダーを固定しているデザインでページ内リンクを設定すると、リンク先へジャンプした時にヘッダの高さ分、位置がズレてしまうのをどうにか出来ないものか…と格闘したので、その対処法のメモです。 単純にheaderの高さ分paddingとmarginで相殺する 例えば、以下のようなソースに実装すると <div class="header">
ヘッダー
</div>
<div class="content">
<a href="#link01">コンテンツ</a>
</div>
[追記](2022.4.)
長文となる「水バラ」の記事に順次採用:鉄道対決旅・鬼ごっこ・陣取り・BINGO
- 【パソコン】[カスタマイズ]
- 関連記事
-
-
各記事の背景に画像を付けました。 2009/08/24
-
カテゴリ別・月別の記事一覧 2008/12/02
-
タイトルの見直し他 カスタマイズ3件 2012/12/04
-
プラグインカテゴリ3 2009/09/18
-
ブログパーツの切り替え 2010/04/16
-
各コメントにジャンプさせる方法 2009/08/23
-
表示速度改善 [4] 2010/07/22
-
2カラム化 2010/12/02
-
「Googleカスタム検索」 デザイン変更(1) 2012/08/02
-