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

今回は先日質問のあった目次ページの作り方を紹介していきます。目次ページの作り方は色々なやり方があります。例えば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>

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

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

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

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

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. しげぞう 投稿作成者

    fuku様

    コメントありがとうございます。なるほどリダイレクトでできるんですね!もし良かったら時間のある時でいいので、どのようにリダイレクトされたのか教えて頂けると助かります。私もちょっとやってみたいです(笑)。

  2. fuku

    しげぞう様

    お世話になります。fukuです。

    先ほどお伝えした事象ですが、シーサーブログのスマホ版をPC版にリダイレクトさせることで回避しました; 結構強引なやり方になってしまいましたが、とりあえずこれで進めてみます。

    お騒がせしました。

  3. fuku

    しげぞう様

    お世話になります。fukuです。
    返信遅れまして申し訳ございません。。

    タイトル
    ●項目
    ●項目
    ●項目

    というような構成で、「●項目」の部分が枠線で囲まれている形です。

    URLは以下です。

    よろしくお願いします。

  4. しげぞう 投稿作成者

    fuku様

    コメントありがとうございます。リスト枠はどのような感じでしょうか?目次のリスト自体に枠があるような感じですか?一度URLを教えて頂けると助かります。どうぞよろしくお願い致します。

  5. fuku

    お世話になります。fukuです。

    目次ページの件で質問があります。
    スマホで見たとき、リンクを指定したリストが変な枠で囲われているのですが、修正する方法は無いでしょうか?

    お手数ですが、よろしくお願いします。

  6. しげぞう 投稿作成者

    fuku様

    返信ありがとうございます。スタイルシートを1枚余計に読む対策なので、「●」の手入力の方が早いかもしれません。アメブロだと使えないタグも多いので、使い所が難しい部分ですね。

  7. fuku

    しげぞう様

    お世話になります。fukuです。

    下記サイトを参考にスマホ用シート編集を試みたのですが、上手くいきませんでした。。
    とりあえず「●」と手入力して代用することにします。アメブロはアフィリエイトもに関する制約も厳しく、スマホ用CSS編集機能も無いので使いづらい感がありますね;

  8. しげぞう 投稿作成者

    fuku様

    返信ありがとうございます。なるほど、アメブロのスマートフォンページですね。基本アメブロはスマートフォン版のスタイルシートは編集できかったと記憶しております。裏ワザ的にスマートフォン版のCSSを追加する方法はあるのですが、非常に面倒です。一応参考になりそうな記事がこちらです。
    http://kanrinin-fukuon.seesaa.net/article/405831079.html

    私の場合はアメブロは集客用だけに使う感じで、10記事程度のミニブログだけで使う感じなので、基本的なデザインのカスタマイズしかしてません。アメブロを収益化するのではなく、他のブログに流すようなサテライトサイトとして使ってましたが、最近はほとんど使う事がありません。ただ、同じ趣味や興味を持つ方との交流の場としての使い方はできるかと思います。

  9. fuku

    しげぞう様

    お世話になります。fukuです。

    わかりづらくて申し訳ございません;
    パソコンで見ると箇条書きの●とh3装飾が表示されていて、携帯では表示されてないという状態です。

    URLは以下です。お手数ですがよろしくお願いします。

  10. しげぞう 投稿作成者

    fuku様

    コメントありがとうございます。スマホで崩れるというのはどのような状態でしょうか?表示されないのか?それとも表示されるけど、箇条書きになっていないのでしょうか?一度お手数ですがURLとどのような状態なのかを教えて頂けると助かります。

  11. fuku

    しげぞう様

    お世話になります。fukuです。

    最近アメブロの方でもブログを始めたのですが、箇条書きが上手くできません。。
    正確に言うと、パソコンで見るとリストタグが上手く機能しているのですが、スマホで見ると崩れてしまっています。

    シーサーブログのようにスマホ用にCSSを設定する方法はないのでしょうか?

    以上です。よろしくお願いします。

  12. fuku

    しげぞう様

    お世話になります。fukuです。
    ありがとうございます。設定が反映されました。

  13. しげぞう 投稿作成者

    fuku様

    返信ありがとうございます。ブログを確認させて頂きましたが、クラス名を囲む「 ” 」が2重になっており、さらに全角の「 ” 」になってますので、半角に直して下さい。

    つまり、「ul class=””list””」となっていると思いますので、これを「ul class=”list”」と書きなおせば反映されると思います。全部半角で入力して下さい。

  14. fuku

    しげぞう様

    お世話になります。fukuです。

    ご教示いただきましたコードを入力してみましたが、ダメでした。。

  15. しげぞう 投稿作成者

    fuku様

    返信ありがとうございます。トップページで箇条書きのコードの初めに「ul」というタグがありますが、これに名前を付けて対応してみます。それぞれ箇条書きリストの初めに「ul」というタグで始まると思いますので、まとめページの記事修正で、これを「ul class=”list”」という名前に書き換えて保存して下さい。

    次にスタイルシートで次のコードを入れて黒ポチを入れます。

    .list li {
        list-style-type: disc;
    }

    これで黒ポチは入りますが、黒ポチが左側にはみ出すような感じになりますので、スタイルシートに次のコードも追加して調整します。

    ul.list {
        padding-left: 15px;
    }

    これで箇条書きのリストの左側に余白を作り、リスト全体をちょっと右に収める事ができるかと思います。一度これで試して見てもらえますか?

  16. fuku

    しげぞう様

    いつもお世話になります。fukuです。

    本日ブログにまとめページを作成しましたが、1点問題があります。
    本記事の通り箇条書きのコードを使用してまとめページを作ってみたのですが、トップページに黒ポチ(●)が反映されません。
    ただし、個別記事のページに飛ぶと反映されています。他の記事でも何度も質問させていただいているので恐縮ですが、ご対応お願いできますでしょうか。

    以上です。よろしくお願いします。

  17. しげぞう 投稿作成者

    >海外様

    コメントありがとうございます。私自身は毎回記事を書くたびにまとめページに新しい記事のリンクを追加して最新の日付にするという方法をしていましたが、確かに面倒ですよね。WordPress等では1つの記事をトップページに固定する事はできますが、シーサーブログではやった事がありません、というのも、各記事にそれぞれのURLがくっ付いていますので、それをトップページにするというのは難しいと思います。

    そのため、私の場合は上記の方法をしていたのですが、それ以外ではまとめページの公開日付を未来の日付(一年後)とかにしても公開できたような気がします。面倒ならそのような方法でも可能かと思いますが、日付が未来になっている事で検索エンジン的に評価が変わるのか?という部分は実験してませんので分かりません。また、シーサーブログの仕様が変更になったりしたらもっと良い方法があるかもしれません。

  18. 海外

    いつも勉強させてもらってます。
    記事一覧を作りましたが、次へなどを表示させずこちらをトップページにしたいのですが、それは出来ないのでしょうか?
    説明不足かもしれませんが、記事を更新した時に、記事を表示させずまとめだけをトップページにしたいんです。

  19. しげぞう 投稿作成者

    >sino様

    コメントありがとうございます。sino様の推察通り各カテゴリーの最後にまとめページを作っています。カテゴリーをクリックするとカテゴリーの最新記事に飛びますので、カテゴリーの最新記事にそれぞれまとめページを作成しています。カテゴリーはよくクリックされていたのでここも情報をまとめてあった方が記事を探しやすいかなと思ってそのように作ってます。

    カテゴリーに新しい記事を追加する場合は追加した後に追加したカテゴリーのまとめページの日付だけ最新に変更してまとめページが一番最初に来るように調整しています。

  20. sino

    シゲゾウさんいつも有益な情報ありがとうございます。
    とても分かりやすく重宝しています。
    今後ともよろしくお願いします。
    1点質問がございます。
    目次ページの作り方なのですが、現在私はワードプレスで
    サイトを作っております。しかしカテゴリーから記事へ飛ばす時にどうしても
    カテゴリーの最新記事が表示されてしまいます。

    カテゴリーからとばしてからのまとめページの表示方法はどうのようにすればよいでしょうか?
    例えばこのサイトだとカテゴリーの中にシーサーブログのカスタマイズというところがあります。そこをクリックするとシーサブログのカスタマイズのまとめページへ飛びます。
    これはどのようにされているのでしょうか?

    まとめページは各カテゴリーの最後に作っているのでしょうか?
    お手数ですが教えていただけないでしょうか?
    お話しできる範囲で構いません。
    すみませんがよろしくお願いします。
    sino