記事の上に、読者がいまサイトのどの位置にいるかを示すナビゲーションを設置します。
パンくずリスト、英語では“breadcrumbs”“breadcrumb navigation”と呼ばれます。
ヘンゼルとグレーテルの、あのパンくずですね。
デザイン設定→HTML編集 を開き、次のタグを探します。
<div class=”l-content”>
見つけたら、このタグの下に以下のタグをペーストします。
<% if:page_name eq ‘article’ -%>
<ol class=”crumb”>
<li><a href=”<% blog.page_url %>”>TOP</a></li>
<% loop:list_article -%>
<li><a href=”<% article_category.page_url %>”><% article_category.name %></a></li>
<li><% extra_title %></li>
<% /loop -%>
</ol>
<% /if %>
貼り終えたら、次はスタイルシート編集に移ります。
最下部に次のような記述を追加します。
.crumb {
font-size: 12px;
line-height: 16px;
}
ol.crumb > li {
display: inline;
list-style-type: none;
}
ol.crumb > li:before {
content: ” > “;
}
ol.crumb > li:first-child:before {
content:””;
}
これで、どのページを見ていても、サイト内のどの場所にいるのかわかりやすくなります。
