はてなブログのパンくずリストを、CSSだけでどうにかする
今回ははてなブログのカスタマイズに関係したCSSの記事です。
リンク：記事のカテゴリーを「パンくずリスト」として表示できるようにしました - はてなブログ開発ブログ
だが、このパンくずリスト、記事タイトルが長いとリストも長くなり、見づらくなります。
特に右端で改行して2行以上になると、見にくいだけでなく、ブログのデザインが崩れることもあります。レスポンシブ対応にしてスマホで見ると3行以上になることもあります。
これをCSSでどうにかしたい！というのが、今回の記事です。
スポンサーリンク
パンくずリストをどうにかするCSS
デフォルトのパンくずリストの何が問題なのかと言えば、パンくずリストが冗長的に長くなることです。それをCSSで回避します。
その1：リスト最後のページタイトルを消す
パンくずリストが長くなる場合、だいたいは記事タイトルが長いから長くなります。
それなら、いっそ消しちゃえ！ というのがこのCSSです。
.breadcrumb-child:last-child {
display: none;
}
この方法なら、常にパンくずリストの最後のリストを表示しません。カテゴリーが思いっきり長くない限り、1行に収まるはずです。
ただし、この方法の場合、記事ページの階層的に1つ手前の、カテゴリーページでも最後のリスト（パンくず2番目のカテゴリー）を消してしまいます。
それを回避し、記事ページのみ最後を消したいのなら、次の方法とかがあります。
.page-entry .breadcrumb-child:last-child {
display: none;
}
その2：ellipsis（省略記号）を使う
CSSのtext-overflow:ellipsis;を使っても1行にまとめられます。
これは文字がボックスの領域からはみ出す場合、CSSが文字の末尾に省略記号の三点リーダーを自動挿入してくれる便利な機能です。
パンくずリストを囲んでいる要素は.breadcrumb-innerなので、ここにスタイルを指定します。
.breadcrumb-inner {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
この機能を使うのに注意点として、文字が表示領域から出さないようにして、文字が折り返さないようにする必要があります。要はoverflow:hidden;、white-space: nowrap;を指定しなくて機能しません。
ちなみに、この記事を書いている時点（2017年3月）では、このブログにはこの方法を採用しています。設定していCSSは次のものです。
.breadcrumb-inner {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
max-width: 560px;
}
おまけ：下の方に移動させる
最後におまけなのですが、2行や3行になってデザインが崩れたりするのは記事の上という位置にあるからなので、それならいっそ下の方に移動させてしまえっ！、という方法もあります。
移動させるといっても、はてなブログでは構造的にパンくずリストが入っている#top-boxの階層は、このようになっています。*1
#container └ #container-inner ┝ #blog-title（ヘッダ） ┝ (#top-editarea) ┝ #top-box（パンくず） ┝ #content（記事・サイドバー等） └ (#bottom-editarea)
CSSで移動させるとしたら、この#contentの下に移動させることになります。*2
#container-inner {
display: flex;
flex-direction: column;
}
#top-box {
order: 1;
}
ただし、はてなProに契約して、デザインカスタマイズでフッタにコピーライトとか入れている場合、このままではフッタの下にパンくずリストが移動します。
そのフッターの上にパンくずリストを移動させたい場合は、次のようにします。
#bottom-editarea {
order: 2;
}
また、先ほどのように記事ページだけスタイルを適用したい場合は、次のようにします。
.page-entry #container-inner {
display: flex;
flex-direction: column;
}
締め
パンくずリストをCSSでデザインしても、リストが2行3行と変化することでデザインが難しくなりがちなのですが、1行になるようにCSSで指定することでデザインもしやすくなります。
ちょっとしたことですが、もし参考になっていただけたなら幸いせす。
スポンサーリンク
