ブログのパンくず名称変更
※初期設定では「全ての記事」を「ブログ【変更後】」という名称に変更しています。
任意の文言に変更可能です。
任意の文言に変更可能です。
| 追加可能パーツ | 変更可能箇所 | 同一ページ に複数設置 |
ページ複製・ クリップボード使用可否 |
|---|---|---|---|
| - |
|
- | ✕ |
設定方法
- CSSをカスタムCSSに記述。
-
編集画面用CSSを適切な位置に記述。
- JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
- クラス名を見本とあわせる。
- ブログ編集ページのメンビジにクラス名「js-breadcrumbs」を追加。
- 初期設定では「全ての記事」を「ブログ【変更後】」という名称に変更しています。
JavaScript内で「任意の文言に変換 」と検索し、該当箇所を全て任意の文言に変更してください。
JS・CSS・編集画面用CSS
- JS
- CSS
- 編集画面用CSS
JavaScript
2025-05-30更新（v1.0.0）
<script>
/* -------------------------------------
ブログのパンくず名称変更 v1.0.0
------------------------------------- */
'use strict';
document.addEventListener('DOMContentLoaded', function() {
/*------------- 変数定義 【変更可能】 START -------------*/
const breadcrumbName = "ブログ【変更後】";
/*------------- 変数定義 【変更可能】 END -------------*/
document.querySelectorAll('.js-breadcrumbs + .breadcrumbs ul li').forEach(function(el) {
if(el.textContent.trim() === '全ての記事') {
let breadcrumb = el.querySelector('a');
/* リンクがついている場合 */
if(breadcrumb) {
breadcrumb.textContent = breadcrumbName;/* 任意の文言に変換 */
} else {
/* リンクがついていない場合 */
el.querySelector('span').textContent = breadcrumbName;/* 任意の文言に変換 */
}
}
/* ちらつき防止 */
document.querySelector('.js-breadcrumbs + .breadcrumbs').style.visibility = 'visible';
});
});
/* -------------------------------------
ブログのパンくず名称変更 END
------------------------------------- */
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2023-09-06更新（v1.0.0）
/*----- ブログのパンくず名称変更 START v1.0.0-----*/
.theme-fo-base {
.js-breadcrumbs {
& + .breadcrumbs {
visibility: hidden;//ちらつき防止
}
}
}
/*----- ブログのパンくず名称変更 END -----*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2023-09-06更新（v1.0.0）
/*-- ブログのパンくず名称変更 編集画面用 START v1.0.0--*/
.theme-fo-base {
.js-breadcrumbs {
& + .breadcrumbs {
visibility: initial;//ちらつき防止解除
}
}
}
/*-- ブログのパンくず名称変更 編集画面用 END --*/
© Basic Inc. All Rights Reserved.