QHM(Quick Homepage Maker)でホームページを作る(6)--ページ内アンカー：目次

１ページの分量が多いとき、冒頭に目次をつけて、ページ途中の項目にジャンプさせることがよくある（ページ内のアンカー）。

これをHTMLで作る場合は

　アンカーの元（<a href="#koumoku">項目</a>）

と

　アンカー先（<div id="koumoku">項目</div>　または　<a name="koumoku">項目</a>）

の２箇所を設定する。

この作業、QHM（Quick Homepage Maker）では

　#contents

と一言書くだけで自動的にできてしまう。実際は編集画面のアイコン「もくじ」をクリックして入れるだけで良い。

おそるべき簡単さ(^^)

アンカー先のテキスト（項目）すらも書く必要がない。

もちろん、一定の条件があるわけで、何でもかんでも自動で作ってくれるわけではない。

■QHMが自動的に作る「もくじ」は…

そのページの大見出し・中見出し・小見出し（QHMの書式で * が付いている項目）がリスト形式で階層表示される

＝＝＝

「もくじ」としてアンカーする項目を取捨選択したり、リスト形式でない書き方をするには、PHPを変更するか、編集画面での書き方を変える。

もくじ作成のPHPは QHM > plugin > contents.inc.php

（私はPHPをよく知らないのでPHP変更方法に言及することはできません）

編集画面での書き方でアンカー項目を選択する方法：

見出しに * を付けることでPHP処理（もくじの生成）をしているから、* を付けなければアンカー項目にならない。

【方法1】アンカー項目にしたくない見出しをHTMLで記述する

#html{{

<h3>中見出し</h3>

}}

とか。<h4>小見出し</h4>でも同様。

ページ作成の都合で中見出しや小見出しがたくさんあって、それらをすべて「もくじ」アンカー表示にすると煩わしい…といった場合にこの手を使うと良いのでは。
<h3>や<h4>のCSSクラス設定は適用されるので、見出しデザインは統一される。

【方法2】アンカー項目にしたくない箇所は見出しにしない

太字にする、色を変える、大きな字にする、といった方法で本文と区別する。

＝＝＝

上記の方法はあるにしても、見出しと本文が適切に作られたページなら、あまり細工をしないで「もくじ」作成機能を素直に使うのが良いのじゃないかなと思う。なんといっても早くて簡単にできるのだから。それより見出し・本文をわかりやすく書くことに力を入れるのが建設的かと。

■もくじのデザインカスタマイズ

QHM > skin > hokukenstyle >（テンプレート）> plugin.css

エディタで開いて　contents　を検索するとその下に設定がある。デフォルトでは「もくじ」の文字が入っているので別の言葉に変えるとか、色やラインの入り方を変えるとか、各自のお好みで。「もくじ」→「Contents」のように文字数を増やすなら、幅（width:3.5em;）も増やすのを忘れずに。

※カスタマイズしてみたら、Windows IE6ではタイトル（「もくじ」の部分）が見えない。ラインと肝腎なところ（アンカー項目）は見えているのだけど。IE6だけ表示が違うことがあるが、余計な変更をしちゃったのかな？

参照：QHMで制作→「簡単！ホームページ更新」