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

サイト作成に役立つツール・素材・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. しげぞう より:

    REN様

    返信ありがとうございます。サイトも拝見させていただきました。私の意見が参考になるかは分かりませんが一応書いてみます。

    まず、トップページのリストの問題ですが、これはトップページでリストタグに対するスタイルシートがあり、●を表示しないスタイルになってます。なので、この部分に独自のクラス名をつけて●の装飾をスタイルシートでやっていきます。

    先に投稿記事の編集画面を開いて目次を追加した部分を確認して下さい。「ul」タグがあって、その後に「li」タグが並んでいると思います。

    この「ul」にクラス名をつけますので、目次部分最初の1行の「ul」の部分を次のように編集して下さい。

    <ul class="list">

    これで「ul」に「list」というクラス名が付きますので、これで保存します。

    次に「スタイルシート」でこの「list」に●を表示させるスタイルを追加します。

    ul.list li {
        list-style-type: disc;
        margin-left: 15px;
    }

    これでスタイルシートの編集もOKです。●を追加すると若干左に寄っている感じになるので、「margin-left」で左に余白を作り右に少し寄せます。

    これでブログを表示させ、「Ctrl」と「F5」を一緒に押してリロードしてから確認してみてください。

    それから直したら良い点や修正点ですが、2点だけ書かせて頂きます。

    1.本文で強調したい部分に下線を入れられているのですが、これは下線ではなく別の方法にした方が良いと思います。太字、カラー、蛍光ペンのような装飾など色々あります。

    カラーにしてもリンクの色(青)以外の色がおすすめです。というのも、下線を引いてあるとリンクと勘違いする人が結構多いです。結果としてリンク部分がリンクとして認識されない場合があります(リンクにも下線があるため)。そんな人はいないと思うかもしれませんが、そういう初心者の方も多いのが現状です。

    リンク部分に下線が入っているので、本文中の強調したい部分には下線は使わない方が良いと思います。

    2.タグクラウド

    現在サイドバーにタグクラウドが設置されてますよね。これは特に問題があるわけではないのですが、サイドバーってどのページでも表示される部分です。つまり100ページあれば100個の内部リンクになります。内部リンクが集まる部分は重要なページと認識される事が多いです。これ自体はいいのですが、時々検索で記事タイトルではなく、タグが表示される事があるんです。タグの単発キーワードで検索結果に表示されてもあまりクリックされません。つまり、個別記事よりもタグが強い感じになる場合が時々あります。

    どうせならきっちり記事タイトルで上位表示させた方がクリックもされやすいので、記事タイトルと重複するようなタグであればサイドバーには置かない方が良いかもしれません。これはあくまで私個人の考えで間違っているかもしれませんが、私自身はタグクラウドはできるだけサイドバーには置かないようにしてます。

    以上2点だけ書かせて頂きましたが、あくまで個人的な意見なので、参考にする、しないは実際にREN様が検証されてみる事をおすすめします。

  2. REN より:

    現在作りかけの、そして辞めるか迷っているURLです。

    一応このホームページを見て色々試行錯誤しながら作成し始めたものです。実体験とメディアの情報とがあまり合致するところが少なく記事もこれから作るか、出来そうになければ削除してしまうか迷っています。
    それはさておき、これから違うブログも作ってみたいと思っていますので、アドバイスお願いします。画像の件はすべてサイズを変えてクリアできました。トップページの見出し装飾も、スタイルシートに確か(.entry h4)と挿入して装飾メニューを作ったら表示されるようになりました。合っているかどうかは別として解決はしました。問題は、目次を挿入したのですが、やはりトップページだけ●が表示されません。原因を教えて下さい。
    また、私のサイトを見て、直した方が良い点や修正点などアドバイスいただきたいです!
    今後新しくまたブログを一から作りたいので、尊敬するこのサイト管理者しげぞうさまからアドバイスをいただけたら嬉しいです。宜しくお願いします。

  3. しげぞう より:

    REN様

    コメントありがとうございます。おそらくトップページの見出しだと思うのですが、Seesaaブログの場合はトップページと個別ページでそれぞれ見出しのクラス名が違う場合があります。なので、個別ページでは見出しの装飾ができているのに、トップページでは反映されないというような場合があります。

    その場合にはトップページの見出しのクラス名を調べてスタイルシートで再度スタイルを当てる作業が必要な事があります。多分それが原因だろうと思います。もし可能であればURLを教えて頂けると詳しいクラス名など調べる事ができるかと思います。必ず解決できるかは分かりませんが。

    未熟なサイトでも歓迎ですし、私自身毎日色々なサイトを見ているため、正直どれが誰のサイトであるかはほとんど記憶しておりません。なのでもし気が向いた時で構いませんのでURLも教えて頂けるとありがたいです。

  4. REN より:

    おはようございます。先日はコメントへの返事ありがとうございます。URLについてはまだ未熟者のためお教えするのを迷っておりました!笑
    一応画像をアップしなおしたところ全てはまりましたのでご報告いたします。ありがとうございました。そこで問題が発生しました。記事ページを1にしてアップし直したところ、ホームページのトップ画面のようになり、そこに目次も挿入されましたが、記事内の装飾タグ?h3やh4が表示されなくなってしまいました。要するに装飾されないで単なる文字になってしまいました。記事と同一の文字な為非常に読みにくいので、記事ページを元に戻し、ホームページ風のトップページを表示させるコードを削除したら元に戻りました。なぜでしょうか?続きを読む…を消したら装飾が駄目になるのです。せっかく画像等を教えていただいたとおりなおしたのに、コレでは格好がつきません!原因わかりますでしょうか…?

  5. しげぞう より:

    REN様

    返信ありがとうございます。Seesaaであればおそらく固定はできないと思いますので、日付の調整が必要かと思います。また、画像ですが一度サイズを変更した物をアップして試して見てください。それで上手くハマるようであれば全ての画像をアップする必要があるかもしれませんので、まずは1つの画像で試してみる事をおすすめします。もしかするとスタイルシートで画像のサイズを変更すれば上手くいくかもしれません。それなら一括で変更できるかもしれませんので、もし良かったら一度URLを教えて下さい。コメント公開時にはURLは削除します。

  6. REN より:

    少し間が空いてしまいましたが、seesaaブログです。固定は出来ませんよね?

    トップページを一応作ってみましたが、画像がはみ出てしまいました。これは元のサイズが大きすぎるのですよね?全てサイズ変更してアップしなおすしかありませんか?それとも一括で設定できますか?

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