Innocent および Blank でパンくずリストの ”>” を正しい位置に表示する方法

Innocent と Blank で、id:bulldra 氏が制作したパンくずリスト（はてなブログでGoogleにパンくずリストを認識させるブログパーツ - 太陽がまぶしかったから）のカテゴリーとカテゴリーの間に挿入される > が全て最後のカテゴリーの後ろに表示されるという問題を修正するには、以下のコードをデザインCSS欄に追記して下さい。

.categories a{
    display: inline-block;
    float: none;
    margin-right: 0;
}

問題が起こる理由と、問題が起こる指定をしている理由は続きを読むに記載します。

問題が起こる理由

.categories a {
    display: block;
    float: left;
}

Innocent と Blank ではカテゴリーの横並べを display: block と float: left で行っています。このため、カテゴリーとカテゴリーの間に挿入される > が全て最後のカテゴリーの後に回りこむという現象が起こります。

<div class="entry-categories categories">
    <a href="#">カテゴリ1</a>
    <a href="#">カテゴリ2</a>
</div>

横並べを float: left ではなく display: inline-block を用いる方法（最初に記載したCSS）で行えば件の問題は起こりません。

最初からそう指定したいのが山々なのですが、display: inline-block による横並べは、プロパティを指定したタグが改行されている際に要素の右方向に半角スペース一個分の余白が発生するという厄介な仕様があるのです。

.categories a{
    display: inline-block;
    margin: 0 5px 5px 0;
}

この仕様は本当に厄介で、例えば上記のように指定した場合、右方向の余白には半角スペース一個分の幅が加わるため下方向との余白が均一になりません。

.categories a{
    display: inline-block;
    margin: 0 2px 5px 0;
}

半角スペースの幅はフォントの種類やサイズによって変化するので、最初からその幅が加わることを想定した余白を設定することもできません。スマートフォンなどの幅の狭い端末だとカテゴリーの表示が2段になることがよくありますが、余白が均一でないと汚く見えてしまいます。