カテゴリページ内にハイパーリンク付きの記事一覧を表示

更新
2012年11月29日(木)

カテゴリページ内にそのカテゴリに属する記事一覧をハイパーリンク付きで表示する方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. カテゴリページ上部に記事一覧を表示します。

  2. 記事一覧内の記事タイトルをクリックした時の挙動を次の2つから選択できます。

  3. HTML編集だけでCSS編集はありません。

  4. 追記:テンプレートの上記ver以降はページ内リンクで記事の部分までスクロールするコードが最初から記載されています。ページ切り替えしてページを開く方がいい場合はコードを入れ替えます。

メリット

  1. そのカテゴリにどのような記事があるのか分かりやすくなります。

  2. 読者が目的のページを探しやすくなります。

テンプレートのHTMLを編集

HTMLコードを挿入する場所

  1. HTML編集で次のコメントアウトを見つけます。下図で反転している部分です。

    <!-- ▲▲▲ カテゴリページごとの固定表示スペース 終了 ▲▲▲ -->
    valid-seo-3c-112-lists-in-category-1.png
  2. 上記コメントアウトの下に、以下で記載するコードのどちらかを挿入します。

ページ切り替えしてページを開くコード

  1. 記事一覧内のページをページ切り替え(画面遷移)して開く場合、次のコードを挿入します。

    <div id="lists-in-category" class="round categories">
    <h2 class="entry-title">「<%sub_title> 」カテゴリ記事一覧</h2>
    <ul>
    <!--topentry-->
    <li><a href="<%topentry_link>" title="<%topentry_title> | <%blog_name>"><%topentry_title></a> <span class="entry-date"><%topentry_year>年<%topentry_month>月<%topentry_day>日(<%topentry_wayoubi>)</span></li>
    <!--/topentry-->
    </ul>
    <!--page_area-->
    <ul id="pager2" class="round">
    <!--prevpage-->
    <li id="pager-previous2"><a href="<%prevpage_url>"><%template_prevpage></a></li>
    <!--/prevpage-->
    <!--nextpage-->
    <li id="pager-next2"><a href="<%nextpage_url>"><%template_nextpage></a></li>
    <!--/nextpage-->
    </ul>
    <!--/page_area-->
    </div>
    
  2. 下図で反転している部分が挿入後のコード表示例です。

    valid-seo-3c-112-lists-in-category-2.png

ページ内リンクでスクロールするコード

  1. ページ内リンクで記事の部分までスクロールする場合、次のコードを挿入します。

    <div id="lists-in-category" class="round categories">
    <h2 class="entry-title">「<%sub_title> 」カテゴリ記事一覧</h2>
    <ul>
    <!--topentry-->
    <li><a href="#e<%topentry_no>" title="<%topentry_title> | <%blog_name>"><%topentry_title></a> <span class="entry-date"><%topentry_year>年<%topentry_month>月<%topentry_day>日(<%topentry_wayoubi>)</span></li>
    <!--/topentry-->
    </ul>
    <!--page_area-->
    <ul id="pager2" class="round">
    <!--prevpage-->
    <li id="pager-previous2"><a href="<%prevpage_url>"><%template_prevpage></a></li>
    <!--/prevpage-->
    <!--nextpage-->
    <li id="pager-next2"><a href="<%nextpage_url>"><%template_nextpage></a></li>
    <!--/nextpage-->
    </ul>
    <!--/page_area-->
    </div>
  2. 下図で反転している部分が挿入後のコード表示例です。

    valid-seo-3c-112-lists-in-category-3.png

表示される記事数を変更

  1. 表示される記事数は、管理画面の環境設定で変更できます。

    valid-seo-3c-112-lists-in-category-4.png
  2. 1ページあたりに表示される記事数と同じ数だけ記事一覧に記事タイトルが表示される、ということです。

今後のテンプレート改訂時には

  1. テンプレートの改訂時にこのページで述べた内容を盛り込み、デフォルト状態からよりカスタムしやすいように改良する予定です。

  2. customtemplateはver1.2.1以降、valid-seoシリーズはver1.1.3以降なら上記コードやキャプチャー画像とCSS編集内の記載事項に多少の相違があると思います。

他サイトの参考になるページへのリンクです。日付は各ページの公開日もしくは最終更新日です(このページの公開日現在)。ありがとうございます。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)