Minimal Green

はてなブログテーマ『Minimal Green』のデモブログ。はてなブログカスタマイズや、HTML、CSSなどについて書いています。

太陽がまぶしかったから さんのパンくずリストプラグインを使っている方向けのCSS調整

f:id:syofuso:20160827003348j:plain
(懐かしい組み合わせの素材ですね)
デザインテーマ「Minimal Green」を使って下さっている方で、JavaScript版のパンくずリストを導入されてて、カテゴリー表示が崩れているブログをいくつか見ました。
パンくずリストを導入した場合の調整について書きます。

太陽がまぶしかったから 池田仮名 (id:bulldra)さんのパンくずリストスクリプトを使っている方:

複数のカテゴリーを階層構造で表示させている場合デザインが崩れます。
以下のCSSをデザインCSSに追加して下さい。

.page-entry #breadcrumb {
margin: 10px 0;}

.page-entry .categories a {
    margin: 10px 0;
    padding: 0px 10px;
}

f:id:syofuso:20160827002551j:plain
このように表示されます。少しはスッキリしたかと。

複数のカテゴリーを階層構造で表示させると記事上がゴチャゴチャするので、以下のようにクラスnotHierarchyを設定して
階層構造表示をさせないのもひとつの手だと思います。

<style>
div #breadcrumb div {
    display: inline;
    font-size: 13px;
}
</style>
<div id="breadcrumb" class='notHierarchy'></div>

参考:
bulldra.hatenablog.com

デザインテーマ「Innocent」をお使いの方の不具合は作者さんが解説記事をかかれてますので、どうぞ↓。
moonnote.hateblo.jp

はてな公式パンくずリストについて:

blog.minimal-green.com
blog.minimal-green.com
blog.minimal-green.com

schema.org/JSON-LDによるパンくずリストのマークアップ

パンくずリストは検索エンジンなどに階層構造を伝えるためなので、デザインと分離して、schema.org/JSON-LDによるマークアップのパンくずリストコードを生成する
、すなばいじりさんのプラグインもおすすめです。
psn.hatenablog.jp