パンくずナビゲーション一旦開発完了

クラス名

bl_breadcrumbs

マークアップ例

<nav class="bl_breadcrumbs" aria-label="パンくずナビゲーション">
	<h2 class="el_readerOnly">現在位置</h2>
	<ol itemscope itemtype="https://schema.org/BreadcrumbList">
		<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
			<a itemprop="item" href="">
				<span itemprop="name">トップページ</span></a>
			<meta itemprop="position" content="1" />
		</li>
		<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
			<a itemprop="item" href="">
				<span itemprop="name">ブログ</span></a>
			<meta itemprop="position" content="2" />
		</li>
		<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
			<a itemprop="item" href="" aria-current="page">
				<span itemprop="name">記事</span></a>
			<meta itemprop="position" content="3" />
		</li>
	</ol>
</nav>
<!-- /.bl_breadcrumbs -->

定義

機能
ページの現在地を示す

あしらい・振る舞い
幅が狭ければ折り返す

特記事項
構造化データでマークアップする

構造化データについて：
https://developers.google.com/search/docs/advanced/structured-data/breadcrumb?hl=ja

構造化データチェックツール
https://validator.schema.org
https://search.google.com/test/rich-results

ファイルパス

Change Log

1. 開発開始：2021-10-04
2. 2022-00-00 スクリーンリーダでの読みがイマイチなので要改善（VoiceOverが悪い可能性も微レ存）
3. 2022-09-14
   パンくずナビゲーション に名称統一／スクリーンリーダ読みも大丈夫そう／現在地を pointer-events プロパティによってクリックできないように変更
4. 最終更新：2022-09-14