パンくずリストのカスタマイズで大苦戦
はてなブログのSEO対策でパンくずリストを設定すると良いらしいですが、パンくずリストの設定を行ったところ階層化表示のレイアウトでつまづきました。
その理由と、解決策を記載します。
パンくずリストの階層化の表示がおかしい…
こんにちは。aroundfourです。
はてなブログのテンプレートzeno-tealを利用してパンくずリストの階層化にチャレンジ。簡単だろうとおもっていたら、全然そんなことなかった。
らめええ、表示がおかしいのおおお
これが最初に私が設定したときのパンくずリストの階層化の状態です。
- カテゴリの縦のスペースがやたら長い
- 階層化されている項目を開く矢印の位置がおかしい
おかしいのはここだけにとどまりません。
矢印をクリックして階層化を開いてみました。
矢印が一個多い！！
せっかくパンくずリストを使い階層化をして、ブログの見た目を良くしようとしたのにこれはいかん…。
パンくずリストとは
まずパンくずリストの説明ですが、めんどくさいので解説に関しては引用します。
パンくずリストとは、ユーザーが今WEBサイト内のどの位置にいるのかを視覚的に分かりやすくするため、上位の階層となるWEBページを階層順にリストアップしてリンクを設置したリストのことを指します。通常はコンテンツの最上部に記載されます。
パンくずリスト階層化の設定について
設定に関しては、こちらをもとに行いました。
手順が一つ一つ明記されているので、指示されるままに設定をしていきました。
設定は、5つの手順に分かれます。
- 公式パンくずリストの有効化
- カテゴリーの階層化
- カテゴリーの表示設定
- スクリプトの設定
- スタイルシートの設定
特に難しくないので簡単に設定が終わるだろうと思っていました。
そう、その時までは…
で、結果がこれ
うーん、 だめ。
今回参照したカスタマイズを作成したWorldWorldWorldさんが説明している上記の記事で利用しているスクリプトやスタイルシートは、合計でわずか5行程度のものなのでコピペをミスっているとは考えにくい。
でも念の為、再度コピペをしてみました。
やはり変わらない…。
おかしいのは自分のブログの環境やな！
で、Google先生を頼って「パンくずリスト 表示 崩れる」と検索してみてもそれっぽい記事がない。どうも表示が崩れる人は少ないようだ。
いまいちどWorldWorldWorldさんのブログに行き、同じことで困っている人がいないか記事に対するコメントを読んでみました。
うーむ、ぱっと見た感じ、それっぽいものはない…
諦めかけていたその時！
コメントをスクロールさせていると
同じような症状で悩んでいるような書き込みが…。
わたしが遭遇している②の部分と同じじゃないですかこれ？
解決策はこちら
WorldWorldWorldさんが回答されているこの内容が、まさしくビンゴでした。
デザインcssに下記を記入します。
.hatena-module-category .hatena-urllist li a {
display: inline-block;
}
.hatena-module-category .hatena-urllist li::before {
content: none;
}
display: inline-block;
}
.hatena-module-category .hatena-urllist li::before {
content: none;
}
けっかはっぴょーう！
階層化を開く矢印は正しい位置に。
各カテゴリの縦の余白も適切になっています。
開いたあとの矢印もなくなったことで、見た目がスッキリと。
まとめ
パンくずリスト階層化の表示がうまくいってない人にのみ役立てる記事ということで需要が低そうですが、お役に立てたら幸いです。
.hatena-module-category .hatena-urllist li a {
display: inline-block;
}
.hatena-module-category .hatena-urllist li::before {
content: none;
}
display: inline-block;
}
.hatena-module-category .hatena-urllist li::before {
content: none;
}
デザインcssに上記を記入すると、改善されます。
