パンくずリストはあると便利な機能です。
今までは、JavaScriptを使用するか、各ページにリンクを張るしかありませんでしたが、今回、追加された独自レイアウトのタグを利用すれば、パンくずリストを作ることができるようになりました。
パンくずリストを表示したい場所に設置するだけでも表示はしてくれますが、
今回は、CSSを使って少し手を加え見やすくする方法を書いてみます。
HTML
設置場所：独自レイアウト＞HTML
<div id="bread">
<a href="/">HOME</a>
<var variant="breadcrumb" edit="0">navigation</var>
</div>
上記のタグをパンくずリストを表示したい場所に設置します。
CSS
設置場所：独自レイアウト＞CSS
/* bread
---------------------------------------------*/
#bread{
margin-bottom:10px;
padding-top:10px;
font-size:12px;
}
#bread div{
display:inline;
}
#bread ol{
margin:0px;
padding:0px;
display:inline;
}
#bread ol li{
display:inline;
margin-right:10px;
font-size:12px;
}
#bread ol li:before{
content:"> ";
}
上記のスタイルシートを追加します。
尚、トップページにパンくずリストを表示したくない場合は、
body.cc-page-index #bread{
display:none;
}
を最後の行に追加します！
上手く表示出来るようにならない場合は
お気軽にJimdoの無料電話相談でお問い合わせ下さい。