(懐かしい組み合わせの素材ですね)
デザインテーマ「Minimal Green」を使って下さっている方で、JavaScript版のパンくずリストを導入されてて、カテゴリー表示が崩れているブログをいくつか見ました。
パンくずリストを導入した場合の調整について書きます。
- 太陽がまぶしかったから 池田仮名 (id:bulldra)さんのパンくずリストスクリプトを使っている方:
- はてな公式パンくずリストについて:
- schema.org/JSON-LDによるパンくずリストのマークアップ
太陽がまぶしかったから 池田仮名 (id:bulldra)さんのパンくずリストスクリプトを使っている方:
複数のカテゴリーを階層構造で表示させている場合デザインが崩れます。
以下のCSSをデザインCSSに追加して下さい。
.page-entry #breadcrumb { margin: 10px 0;} .page-entry .categories a { margin: 10px 0; padding: 0px 10px; }
このように表示されます。少しはスッキリしたかと。
複数のカテゴリーを階層構造で表示させると記事上がゴチャゴチャするので、以下のようにクラスnotHierarchyを設定して
階層構造表示をさせないのもひとつの手だと思います。
<style> div #breadcrumb div { display: inline; font-size: 13px; } </style> <div id="breadcrumb" class='notHierarchy'></div>
デザインテーマ「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