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

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

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

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

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

目次ページには記事タイトルのリンクがズラリと並ぶ形になります。これは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”を抜く)

基本的にはこの形にです。この「#」の部分を消して「記事の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

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

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

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

目次(記事一覧ページ)の作り方”に41件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


  1. 匿名

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

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

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

  2. しげぞう 投稿作成者

    AK様

    コメントありがとうございます。WordPressでは「Table of Contents Plus」というプラグインを入れると自動でその記事の見出しを元に目次を作成してくれます。スゴく簡単です。

    これを無料ブログでやろうと思うと見出し1つ1つにクラス名やID名などをつけていってページ内リンクを1つ1つ作成するというかなりの手間になるかと思います。簡単にできる方法があるのかもしれませんが、私にはちょっと思いつきません。すみません。

  3. AK

    初めまして。こんにちは。

    AKと申します。よろしくお願いします。

    時々こちらを参考にさせていただいています。
    ひとつどうしてもわからないことがあって、教えていただければと思い今回コメントさせていただきました。

    質問ですが、目次の作成は問題なくできたのですが、目次の項目が少し多くなったので、目次を開閉式にしたいのですが、方法がわかりません。

    ここの記事で、目次に表示/非表示(開閉式)の設定にされてると思いますが、シーサーブログでもできるでしょうか?

    もし可能なら、方法を教えていただきたいのですが。

    よろしくお願いします。

  4. しげぞう 投稿作成者

    ピクミン様

    コメントありがとうございます。説明不足すみません!目次のコードはHTMLではなくて、記事投稿の中に入れます。普通の記事と同じように記事投稿画面を開いてそこに入れて下さい。

    それで目次リストを項目ごとに分ける場合には「見出しタグ」を使います。これも普通の投稿で目次の切り分けたい部分に次のコードを入れて下さい。

    <h3>ここに見出しのテキスト</h3>

    あとは一度保存して、この見出し「h3」の装飾をしていきます。CSSで好きなデザインに装飾する事ができます。
    Seesaaブログの見出しタグの装飾【新システム】

  5. ピクミン

    しげぞうさま、いつもありがたく見させていただいています。
    2つ質問があるのですが今シーサーブログの新システムバージョンでトップページに目次を作りたいのですが
    下のこれをHTML編集エディタのどこに挿入すればよいのかわかりません。

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

    それと、目次リストを項目ごとに分けたいのですがどのようにすればよいのでしょうか?
    (例えば、このサイトのトップページの「アフィリエイトの始め方」、「ブログのカスタマイズ」のように分けられるようにしたいです。)

    よろしくお願いします!

  6. しげぞう 投稿作成者

    REN様

    返信ありがとうございます。上手く反映されたようで良かったです!今回の質問、相互リンクですが、REN様の言われるように被リンクを集めて評価を上げるのが目的で、以前はどのサイトにも相互リンクのページがありました。ただ、現在はこれはほとんど意味がありませんし、順位を不正に上げようとする仕組みにGoogleは対策を行っています。なので下手をすると逆に悪影響を受ける可能性もありますので、相互リンクページの設置はしなくても良いと思います。

    Googleのアルゴリズムも日々進化しており、リンク重視からコンテンツ重視の評価に移行してきていると感じています。現在でも確かに被リンクは評価の1つにはなると思いますが、これは自然に付いた被リンクや関連する被リンクなどかと思います。なので自分で意図的に被リンクを増やすのは不自然なリンクとして警告を受ける事もあります。

    良いコンテンツを作っていればTwitterやFacebookなどのSNSで拡散されることもありますし、それに伴って被リンクは自然と増えて行くものです。被リンクが少なくても上位表示はできますので、被リンク重視の対策はしない方が良いと思います。それなら内部リンクを充実させて、きっちり関連性のある記事同士を内部リンクで繋ぐ方が有効かと思っています。

    関連する記事を内部リンクにする事でPV(ページビュー)やサイトの滞在時間も増えますので、これが良い評価に繋がり、結果的に順位も上がっていく事が多いように私は感じています。

  7. REN

    すぐにできました!ありがとうございます!
    忙しい中いつも的確なご指導本当に嬉しく励みになります。このサイトに出会って、自分のサイトへの情熱が再沸いたしました。

    甘んじてもう一つ質問させてください。すいません。
    よく相互リンク受付フォームなるものを貼り付けているサイト等を拝見しますが、これは募集をかけた方が良いものなのでしょうか?よく被リンクが増えると評価が上がる、上位表示されると言われてますが本当ですか?この被リンクは、良いサイトを長年継続して続けていると勝手に増えていくものなのでしょうか?

  8. しげぞう 投稿作成者

    REN様

    返信ありがとうございます。えっと蛍光色ですが、一応私も使っている黄色の蛍光色の場合で説明すると、まずはスタイルシートに次のコードを追加して保存します。

    .marker_yellow {
    background: linear-gradient(transparent 60%, #ffff66 60%);
    font-weight:bold;
    }

    それでスタイルシートの保存ができたら記事本文中でこのようなタグでテキスト部分を囲むと蛍光になると思いますので、一度試して見てください。

    <span class="marker_yellow">テキスト部分</span>

    Seesaaブログとかだともしかするとスマートフォン版のスタイルシート(CSS)も同じようにコードを追加する必要があるかもしれませんので、念のためスマートフォンでも確認してみて下さい。

  9. REN

    グローバルナビなど修正してみました。現在辞めようと思っていた先日お知らせしたサイトに愛着がわいてきたのでちょっと作り込んでいきたいと思います。

    ところで、初歩的かもしれませんが、記事文章中の文字に、蛍光マーカー的な装飾って簡単に付けられるのでしょうか?

  10. しげぞう 投稿作成者

    REN様

    返信ありがとうございます。反映されてよかったです。タグクラウドですが、これは特に必要でなければ設置する必要はないです。そもそも同じタグをつけた記事同士で検索できる機能ですが、それで検索する方は多くはないと思います。今記事下に移動されてますが、これもおそらく全ページで表示されますのでサイドバーと同じ事です。なので、特に必要ないという場合にはタグクラウドは設置しなくても良いかもしれません。もちろん各記事にタグはつけてもいいですが、タグクラウドだけ設置しないという感じでもいいかなと思います。

    それで、ナビの上の余白ですが、これはスタイルシートでマイナスのmarginを追加して調整できるかと思います。

    #navi-bar {
        margin-top: -10px;
    }

    それからもう1点だけ。全ページに表示されるサイドバーにカテゴリーがありますよね?それでREN様のブログのグローバルナビ(これも全ページで表示されます)のURLもカテゴリーになってます。なので、カテゴリーにも内部リンクが集中してしまうと思います。なので先ほど同様に記事タイトルではなく、カテゴリー名での検索結果が強くなる可能性があります。

    おすすめなのは各カテゴリーでの記事を増やして、各カテゴリーの最新記事に各カテゴリーのまとめ(目次)を作成し、その各カテゴリーのまとめページ(個別記事)のURLをナビに設置すると良いかもしれません。

    あくまで私の個人的な意見ですし、カテゴリーやタグに内部リンクを集めた方が良い結果になる事もあるかもしれません。なので、その辺は検証してみて試して見られる事をおすすめします。

  11. REN

    ありがとうございます。早速試したらできました。文章の方もこれから作る違うブログ等ではご指摘の所気をつけます!
    タグクラウドの件ですが、これは特にアップしなくても良いものですか?
    一応記事下に移動させました。

    全然関係ない質問になりますが、ヘッダーに画像を挿入すると、どうしてもグローバルナビと説明文の間に余白ができてしまい格好悪くなります。良い方法をご教授願います!