昨年12月にオリジナルテーマに変更した当Webサイトですが、スタイルの崩れがまだまだあり、今回はその中の1つ「パンくずリスト」のスタイルを修正しました。

パンくずリストとは、今表示しているページがWebサイト上のどこにあたるのかを伝えるためのリストです。
Webサイトで迷子にならないようにするために、各ページに設置します。また、パンくずリストを設置すると、各ページの名前をキーワードとして認識されやすくなり、SEO効果も期待できます。

a-blog cmsでは、ビルトインモジュールにトピックパスという名前で用意されています。
下記リンクのサイトパーツ＞トピックパス＞スニペットをそのまま使えば問題なく表示されます。

a-blog cms　ビルトインモジュール
https://developer.a-blogcms.jp/document/reference/built_in.html

htmlにCSSを追加して好きなデザインにしたのですが、こんな感じで「 | 」が下に落ちてしまいました…。

2つ目の「現在のページの名前が長い場合は3点リーダー（…）で省略したい」にしたい理由としては、
パンくずリストは設置したいが、目立たせたくない
これに尽きます。

リアルな世界でもWebの世界でも迷子になりやすい私からすると、パンくずリストは必要不可欠でファーストビューに設置することは譲れません。
…が、ユーザーに見て欲しいコンテンツはパンクズではなく本文なので、あまり目立たせたくないのです。
このわがままを叶えるために「現在のページの名前が長い場合は3点リーダー（…）で省略する」ことにしました。

「現在のページの名前が長い場合は3点リーダー（…）で省略する」のではなく、現在のページの名前が長い場合は横スクロールが効くようにすればいいのでは？

確かにそういったサイトもたくさんあります。
しかし、横スクロールという動きそのものの印象が強いということと、デバイスによってはスクロールバーが目立ってしまうので、今回は避けました。

そして修正したパンくずリストがこちら！

疑似要素で「|」を表示するのではなく、<span>を使って「|」を表示しました。
そして、テキストと「|」をdisplay: flex;で横並びにしました。

上記codepenのところはコピペでお使いいただけますが、間違っている箇所もや余分なCSSもあると思うので参考程度にお使いください。

簡単そうに見えるパンくずリストでしたが、目立たせないための工夫を実装するのが難しかったです。
この記事がどなたかの助けになれば嬉しいです。