[Blog]パンくずをBootstrap専用に変更

Breadcrumb · Bootstrap v5.3
https://getbootstrap.com/docs/5.3/components/breadcrumb/

              <b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<nav aria-label='breadcrumb'>
<ol class='breadcrumb' typeof='BreadcrumbList' vocab='https://schema.org/'>
<li class='breadcrumb-item' property='itemListElement' typeof='ListItem'><a expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'><span property='name'>Home</span></a>
<meta content='1' property='position'/></li>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<!-- b:if cond='data:label.isLast == &quot;true&quot;' -->
<li class='breadcrumb-item' property='itemListElement' typeof='ListItem'><a expr:href='data:label.url' property='item' typeof='WebPage'><span property='name'><data:label.name/></span></a>
<meta content='2' property='position'/></li>
<!-- /b:if -->
</b:loop>
<b:else/>
</b:if>
<li class='breadcrumb-item active'><data:post.title/></li>
</b:loop>
</ol>
</nav>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<nav aria-label='breadcrumb'>
<ol class='breadcrumb' typeof='BreadcrumbList' vocab='https://schema.org/'>
<li class='breadcrumb-item' property='itemListElement' typeof='ListItem'><a expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'><span property='name'>Home</span></a>
<meta content='1' property='position'/></li>
<li class='breadcrumb-item active'><data:blog.pageName/></li>
</ol>
</nav>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<nav aria-label='breadcrumb'>
<ol class='breadcrumb' typeof='BreadcrumbList' vocab='https://schema.org/'>
<li class='breadcrumb-item' property='itemListElement' typeof='ListItem'><a expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'><span property='name'>Home</span></a>
<meta content='1' property='position'/></li>
<li class='breadcrumb-item active'><data:blog.pageName/></li>
</ol>
</nav>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

(このブログだけHomeにしてますが)

navで挟むのと、必要なクラスを追加すればBootstrapのみで追加の調整用CSSは不要になります
(黒背景の場合は必要)

不要になったCSS

ol.breadcrumb li+li:before {
  content: "¥00a0/¥00a0";
}

多分変なスキマが出来ていたと思うので解消されると思う

関連エントリ:

• Bloggerの非レスポンシブ公式テンプレート等をパンくずリストに対応させる