シンプルなパンくずリストを作ってみた

パンくずリスト

パンくずリストは、階層ページでのナビゲーションとして最もポピュラーなUIです。ひと目で今いる階層が分かり、簡単に上層やホームへ戻ることもできます。

また、Microdataを使ってGoogle検索のスニペットにパンくずリストを表示させてクリック率を改善できるかもしれません。SEO的にはパンくずリストは特に効果が高いわけではないと思いますが、アンカーテキストにキーワードが入っていれば、SEO改善に少しは貢献するかもしれません・・・(もちろん保証はないです)。

一番シンプルなパンくずリストは本サイトのようなパンくずリストでしょう。階層にジャンプするテキストリンクが上層から右向きに並び、階層ごとに区切り文字が入ります。本サイトでは「/(スラッシュ)」ですが、よくあるのは「>」や「>>」でしょうか。

こパンくずリストを作るには、ulタグのリスト要素であるliタグを「float: left;」で並べるだけです。あとはアイコンを付けたり、さまざまなデザインが入っているだけです。構造は本当にシンプルです。

さすがにそれだけでは物足りないので、今回はシンプルなパンくずリストに少し盛ってみます。

  • Microdataを使ったパンくずリスト
  • 長すぎるアンカーテキストを省略して改行を抑制する
  • テキストリンクではなくビジュアル的な表現(レスポンシブを少しだけ意識)

というわけで完成したものが下にあります。

  • 第1階層第1階層第1階層第1階層第1階層第1階層第1階層第1階層第1階層第1階層第1階層

Microdataを使ったパンくずリスト

Microdataを使うと、Googleの検索エンジンに「ここがパンくずリストのデータだ」ということを伝えることができます。それによって、スニペットにページのURLではなく、パンくずリストが表示されます。

というわけで、上記サンプルのHTMLを見てみます。

ポイントは、パンくずリストの要素(今回はliタグ)に「itemscope=”itemscope” itemtype=”http://data-vocabulary.org/Breadcrumb”」をつけることと、スニペットに表示するリンクのaタグに「itemprop=”url”」をつけること、そしてアンカーテキストをspanタグで囲み、spanタグに「itemprop=”title”」をつけることです。

「itemprop=”url”」をつけたアンカーに対して「itemprop=”title”」をアンカーテキストとしてスニペットに表示されます。

最下層もリンクにすれば最下層までスニペットに表示されますが、最下層のリンクは自分のURLなのでそこまでスニペットに表示させるか、という点はサイトそれぞれという感じです。私の見た範囲ではリンクにしてない方が多い気がします。

長すぎるアンカーテキストを省略して改行を抑制する

今回はスマホサイトでも1行でパンくずリストを表示させたい、ということを想定しています。その場合、アンカーテキストが長いとパンくずリストの中で改行されてパンくずリストの高さがどんどん高くなってしまいます。スマホサイトのファーストビューにおいて、3行4行も改行されてほとんどパンくずしか見えないという状況は避けたい、ということを言い出すクライアントがいたら・・・という想定ですね。

文字数でテキストを切りたくなりますが、レスポンシブサイトの場合は画面幅に余裕のあるPC表示ではリンクテキストをなるべく全部出したいでしょう。そういうときは、CSSを使います。パンくずリストのアンカーと最下層のテキストを囲んだspanタグに、以下のようなCSSを定義します。

「text-overflow」プロパティは、テキストが表示領域をオーバーフローしていることをユーザに通知するための機能です。たとえば上記のサンプルのように「text-overflow: ellipsis;」とすると、切り取った文字列の後ろに「…」をつけることができます(「text-overflow: clip;」とすると空文字になります。他の文字を通知に使うこともできます)。

これを使うためには、要素がブロック要素であり、「white-space: nowrap;」などで折り返しを禁止したうえで、「overflow: hidden;」で表示領域外の要素を非表示にする必要があります。これらのプロパティ(必要ならdisplay:blockをプラス)は1セットと思ってもいいと思います。

ウィンドウ幅を小さくすると分かりますが、スマホサイズではせめて2行ぐらいになっててもいいかなーと思いました。1行だと表示できる文字が少なすぎてナビゲーションになりません。とはいえ、2行目以降のみ領域外テキストを非表示にするなんてことはCSSだけでは無理なので、その場合はjQueryなどが必要になるでしょうね・・・。

ビジュアル的な表現

最後はビジュアル部分です。今回は最上層がホームベースを横にしたような形、中間層は羽とか若葉マークを横にしたような形をしているパンくずリストです。関連するCSSを全部のせます。

重要なところは:afterと:beforeの定義です。そこでやっていることを図にしてみました。

brcrmb

あとはリストの隙間用の枠線の太さや領域の幅などを調節していくだけです。今回は4分割で均等な幅で表現していますが、最上層のホームだけは幅を短くする、などとした方がより見やすいパンくずリストになりそうです。

広告
  • LINEで送る