パンくずリストの部分を常に1行表示ではみ出したらスクロールするようにしてみた

当ページのリンクには広告が含まれています。

はてなブログ デザインテーマコンテスト、結局間に合いませんでした。引っ越し関連のいろいろがあって、ここ何日も時間が取れずにあっという間に期限になってしまいました。まぁ、あせらずゆっくり作っていこうと思います。

さて、どこか他のサイトを見ていたとき、パンくずリストがスクロールできるようになっていたのを見ました。このブログには付けてないのですが、人によっては使う人もいるだろうし、長いタイトルが2行とかになるのは(特にスマホ表示では)見苦しいので、この「1行表示でスクロールさせる」を採用してみました。

INDEX

パンくずリストをスクロールさせる

はてなブログのパンくずリスト部分を1行表示にして、はみ出た部分はスクロールさせるには以下のcssで多分なんとかなります。たぶんです。

.breadcrumb{
width: 100%;
overflow: auto;
}
.breadcrumb .breadcrumb-inner{
white-space: nowrap;
}

うまくいかなかったらクラス名の最初に.page-entry つけるなりでなんとかなる…と思います。テーマでパンくずリスト部分になにかcss適用されてなければ。

f:id:c-miya:20190317102823j:plain

やっぱりこのほうがスマートだよなぁ。

シェアしてね!

この記事を書いた人

静岡県静岡市清水区在住のウェブサイト運営者。ネット上ではc-miya、orefolderなどの名前で活動しています。

ストレスに弱いので、できるだけ好きなことだけをして生きたいと思いながら生活しています。「楽しい」が優先順位の一番上に来るようにしたいですね。

INDEX