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

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>

 

<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag4</h4>
<ul style=”list-style-type: square;”>
<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 tag5</h4>
<ol style=”list-style-type: lower-roman;”>
<li><a href=”#xyz”>ここにテキスト</a></li>
<li><a href=”#999″>ここにテキスト</a></li>
<li><a href=”#888″>ここにテキスト</a></li>
<li><a href=”#777″>ここにテキスト</a></li>
<li><a href=”#666″>ここにテキスト</a></li>
</ol>
</div>

 

<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag6</h4>
<ol style=”list-style-type: upper-roman;”>
<li><a href=”#xyz”>ここにテキスト</a></li>
<li><a href=”#999″>ここにテキスト</a></li>
<li><a href=”#888″>ここにテキスト</a></li>
<li><a href=”#777″>ここにテキスト</a></li>
<li><a href=”#666″>ここにテキスト</a></li>
</ol>
</div>

 

<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag7</h4>
<ol style=”list-style-type: lower-greek;”>
<li><a href=”#xyz”>ここにテキスト</a></li>
<li><a href=”#999″>ここにテキスト</a></li>
<li><a href=”#888″>ここにテキスト</a></li>
<li><a href=”#777″>ここにテキスト</a></li>
<li><a href=”#666″>ここにテキスト</a></li>
</ol>
</div>

 

<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag8</h4>
<ol style=”list-style-type: decimal;”>
<li><a href=”#xyz”>ここにテキスト</a></li>
<li><a href=”#999″>ここにテキスト</a></li>
<li><a href=”#888″>ここにテキスト</a></li>
<li><a href=”#777″>ここにテキスト</a></li>
<li><a href=”#666″>ここにテキスト</a></li>
</ol>
</div>

 

<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag9</h4>
<ol style=”list-style-type: decimal-leading-zero;”>
<li><a href=”#xyz”>ここにテキスト</a></li>
<li><a href=”#999″>ここにテキスト</a></li>
<li><a href=”#888″>ここにテキスト</a></li>
<li><a href=”#777″>ここにテキスト</a></li>
<li><a href=”#666″>ここにテキスト</a></li>
</ol>
</div>

 

<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h4>Sample tag10</h4>
<ol style=”list-style-type: lower-latin;”>
<li><a href=”#xyz”>ここにテキスト</a></li>
<li><a href=”#999″>ここにテキスト</a></li>
<li><a href=”#888″>ここにテキスト</a></li>
<li><a href=”#777″>ここにテキスト</a></li>
<li><a href=”#666″>ここにテキスト</a></li>
</ol>
</div>

 


 

目次サンプル複合型

リストタグを合わせて入れ子にする方法を使っております。

左が表示例で右がHTMLタグになっています。(スマホの方は、上下になりますが・・・)

<div style=”background:#eeeeff; padding:10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h3>目 次</h3>
<ul style=”list-style-image: url(‘http://social908.com/facebook/wp-content/uploads/2018/10/01.png’);”>
<li><a href=”#”>はじめに</a></li>
<li><a href=”#”>講義</a>
<ul style=”list-style-image: url(‘http://social908.com/facebook/wp-content/uploads/2018/10/02.png’);”>
<li><a href=”#”>アメブロカスタマイズ講習</a></li>
<li><a href=”#”>WordPress講習初級</a></li>
</ul>
</li>
<li><a href=”#”>レンタルサーバー</a>
<ul style=”list-style-image: url(‘http://social908.com/facebook/wp-content/uploads/2018/10/02.png’);”>
<li><a href=”#”>非SSL(http://)</a></li>
<li><a href=”#”>SSL(https://)</a></li>
</ul>
</li>
<li><a href=”#”>お客様の声</a></li>
<li><a href=”#”>お問い合わせ</a></li>
</ul>
</div>

 

<div style=”background:#eeeeff; padding:10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h3>目 次</h3>
<ul style=”list-style-image: url(‘http://social908.com/facebook/wp-content/uploads/2018/10/01.png’);”>
<li><a href=”#”>はじめに</a></li>
<li><a href=”#”>講義</a>
<ol style=”list-style-type: decimal”>
<li><a href=”#”>アメブロカスタマイズ講習</a></li>
<li><a href=”#”>WordPress講習初級</a></li>
</ol>
</li>
<li><a href=”#”>レンタルサーバー</a>
<ol style=”list-style-type: decimal-leading-zero”>
<li><a href=”#”>非SSL(http://)</a></li>
<li><a href=”#”>SSL(https://)</a></li>
</ol>
</li>
<li><a href=”#”>お客様の声</a></li>
<li><a href=”#”>お問い合わせ</a></li>
</ul>
</div>

 

<div style=”background: #eeeeff; padding: 10px; border-radius: 10px; border: 2px dotted #0000ff;”>
<h3>目 次</h3>
<ul style=”list-style-image: url(‘http://social908.com/facebook/wp-content/uploads/2018/10/01.png’);”>
<li><a href=””#””>はじめに</a></li>
<li><a href=””#””>講義</a>
<ol style=”list-style-type: upper-roman”>
<li><a href=””#””>アメブロカスタマイズ講習</a></li>
<li><a href=””#””>WordPress講習初級</a></li>
</ol></li>
<li><a href=””#””>レンタルサーバー</a>
<ol style=”list-style-type: upper-roman”>
<li><a href=””#””>非SSL(http://)</a></li>
<li><a href=””#””>SSL(https://)</a></li>
</ol></li>
<li><a href=””#””>お客様の声</a></li>
<li><a href=””#””>お問い合わせ</a></li>
</ul>
</div>

とまぁこんな感じで目次タグについて書きましたが、基本的にアメブロでは記事は40000字の文字数制限あるのであまり長くは書けないという事は、知っておいてください。
 

アメブロのことならくまはちLABにお任せください。

サービス 制作事例

お問い合わせ

フォローお願いします!