4を使用する機会が多いこの頃ですが、ずっと気になっていたのがパンくずリスト。Bootstrapには標準でbreadcrumbというクラスにCSSが割り当てられていて、簡単にパンくずリストを作ることができます。このパンくずリストはスマホで表示させると、最後の要素が1行丸々段落が落ちてしまい、なんとなく見た目が綺麗ではありません。改善しようと思っていたのですが、うまくいかずに放置していたところ、案外単純な所を見落としていました。LinkBootstrapのパンくずリストはfloatを解除するBootstrapでパンくずリストをマークアップすると、以下の様にクラスを指定します。class=”breadcrumb”></ol>このクラスの中の<li></li>がそれぞれパンくずリストになっているのですが、このリスト要素にはfloatがかかっているため、1つ1つがブロック要素になっています。そこで、floatを解除するために、CSSに以下の様に記述します。inline;}たったこれだけなのですが、パンくずリストの要素が丸ごと段落を変えることなく、文字単位で次の行に落ちてくれます。どの様な表示になるかは、このサイトのブラウザの幅を狭くしてもらえると確認することができます。floatを解除するまでに試したことこんな単純なことだったのですが、思った通りに表示させるまでに色々なことを試して見ました。inline;を記述するwordbreakを記述する違うクラス名を指定するBootstrapはとても便利なフレームワークなのですが、その使い勝手ゆえに、よく使うクラス名にはすでにCSSが割り当てられています。0からCSSを書いていれば、仕様に戸惑うことはありませんが、こういった場合はBootstrapに標準でどんなCSSが書かれているか確認しておく必要があります。一度覚えてしまえば、あらかじめ自分で作ったstyle.cssの中に、こうしたCSSを書いておくと、次からBootstrapでサイトを作る時も同じ問題にぶつかることはありません。使えば使うほど自分の好みにカスタマイズできるBootstrapは、ますます手放すことができません。MoreBoostrap4を使ってレスポンシブなWordPressテーマを作成WordPressのカテゴリーを指定して生成されるパーマリンクとパンくずリストWordPressのカテゴリートップに固定ページの内容を表示させる方法WordPressのフッターにカテゴリー一覧を表示させる方法About30代。妻と3人の子供と暮らしています。下の子供は男の子と女の子の二卵性双生児です。シンプルに生きていきたいと願いながら、情報を集めすぎる毎日。Wordpressサイトの制作を趣味でやっています。良いデザインのものや、生活の質を良くするものが好きです。