THE THOR ザ・トール パンくずリストを固定表示

パンくずリストを固定しました。

通常タイトル付近にあらわれ何事もなく消えていくパンくずリストを固定。カテゴリートップとHOMEに戻るボタンの役割を持たせてみました。

THE THOR パンくずリストを固定表示

CSSを使いパンくずリストを固定します。

いつも通り追加CSSにコードを追加。追加するコードは以下の通りです。

/*パンくずリストを固定*/
.breadcrumb {
	position: fixed;
	top: 0;
	width: 100%;
	padding: 10px 0;
	background-color: #191919;
	z-index: 800;
}
/*パンくずリスト長いと改行してスクロールはなし*/
.breadcrumb__item {
	color: #fff;
	display: inline-block;
	line-height: 2rem;
}
/*パンくずリスト現在ページ非表示*/
.breadcrumb__item:last-child {
	display: none;
}
/*パンくずリスト最後の矢印を下向きに*/
.breadcrumb__item:nth-last-child(2):after {
    border-top: 1px solid #bfbfbf;
    border-right: 1px solid #bfbfbf;
    transform: rotate(135deg);
}

以上です。

ザックリ解説

注意書きに記載してる通りです。パンくずリストをページ上部に固定してヘッダーの下に隠れている状態にしています。細かい調整はしていません。

それ以外の部分では、パンくずリストに表示される現在ページのタイトルを削除しています。必要無いですよね？その代わりに最後の矢印を下に向けてパンくずリストからの流れを表現しました。

THE THOR の標準では長くなったパンくずリストは横スクロールで表示しています。それは使い勝手が悪いので改行する仕様に変更しました。長くなりすぎて3行とかになるとヘッダーから飛び出てきてしまうのでキッチリ対処が必要です。当サイトの場合は階層が浅いので問題ありません。

改行するとこんな感じ↓

あとがき

THE THOR の標準機能で固定ヘッダーを使うという選択肢もあります。

迷うところですがシンプルなパンくずリストをチョイスしました。

パンくずリストは記事のカテゴリーが表示されるのが一番のポイントかと思います。

また固定ヘッダーで出来ることはほとんど固定フッターで実現可能ですし、スマホの操作性からすると上部にボタンがあるより下部にボタンが並んでいた方が使いやすいはずです。

[wpap service=”with” type=”detail” id=”B079MXSGQL” title=”デロンギ アクティブ ポップアップトースター レッド CTLA2003J-R”]