パンくずリストを改良し、親子カテゴリの階層を厳密に表示する

パンくずリストを改良する具体例です。子カテゴリページ表示時のパンくずリストに、親カテゴリーも表示する設定です。当サイトで配布しているvalid-seo-2c と valid-seo-3c のver1.0.1までについてです。

標準設定でのパンくずリストの表示例

個別記事ページ (例:blog-entry-1.html)

  1. 親子階層分けなし
    HOME カテゴリー 記事タイトル
    親子階層分けありで、親カテゴリー内の記事
    HOME 親カテゴリー 記事タイトル
    親子階層分けありで、子カテゴリー内の記事
    HOME 親カテゴリー 子カテゴリー 記事タイトル

カテゴリーページ (例:blog-category-1.html)

  1. 親子階層分けなし
    HOME カテゴリー
    親子階層分けありで、親カテゴリー
    HOME 親カテゴリー
    親子階層分けありで、子カテゴリー
    HOME 子カテゴリー

改良すべきポイント

  1. 上記最後の項目、「親子階層分けありで、子カテゴリー」の表示には、「HOME」と「子カテゴリー」の間に「親カテゴリー」の表示が望まれます。FC2の変数では対応しきれませんが、JavaScriptを使えば対応可能です。といっても、自分でコーディングする必要はなく、既に解決方法が下記ページに掲載されています。ありがとうございます。

  2. FC2ブログ用パンくずリスト 親子カテゴリ完全対応版 - hatena chips

親子カテゴリの階層を厳密に表示するコード

  1. HTML部分を改良すると、「親子階層分けありで、子カテゴリー」でのパンくずリストは次のようになります。

    HOME 親カテゴリー 子カテゴリー
  2. 次のコードを下図のとおりコピペします。なお、このコードは上記hatena chipsさんのコードをベースに、当サイトで配布しているvalid-seo-2c と valid-seo-3c用に一部修正したものです。

    
    <!--category_area-->
    <div id="breadcrumbs" class="round">
    <a href="<%url>" title="<%blog_name>">HOME</a><span class="arrow">&#9658;</span>
    <script type="text/javascript">
    <!--
    al = new Array(<!--topentry--><!--parent_category-->'<%topentry_parent_category_link>',<!--/parent_category--><!--/topentry-->-1);
    ap = new Array(<!--topentry--><!--parent_category-->'<%topentry_parent_category>',<!--/parent_category--><!--/topentry-->-1);
    if ('<%sub_title>' != " " + ap[0]) document.write('<a href=\"', al[0],'\">' , ap[0], '</a> <span class="arrow">&#9658;</span>');
    //-->
    </script>
    <%sub_title>
    </div>
    <!--/category_area-->
    
  3. 変更前

    valid-seo-101-breadcrumbs-1.png
  4. 変更後

    valid-seo-101-breadcrumbs-2.png

補足事項

  1. 上記hatena chipsさんのページに下記の注意事項がありますので、引用いたします。

    親カテゴリの名前を変更したときに、旧カテゴリ名-新カテゴリ名 と表示される という不具合の報告がありました。原因は、FC2ブログのシステム側の不具合と思われますので、スクリプトでの対応は難しいです。
    とりあえずの対策として、親カテゴリの名前を変更したときは、それの子カテゴリにチェックをいれて「修正」ボタンを押して、その後、子カテゴリのチェックを外して「修正」ボタンを押す、というように2段階の手順を踏むようにしてください。
  2. 当ページの改良を施すと、HTML-lintで次の軽度のエラーで1点減点されます。

    <script>~</script> 内にコメントを書くと、本当にコメントとして扱われます。
  3. JavaScriptが無効の場合、改良前の表示になるだけです。特に不具合はないと思います。以上です。

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