Seesaaブログにパンくずリストを表示させて訪問者にブログ内での現在位置を把握させよう

パンの盛り合わせ

※決して食べ物の話ではありません(笑)

本ブログの記事ページのすぐ上にある [ブログタイトル] > [カテゴリ名] > [記事タイトル] の順に表示されているリストをパンくずリストと呼びます(下の画像の赤枠)。
breadcrumbs-list.png

このリストを表示することで、あなたのブログに訪れたユーザーは現在位置を直感的に把握することができるようになります。

今回はこのパンくずリストをブログに表示する方法をご紹介します。

今回の目次

パンくずリストとは

パンくずリストの詳細については、IT用語辞典 e-Wordsからの引用で説明します。

パンくずリストとは、あるWebページのサイト全体の中での位置を、階層構造の上位ページへのリンクを順に並べて簡潔に記したもの。トップページからそのページまでの経路を示すことにより、訪問者がサイト内での現在位置を直感的に把握するのに役立つ。名称の由来は童話「ヘンゼルとグレーテル」で、森の中で帰り道が分かるようにパンくずを少しずつ落としながら歩いたというエピソードである。

引用:パンくずリストとは|ブレッドクラム|トピックパス - 意味/解説/説明/定義 : IT用語辞典

『ヘンデルとグレーテル』から由来されているとは、なんとも素敵な話ですね。


設置方法(新デザインシステム)

これから具体的な設置方法をご紹介します。
まずは新デザインシステムから。

  1. マイブログ > [デザイン] > [PC] > [デザイン設定] と順にクリックし、デザイン設定画面で現在ブログに設定されているデザインタイトルのリンクをクリックします。
  2. スタイルシート編集画面が表示されたら、[HTML編集] のタブをクリックします。
  3. HTML編集画面に切り替わったら、ページ内検索( Ctrl + F など)で以下のコードを探します。
    <div class="l-content">
    
    ※ページ内検索は、HTMLコードを一度メモ帳などのテキストエディタにコピー&ペーストしてから操作を行うとやりやすいです。
  4. 上記手順3で見つけたソースコードの真下に以下のソースコードを貼り付けて、HTML編集画面内の [保存] ボタンをクリックします。
    <% if:page_name eq 'article' -%>
    <ol class="crumb">
      <li><a href="<% blog.page_url %>"><% blog.title %></a></li>
      <% loop:list_article -%>
      <li><a href="<% article_category.page_url %>"><% article_category.name %></a></li>
      <li><% extra_title %></li>
      <% /loop -%>
    </ol>
    <% /if %>
    
  5. HTML編集画面での保存が終わったら、 [スタイルシート編集] タブをクリックし、スタイルシート編集画面に切り替え、以下のコードを貼り付け、編集画面内の [保存] ボタンをクリックします。
    .crumb {
       font-size: 14px;
       line-height: 18px;
       margin: 0px 0 10px 0px;
    }
    ol.crumb > li {
      display: inline;
      list-style-type: none;
    }
    ol.crumb > li:before {
      content: " > ";
    }
    ol.crumb > li:first-child:before {
      content:"";
    }
    
    ※貼り付ける位置はどの場所でも問題ありません。
    .crumb にある以下プロパティの値はお好みによって変更可能です。
    • font-size
    • line-height
    • margin

設置方法(従来のデザインシステム)

続いては従来のデザインシステムでの方法です。

  1. マイブログ > [デザイン] > [PC] > [コンテンツ] と順にクリックし、コンテンツ編集画面が表示されたら [記事] コンテンツの歯車マークをクリックします。
  2. 記事コンテンツの詳細設定画面が表示されたら、画面内右上の [コンテンツHTML編集] のリンクをクリックします。
  3. 記事のコンテンツHTML編集画面が表示されたら、ページ内検索( Ctrl + F など)で以下のコードを探します。
    <!-- Content -->
    
  4. 上記手順3のソースコードが見つかったら、その真下に以下のソースコードを貼り付け、記事のコンテンツHTML編集画面内の [保存] ボタンをクリックします。
    <% if:page_name eq 'article' -%>
    <ol class="crumb">
      <li><a href="<% blog.page_url %>"><% blog.title %></a></li>
      <% loop:list_article -%>
      <li><a href="<% article_category.page_url %>"><% article_category.name %></a></li>
      <li><% article.subject %></li>
      <% /loop -%>
    </ol>
    <% /if %>
    
  5. 詳細設定画面右上の×印をクリックして詳細設定画面を閉じ、コンテンツ編集画面に戻ったら、画面内の [保存] ボタンをクリックします。
    ※こちらの操作を行わないと、記事のコンテンツHTML編集画面で行った操作内容がブログに反映しませんので、ご留意ください、
  6. [デザイン] > [PC] > [デザイン設定] と順にクリックし、デザイン設定画面が表示されたら、ブログに設定されているデザインタイトルのリンクをクリックします。
  7. スタイルシート編集画面が表示されたら、以下のコードを貼り付け、編集画面内の [保存] ボタンをクリックします。
    .crumb {
       font-size: 14px;
       line-height: 18px;
       margin: 0px 0 10px 0px;
    }
    ol.crumb > li {
      display: inline;
      list-style-type: none;
    }
    ol.crumb > li:before {
      content: " > ";
    }
    ol.crumb > li:first-child:before {
      content:"";
    }
    
    ※貼り付ける位置はどの場所でも問題ありません。
    .crumb にある以下プロパティの値はお好みによって変更可能です。
    • font-size
    • line-height
    • margin

いかがでしたか。
これでブログにパンくずリストが表示されるので、ぜひお試しください。

※本記事でご紹介した内容はあくまで一例となります。
また、HTMLやスタイルシート(CSS)の編集に関して、編集箇所や内容および編集結果を含め、サポートは一切行っておりません。
お問い合わせいただいてもご案内できませんので、あらかじめご了承ください。