« 西新商店街の10円まんじゅう | トップページ | 阿修羅像を造らせた人・藤原光明子 »

2009.06.24

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

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

これをHTMLで作る場合は

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

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

の2箇所を設定する。

この作業、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で制作→「簡単!ホームページ更新

|

« 西新商店街の10円まんじゅう | トップページ | 阿修羅像を造らせた人・藤原光明子 »

CSS(スタイルシート)」カテゴリの記事

「パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/132693/45433804

この記事へのトラックバック一覧です: QHM(Quick Homepage Maker)でホームページを作る(6)--ページ内アンカー:目次:

« 西新商店街の10円まんじゅう | トップページ | 阿修羅像を造らせた人・藤原光明子 »