目次(記事一覧ページ)の作り方

サイト作成に役立つツール・素材・HTML・CSS

今回は先日質問のあった目次ページの作り方を紹介していきます。目次ページの作り方は色々なやり方があります。例えばWordPressなら記事一覧を表示してくれるプラグインもありますし、自分で1つ1つ目次を作っていくやり方もあります。

一応今回は私がやっているやり方を紹介していきますが、私の場合はプラグインなどは使わずに自作する派です。というのも目次は自分の好きな順番で並べたいですし、目次には入れたくない記事も結構あるからです。

目次ページをトップページに表示させる事で訪問者に「このサイトには欲しい情報があるかも」と思わせる事ができますし、自分のサイトの品揃えをアピールする事もできるので非常に便利です。

MEMO

今回紹介するのはサイトマップ的なやつです。サイト内の記事を目次にする感じ。

それとは別に1記事単位の目次(個別記事の見出しが目次になるやつ)の設置は別記事で解説してます。

記事に目次を自動で設置できるプラグインTable of Contents Plusの設定方法と使い方

リンクの羅列はリストタグを使う

目次ページには記事タイトルのリンクがズラリと並ぶ形になります。これは1つ1つ並べて改行していく方法でもいいですが、SEO的にはリストタグを使って並べるのがおすすめです。

見た目はほとんど同じですが、検索エンジン的にはリンクが横並びに羅列されているという風に見えるのでスパムと勘違いされたら厄介。そのためのリストタグ。

リストタグの使い方は各ブログサービスで違うと思いますが、どのブログサービスでもHTML(タグ)編集エディタ(ソースコードが表示されるエディタ)に切り替えができると思いますのでHTML(タグ)編集エディタでの書き方を解説しておきます。

HTML編集エディタでの目次作成方法

■リンク先を別窓(新しいタブ)で開く場合

<ul>
<li><a href="#" target="_blank">タイトル1</a></li>
<li><a href="#" target="_blank">タイトル2</a></li>
<li><a href="#" target="_blank">タイトル3</a></li>
<li><a href="#" target="_blank">タイトル4</a></li>
<li><a href="#" target="_blank">タイトル5</a></li>
</ul>

■リンク先を同じ窓(同じタブ)で開く場合(target=”_blank”を抜く)

<ul>
<li><a href="#">タイトル1</a></li>
<li><a href="#">タイトル2</a></li>
<li><a href="#">タイトル3</a></li>
<li><a href="#">タイトル4</a></li>
<li><a href="#">タイトル5</a></li>
</ul>

基本的にはこの形にです。この「#」の部分を消して「記事のURL」を入れます。記事URLは記事タイトルをクリックした時に検索窓に表示されるURLです。それから「タイトル1」から「タイトル5」という文字を消して記事のタイトルを入れます。するとこのような箇条書きスタイルになります。

  • タイトル1
  • タイトル2
  • タイトル3
  • タイトル4
  • タイトル5

このように「li」と「/li」を「ul」と「/ul」の中に追加していけば増やす事もできます。これで目次を作成していきます。私の場合は10記事程度できたら先に目次を作って記事が増えたら追加していくスタイルです。先に目次ページをGoogleにインデックスしてもらいたいためです。

それからシーサーブログで目次を作成する時の注意点としてシーサーブログの初期設定(記事設定)では「Enter」を改行として扱う設定になっています。

seesaa-settei

そのため上記コードをコピペするとそれぞれの行に改行タグが入ってしまい、1つ1つのタイトル下にスペースができてしまいます。

seesaa-settei-2

この場合は上記コードを全て1列に並べる(改行しないように記述)するか、記事の設定で「改行を<br />タグに変換しない」を選択する必要があります。設定はブログ作成画面の下の「詳細設定」で変更できますが、この設定にする場合は改行したい場所に<br />というタグを記述する必要があります。

seesaa-settei-3

以上がシーサーブログでの注意点。

また、記事数が多いブログであれば各カテゴリー毎に目次を作成して、すべてをまとめた目次も別に作るという事もできるので自分の好きなやり方でやってみて下さい。

コメント

  1. 匿名 より:

    しげぞう様 早速のご返答ありがとうございます。

    無料ブログでは難しそうですね。わかりました。
    ご返答いただいてありがとうございます。

    また、これからもいろいろと参考にさせていただくことと思います。
    これからもよろしくお願いします。

タイトルとURLをコピーしました