長くなってしまったブログのために目次

この記事を読むのに必要な時間は約 16 分です。

HTMLで目次をつくる

よくコンテンツ上部に目次を表示されてるブロガーも多いですね

今回は、HTMLで目次を作る方法を解説しながら進めていきます。

下記がシンプルなタイプのサンプルになります。

 

なぜ、目次を作るの?

解説などをするサイトなどでスクロールが長くなるコンテンツなどで訪問したビジターさんが見たいところにすぐに行けるメリットがあるこの同ページ内での目次を作るという作業
なぜと聞かれるならビジターへの気遣いではないでしょうか?
見たいところをすぐに見やすくしている目次を表示するコンテンツ
実際にどういう構成でどう作っているのか?
考えながら見ていきましょう。
最後にサンプルタグをコピペできるようにしています。

 


 

ただの目次より装飾してみる

目次

シンプルな目次をHTMLで作るって簡単ですが・・・

ちょっと装飾してみたい

やはり見栄えも大事かなって思うわけです。

HTMLだけでなくCSSも少し入れて見やすくしてみます。

囲み枠やリストタグの工夫など

順番に解説していきます。

 


 

タグについての解説

HTMLタグやCSSについて分かる方は、読んで分からない方は、次の項目以降にあるサンプルタグを上手にコピペで使っていただければと思います。
目次には、基本的にリストタグを使います。
<ul><li></li></ul>
上記のようなタグがリストタグなのですが・・・
さっきの項目のサンプルの場合は、
<ol><li></li></ol>
みたいな感じでの番号リストタグですね。
その間にアンカーと言われるリンクが入っているのです。

Sample tag1

<div style=”background:#eeeeff; padding:10px; border-radius: 10px; border: 2px dotted #0000ff;”><h4>Sample tag</h4>

<ul style=”list-style-image: url(‘先頭の画像のアドレス’);”>
<li><a href=”#abc”>ここにテキスト</a></li>
<li><a href=”#”>ここにテキスト</a></li>
<li><a href=”#”>ここにテキスト</a></li>
<li><a href=”#”>ここにテキスト</a></li>
<li><a href=”#”>ここにテキスト</a></li>
</ul>

</div>

途中を省略します。

<a name=”abc”></a>

<h2>ここにテキスト</h2>

コンテンツ
 


 

Sample tag2

<div style=”background:#eeeeff; padding:10px; border-radius: 10px; border: 2px dotted #0000ff;”><h4>Sample tag</h4>

<ol style=”list-style-type: upper-latin”>
<li><a href=”#abc”>ここにテキスト</a></li>
<li><a href=”#”>ここにテキスト</a></li>
<li><a href=”#”>ここにテキスト</a></li>
<li><a href=”#”>ここにテキスト</a></li>
<li><a href=”#”>ここにテキスト</a></li>
</ol>

</div>

途中を省略します。

<a name=”abc”></a>

<h2>ここにテキスト</h2>

 
上記のようなタグになります。

実際に1と2がどう表示されるのかサンプルを表示してみます。

また、他のサンプルは少し変更してみました。

いかがでしょうか?

基本的に奇数のサンプルがULタグをCSSで装飾しています。

また、偶数はOLタグをCSSで装飾しています。

style属性でCSSを指定してアメブロでも使えるようにしています。

どちらもstyle=”list-style-type:*****;”という部分でアスタリスクの部分を変更しています。

 

アンカーのルール

目次から指定する見出しまでジャンプさせるためのアンカーの使い方についてですが・・・
基本的に下記のように使います。
<a href=”#666″>ここにテキスト</a>
ここでいつものアンカーと違うのがお分かりだと思いますが・・・
href=”開くページアドレス”・・・・・通常のリンク
なのに上記では、#666 となっていますね。
この#の後は、任意に指定できます。
しかし、飛ばしたい場所に
<a name=”666″></a>
上記のようにHTMLエディターで入れておきます。
この場合にタグ間にテキストや画像を入れる必要ありません。
#○○○とname=”○○○”
○○○の部分が同じであるということ
外部のページからその場所に直接リンクさせることも可能です。
書き方
<a href=”ページのアドレス#xyz” target=”_blank”>ここに飛ばしたい!</a>                 

上記のように書くと直接そこの場所までジャンプさせることが可能になります。
いかがでしょうか?
タグがわかるといろんな装飾や工夫が可能になります。
基本的には、タグ本来の意味に沿う使い方がベストですが・・・

 


 

目次サンプルシンプルタイプ

シンプルに単純な目次サンプルです。左が表示例で右がHTMLタグになっています。(スマホの方は、上下になりますが・・・)

<div style=”background:#eeeeff; padding:10px; border-radius: 10px; border: 2px dotted #0000ff;”><h4>Sample tag1</h4>

<ul>
<li><a href=”#aaa”>ここにテキスト</a></li>
<li><a href=”#bbb”>ここにテキスト</a></li>
<li><a href=”#ccc”>ここにテキスト</a></li>
<li><a href=”#ddd”>ここにテキスト</a></li>
<li><a href=”#123″>ここにテキスト</a></li>
</ul>

</div>

 

<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag2</h4>
<ul style=”list-style-type: none;”>
<li><a href=”#aaa”>ここにテキスト</a></li>
<li><a href=”#bbb”>ここにテキスト</a></li>
<li><a href=”#ccc”>ここにテキスト</a></li>
<li><a href=”#ddd”>ここにテキスト</a></li>
<li><a href=”#123″>ここにテキスト</a></li>
</ul>
</div>

 

<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag3</h4>
<ul style=”list-style-type: disc;”>
<li><a href=”#aaa”>ここにテキスト</a></li>
<li><a href=”#bbb”>ここにテキスト</a></li>
<li><a href=”#ccc”>ここにテキスト</a></li>
<li><a href=”#ddd”>ここにテキスト</a></li>
<li><a href=”#123″>ここにテキスト</a></li>
</ul>
</div>

この記事が気に入ったらいいね!
お願いします!

The following two tabs change content below.
くまはちLAB
神戸市にて事務所を構えSNSを活用したアメブロやWordPressの活用法をメインにリスト化を初心者の方でもできるパッケージの開発等を手がける。 オーナーくまはちは、パソコン歴30年ホームページ制作歴20年。 自身もアメブロやFC2・WordPressなどいろいろなブログサービスを活用しながら仕事に結びつく方法としてメルマガ・LINE@などの登録などで潜在見込み客を見込み客に見込み客をお客様にする方法を開発。 ブログからだけでなくFacebookやTwitterからの集客も継続して行っております。 お問い合わせは、FacebookメッセージからでもOKですよ。 やってきた中で痛切に感じるのは、我々制作会社は、提案できるのは当然のこととして個人事業主や企業のためになるWEBコンサルティングができなければダメだなっていうのがこれまでの結果です。 制作などの良し悪しを決めるのは、事前のヒアリングとどれだけクライアントならではの良さを引き出せるのかということなのです。
くまはちLAB

最新記事 by くまはちLAB (全て見る)

くまはちLAB
About くまはちLAB 12 Articles
神戸市にて事務所を構えSNSを活用したアメブロやWordPressの活用法をメインにリスト化を初心者の方でもできるパッケージの開発等を手がける。 オーナーくまはちは、パソコン歴30年ホームページ制作歴20年。 自身もアメブロやFC2・WordPressなどいろいろなブログサービスを活用しながら仕事に結びつく方法としてメルマガ・LINE@などの登録などで潜在見込み客を見込み客に見込み客をお客様にする方法を開発。 ブログからだけでなくFacebookやTwitterからの集客も継続して行っております。 お問い合わせは、FacebookメッセージからでもOKですよ。 やってきた中で痛切に感じるのは、我々制作会社は、提案できるのは当然のこととして個人事業主や企業のためになるWEBコンサルティングができなければダメだなっていうのがこれまでの結果です。 制作などの良し悪しを決めるのは、事前のヒアリングとどれだけクライアントならではの良さを引き出せるのかということなのです。