Bloggerテンプレート自作 #19：パンくずリストを作る

前回の「404ページを作る」に引き続き、今回は「パンくずリストを作る」を実践してみようと思う。

パンくずリストとは、サイトのページ階層において現在のページ位置をわかりやすくリスト表示したもので、Bloggerでは 「ホーム ＞ ラベル名 ＞ ページタイトル」のような形で表示される。

今回は、自作テンプレートにパンくずリストを組み込む方法をまとめていくことにする。


作業工程


パンくずリスト用のコードを取得する


Breadcrumb for Blogger - Blogger Widgets

Bloggerには標準でパンくずリストを表示させる関数は無いので、上記のサイト様のコードをお借りして、これをベースにパンくずリストを作っていくことにする。で、このコードは8年前のもので、当時と現在では環境が異なるため、少々コードの修正が必要になる。

Blogger パンくずリスト導入の注意点（ざっくりログ）

コードの内容に関しては、上記のサイト様が参考になる。ちなみに現行のテンプレートにパンくずリストを導入する方法は「Blogger パンくずリスト」でググればいくらでも見つかる。

HTMLを作る


<!-- 省略 -->

<b:section id='メイン' class='main'>
  <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' visible='true' version='1'>
    <b:includable id='main'>

<!-- パンくずリストの呼び出し -->
<b:include data='posts' name='breadcrumb'/>

<!-- ページタイプの条件分岐（省略） -->

<!-- パンくずリスト -->
<b:includable id='breadcrumb' var='posts'>
  <!-- 条件分岐：トップページでない時 -->
  <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <!-- 固定ページのパンくずリスト -->
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>ホーム</a></span> <i
          class="fa fa-chevron-right pause-icon" /> <span>
          <data:blog.pageName /></span></div>
      <b:else />
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <!-- 個別記事ページのパンくずリスト -->
        <b:loop values='data:posts' var='post'>
          <b:if cond='data:post.labels'>
            <div class='breadcrumbs' xmlns:v='https://schema.org/#'>
              <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title'
                  rel='v:url'>ホーム</a></span>
              <b:loop values='data:post.labels' var='label'>
                <i class="fa fa-chevron-right pause-icon" /> <span typeof='v:Breadcrumb'><a expr:href='data:label.url'
                    property='v:title' rel='v:url'>
                    <data:label.name /></a></span>
              </b:loop>
              <i class="fa fa-chevron-right pause-icon" /> <span>
                <data:post.title /></span>
            </div>
            <b:else />
            <!-- タグがない場合のパンくずリスト -->
            <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>ホーム</a></span> <i
                class="fa fa-chevron-right pause-icon" />
              <span>未分類</span> <i class="fa fa-chevron-right pause-icon" /> <span>
                <data:post.title /></span></div>
          </b:if>
        </b:loop>
        <b:else />
        <b:if cond='data:blog.pageType == &quot;archive&quot;'>
          <!-- アーカイブページのパンくずリスト -->
          <div class='breadcrumbs'>
            <span><a expr:href='data:blog.homepageUrl'>ホーム</a></span> <i class="fa fa-chevron-right pause-icon" />
            <span>アーカイブ:
              <data:blog.pageName /></span>
          </div>
          <b:else />
          <!-- インデックスページ（ホーム・ラベル・検索）のパンくずリスト -->
          <b:if cond='data:blog.pageType == &quot;index&quot;'>
            <div class='breadcrumbs'>
              <b:if cond='data:blog.pageName == &quot;&quot;'>
                <!-- 2ページ以降の記事リストのパンくずリスト -->
                <span><a expr:href='data:blog.homepageUrl'>ホーム</a></span> <i class="fa fa-chevron-right pause-icon" />
                <span>投稿一覧</span>
                <b:else />
                <!-- その他場合のパンくずリスト -->
                <span><a expr:href='data:blog.homepageUrl'>ホーム</a></span> <i class="fa fa-chevron-right pause-icon" />
                <span>
                  <data:blog.pageName /></span>
              </b:if>
            </div>
          </b:if>
        </b:if>
      </b:if>
    </b:if>
  </b:if>
</b:includable>

パンくずリストは、上記のようにBlogガジェット内に記述した。

具体的な場所は、条件分岐の下にパンくずリストのコードのひとまとまりを記述し、それをページの最上部に読み込ませるように条件分岐の真上に呼び出し用のコードを記述した。

お借りしたコードは色々と改変させてもらった。主な改変ポイントは、スキーマの指定、区切りアイコンの指定、パンくずリストに表示されるメッセージなど。とりあえず、わかりやすくするためにコード内にコメントをつけている。

CSSを整える


Bloggerテンプレート自作 #19：パンくずリストを作る

/* ----------------------------------------------------------------------------
    メイン
---------------------------------------------------------------------------- */

/* メインの背景色 */

.main-wrapper {
  position: relative;
  background: #eee;
  padding: 40px 10%;
  z-index: 1;
}

/* 中略 */

/* ----------------------------------------------------------------------------
    パンくずリスト
---------------------------------------------------------------------------- */

.breadcrumbs {
  position: absolute;
  top: -30px;
  z-index: 2;
  width: 100%;
  max-width: 75vw;
  font-size: 13px;
  font-weight: bold;
  color: #666;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.breadcrumbs a {
  color: #999;
  text-decoration: none;
  padding: 2px;
}

.breadcrumbs a:hover {
  opacity: 0.6;
}

/* レスポンシブ（スマホ縦） */

@media screen and (max-width: 560px) {
  .breadcrumbs {
    top: -23px;
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    text-overflow: unset;
    -webkit-overflow-scrolling: touch;
  }
}

上記のようなCSSを記述すると、画像のようなデザインになる。

パンくずリストはサイト上部のヘッダーナビとメインの間に表示されるように指定したのだが、ページの切替時にコンテンツの高さが変わると気持ち悪いので、position: absolute;でパンくずリストを絶対位置で表示されるように指定している。

このposition: absolute;を使うためにメインを囲むラッパー部分にposition: relative;とz-index: 1;を指定し、パンくずリストにz-index: 2;を指定することで要素の重なり的にパンくずリストを上部に表示できるようにしている。なんのこっちゃという人はpositionとz-indexについてググってもらえれば言いたいことが理解してもらえると思う。

なお、Bloggerのパンくずリストは「ホーム ＞ ラベル名 ＞ ページタイトル」という形で表示されるのだが、記事に複数のラベルをつけていたり、めちゃめちゃ長いタイトルのラベルをつけているとデザインが崩れてしまう。

Bloggerテンプレート自作 #19：パンくずリストを作る

これを回避するためにパンくずリスト表示部分のwidthを限定し、はみ出た部分は…で表示されるようにした。

Bloggerテンプレート自作 #19：パンくずリストを作る

また、スマホ表示の場合は、スワイプで横スクロールできるようにしている。

余談


Google構造化データテストツールのエラーについて


【検証】

・構造化データテストツール（旧版）
・リッチリザルトテスト（新版）

上記のページでは、指定したページからパンくずリストが取得できるかどうかをテストすることができる。

Bloggerの場合、パンくずリストはトップページに読み込まれない仕様っぽいので、それ以外のページで試す必要がある。例えば、適当な個別記事ページのURLを打ち込んでテストすると、上手く行けばBreadcrumbが検出される。

元コードではパンくずリストのスキーマは「data-vocabulary.org」で指定されており、コード内の

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

という部分がこれに該当する。

Bloggerテンプレート自作 #19：パンくずリストを作る

この状態でテストツールを使ってみると、Breadcrumbは検出できるものの「data-vocabulary.orgのスキーマは終了しました。今後、Googleがこのスキーマをサポートする予定はありません。schema.orgタイプへの移行をお願いいたします」という警告メッセージが表示される。

これについて調べてみると、Googleが今年の4月に「data-vocabulary.org」を検索結果のリッチリザルトの対象外にすることを決めたらしい。要するに「data-vocabulary.org」を使ったパンくずリストが検索結果に表示されなくなるということ。

そこで、Googleの推奨した「schema.org」に変更すべく、上記のコードを以下のように変更した。

<div class='breadcrumbs' xmlns:v='https://schema.org/#'>

で、この状態で同様のページをテストしてみると、

Bloggerテンプレート自作 #19：パンくずリストを作る

となり、パンくずリストが読み込まれて警告メッセージは表示されなくなった。細かいことは現状わかってないので、とりあえずこのままで様子を見ることにする。