最終更新日:2019年3月26日 11時52分

目次の作り方

目次とは

このページの記事名の下に表示されているメニューのことで、記事内の見出し(<h1>から<h6>まで)をリストアップして階層化し、それぞれの記述地点までページ内ジャンプできるリンクを自動的に付与するものです。 includes/functions.php
<?php

//           スクロール追随、記事内表示『false』でサイドボックス表示
function toc($sticky=true$in_article=true)
{
    

}

作り方

スクロールに追随する目次

記事に目次を表示させたい場合は、記事の中に以下のスクリプトを記述します。
<?php toc(); ?>
Javascript が有効な場合に、本文の上に表示されます。 scroll-01 画面をスクロールしても、追随する形で表示され続けます。 scroll-02

追随サイドボックス

目次をサイドボックスに表示し、スクロールに追随させる場合は以下のように記述します。
<?php toc(true, false); ?>
サイドボックスの一番上に配置されます。 scroll-sidebox-01 画面をスクロールすると、他のサイドボックスに覆い被さる形で表示されます。 scroll-sidebox-02

ページ上部に固定する目次

以下のように、括弧の中に false を記述します。
<?php toc(false); ?>
本文の上に表示され、画面をスクロールしても追随しません。 fix-01

固定サイドボックス

目次をサイドボックスに表示し、スクロールに追随させない場合は以下のように記述します。
<?php toc(false, false); ?>
サイドボックスの一番上に表示され、画面をスクロールしても追随しません。 fix-sidebox-02

主な機能

・JavaScript により動的に見出しを取得しリストを作成 ・トグルボタンによるリストの折り畳み ・レスポンシブ設計により小さい画面でも可読性を確保 ・長い見出しは横スクロールしてリストの冗長化を回避 ・スクロール位置に合わせてリストをハイライト ・文中表示とサイドボックス表示に加え、追随と固定の選択が可能

シェア