最終更新日:2018年10月14日 15時56分

目次の作り方

目次とは

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

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

}

作り方

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

記事の中に以下のスクリプトを記述します。
<?php toc(); ?>

本文の右上に表示されます。

scroll-01

画面をスクロールすると、本文中の定位置に留まり続けます。

scroll-02

追随サイドボックス

目次をサイドボックスに表示し、スクロールに追随させる場合は以下のように記述します。
<?php toc(true, false); ?>

サイドボックスの一番上に配置されます。

scroll-sidebox-01

画面をスクロールすると、他のサイドボックスに覆い被さる形で表示されます。

scroll-sidebox-02

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

以下のように、括弧の中に false を記述します。
<?php toc(false); ?>

本文の右上に表示されます。

fix-01

画面をスクロールしても追随しません。

fix-02

固定サイドボックス

目次をサイドボックスに表示し、スクロールに追随させない場合は以下のように記述します。
<?php toc(false, false); ?>

サイドボックスの一番上に表示されます。

fix-sidebox-01

画面をスクロールしても追随しません。

fix-sidebox-02

主な機能

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

シェア