前後記事ナビ開発中

クラス名

bl_entryNav

マークアップ例

<nav class="bl_entryNav" role="navigation" aria-label="投稿">
	<h2 class="screen-reader-text el_readerOnly">投稿ナビゲーション</h2>
	<div class="nav-links">
		<div class="nav-previous">
			<a href="" rel="prev">
				<p class="meta-nav">
					<svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path fill-rule="evenodd" clip-rule="evenodd" d="M20 13v-2H8l4-4-1-2-7 7 7 7 1-2-4-4z" fill="currentColor"/>
					</svg>
					<span class="el_readerOnly">前の投稿</span>
				</p>
				<p class="post-title">前の記事のタイトル</p>
			</a>
		</div>
		<div class="nav-next">
			<a href="" rel="next">
				<p class="meta-nav">
					<span class="el_readerOnly">次の投稿</span>
					<svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path fill-rule="evenodd" clip-rule="evenodd" d="m4 13v-2h12l-4-4 1-2 7 7-7 7-1-2 4-4z" fill="currentColor"/>
					</svg>
				</p>
				<p class="post-title">次の記事のタイトル</p>
			</a>
		</div>
	</div>
</nav>
<!-- /.bl_entryNav -->

定義

機能
前後の記事に移動するリンクを提供する

あしらい・振る舞い
アイコン部分はSVGつかう、、かな、、
狭い画面では、タイトルを省略し、「前の記事」「次の記事」のテキストとアイコンのみを表示する

特記事項
コードはWPの仕様に準じる
親要素のみを命名し、子要素のクラス名は無理に改変しない

ファイルパス

Change Log

1. 開発開始：2021-10-15
2. 最終更新：2021-10-21