Webサイトやブログの運営について

Boostrap4でパンくずリストの段落を落とさずに綺麗に表示する方法

WordPressテーマの作成にBootstrap 4を使用する機会が多いこの頃ですが、ずっと気になっていたのがパンくずリスト。

Bootstrapには標準でbreadcrumbというクラスにCSSが割り当てられていて、簡単にパンくずリストを作ることができます。

しかし、このパンくずリストはスマホで表示させると、最後の要素が1行丸々段落が落ちてしまい、なんとなく見た目が綺麗ではありません。

ずっと改善しようと思っていたのですが、うまくいかずに放置していたところ、案外単純な所を見落としていました。

Sponcerd Link

Bootstrapのパンくずリストはfloatを解除する

Bootstrapでパンくずリストをマークアップすると、以下の様にクラスを指定します。

  • <ul class=”breadcrumb”></ul>
  • <ol class=”breadcrumb”></ol>

このクラスの中の<li></li>がそれぞれパンくずリストになっているのですが、このリスト要素にはfloatがかかっているため、1つ1つがブロック要素になっています。

そこで、floatを解除するために、CSSに以下の様に記述します。

.breadcrumb li {

float: none;

displya: inline;

}

たったこれだけなのですが、パンくずリストの要素が丸ごと段落を変えることなく、文字単位で次の行に落ちてくれます。

どの様な表示になるかは、このサイトのブラウザの幅を狭くしてもらえると確認することができます。

floatを解除するまでに試したこと

こんな単純なことだったのですが、思った通りに表示させるまでに色々なことを試して見ました。

  • display: inline;を記述する
  • wordbreakを記述する
  • 違うクラス名を指定する

Bootstrapはとても便利なフレームワークなのですが、その使い勝手ゆえに、よく使うクラス名にはすでにCSSが割り当てられています。

0からCSSを書いていれば、仕様に戸惑うことはありませんが、こういった場合はBootstrapに標準でどんなCSSが書かれているか確認しておく必要があります。

ただ、一度覚えてしまえば、あらかじめ自分で作ったstyle.cssの中に、こうしたCSSを書いておくと、次からBootstrapでサイトを作る時も同じ問題にぶつかることはありません。

使えば使うほど自分の好みにカスタマイズできるBootstrapは、ますます手放すことができません。

Sponcerd Link

Wordpress

Share

One More

WordPressのフッターにカテゴリー一覧を表示させる方法

WordPressのカテゴリーを指定して生成されるパーマリンクとパンくずリスト

WordPressのカテゴリートップに固定ページの内容を表示させる方法

Boostrap4を使ってレスポンシブなWordPressテーマを作成

© NOTICED 2020