パンくずの移動
パンくずリストの挙動をご参照ください。
※React18へのアプデの際に崩れの可能性あり
| 追加可能パーツ | 変更可能箇所 | 同一ページ に複数設置 |
ページ複製・ クリップボード使用可否 |
|---|---|---|---|
| - |
|
× |
✕ ※パンくず移動させたいページにて |
| ※留意事項 | |||
|---|---|---|---|
|
※複数ページで使用する場合、クラス付与のために1ページずつ編集画面に入る必要がありますので、工数は【＋（ページ数*2分）】で算出いただければと思います。 |
構造図
デモのパーツの構造を説明しています。
設定方法
-
編集画面用CSSを適切な位置に記述。
- JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
- 「パンくずを移動させたい場所」のすぐ下にあるメンビジ（orセクション）にクラス名「js-breadcrumbsMove」を追加。
※このクラスが付与されたページのみパンくずの移動が適用されます。
※初期設定では、パンくずをメンビジの上に移動させているためメンビジに上記クラスを付与しています。
JS・CSS・編集画面用CSS
- JS
- CSS
- 編集画面用CSS
JavaScript
2025-05-29更新（v1.0.0）
<script>
/* ---------------
パンくずの移動 v1.0.0
--------------- */
'use strict';
document.addEventListener('DOMContentLoaded', function() {
/*------------- 変数定義 【変更可能】 START -------------*/
const breadcrumbsMove = document.querySelector('.js-breadcrumbsMove');
const breadcrumbs = document.querySelector('.breadcrumbs');
/*------------- 変数定義 【変更可能】 END -------------*/
/* パンくずリストを任意の場所に移動 */
if(breadcrumbsMove && breadcrumbs) {
const parent = breadcrumbsMove.parentNode;
parent.insertBefore(breadcrumbs, breadcrumbsMove);
breadcrumbs.style.display = 'block';/* ちらつき防止CSS解除 */
}
});
/* ---------------
パンくずの移動 END
--------------- */
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2024-01-16更新（v1.0.0）
/*-- パンくずの移動 START v1.0.0--*/
.theme-fo-base {
.js-breadcrumbsMove {
+ .breadcrumbs {
display: none;//ちらつき防止（JS側で後から表示）
}
}
}
/*-- パンくずの移動 END --*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2025-05-29更新（v1.0.1）
/*-- パンくずの移動 編集画面用 START v1.0.0--*/
.theme-fo-base {
.js-breadcrumbsMove {
border: 1px solid red;
+ .breadcrumbs {
display: block;
}
&::before {
content: "この上にパンくずが表示（移動）されます";
position: absolute;
color: #fff;
background: red;
right: 0;
top: 0;
padding: 0 5px;
}
}
}
/*-- パンくずの移動 編集画面用 END --*/
© Basic Inc. All Rights Reserved.