こんにちは
松本慶です


先日とあるWebライティング講座に出席した際に、長い記事には目次をつけようという内容を聴きました。


ホームページやブログにおいて、ボリュームが多くていくつも見出しがあるような構成の場合、


冒頭に目次やページ内リンクをつけていると、訪問者に優しい記事になります。


また作る側としても、目次と見出し・本文の構成を確認することで全体の整合性を確認しやすくなります。


アメブロで長い記事を書いている場合はアメブロでも利用できます。


以下は例です。


↓↓↓↓↓↓↓↓例になります。↓↓↓↓↓↓↓↓↓↓

目次

  1. 1. 目次を作る
    1. 1-1. 簡単な目次を作る
    2. 1-2. ページ内リンクを設定する
    3. 1-3. 階層構造の目次を作る



 
 
 


1. 目次を作る


1-1. 簡単な目次を作る


はじめに以下のような一番簡単な目次を作ってみましょう。


・・・・
 
 
 
 
 
 



1-2. ページ内リンクを設定する


サイトに初めて訪問した人はまずぱっと見て自分の探している情報かどうかを判断します。

訪問者が目次から素早く本文を参照できるように、目次にページ内リンクをつけるとより親切になります。

・・・・
 
 
 
 
 
 
 
 
 

1-3. 階層構造の目次を作る


最後に、先ほどの簡単な目次とページ内リンクを使って、階層を持った目次を作ってみます。
下記は本記事で利用している目次です。


・・・

 



↑↑↑↑↑↑↑↑↑例ここまで↑↑↑↑↑↑↑↑↑

やってみると作る側としても、確かに見出しと本文の整合性をかなり確認しやすくなります。



作り方の詳細はこちらからご参照いただければと思います。(^-^)/


HTML CSS 目次の作り方【ページ内リンク 階層構造 もくじ】
HTML CSS 目次の作り方【ページ内リンク 階層構造 もくじ】




関連サイト






読者登録はこちら


本ブログを一読されてご興味のわいた方は読者登録いただけると幸いです!



AD