WEB開発 2019年03月06日公開

パンくずリストなどの表示を一行にして、はみ出した部分をスクロール表示にする方法

横長のテキストの表示を一行にして、はみ出した部分をスクロール表示にする方法

今回は横に長いテキストを改行せず、一行で表示させ、はみ出した部分をスクロール要素にする方法を紹介します。

今回はCSSだけで完了できます。

ではさっそくどうぞ。

CSSでスクロール要素に

横長のテキストの表示を一行にしてスクロール表示にさせるには、まず、下記コードをCSSに貼り付けてください。

.breadcrumbs-container {
    white-space: nowrap;
    overflow-x: scroll;
}

最初の「.breadcrumbs-container」の部分はお使いのテーマの任意の要素に変更してください。

すると、

このように横長のテキストが一行で表示され、はみ出した部分がスクロール要素になります。

しかし、このままだと

このようにデスクトップ表示のときなどの横長のテキストが収まる場合もスクロールバーが表示されてしまいます。

気にならない方は無視して頂いていいですが、この写真のようにパンくずリストが分厚くなってしまいます。

スクロールバーを非表示にする方法

というわけで、スクロール機能を維持したまま、スクロールバーを非表示にする方法を紹介していきたいと思います。

CSSに下記コードをコピペしてください。

.breadcrumbs-container::-webkit-scrollbar {
    display: none;
}

すると、

このようにスクロールバーが非表示になります。

これでスッキリしたと思います。

まとめ

いかがでしたでしょうか。

今回はシンプルにCSSのみで実装できる方法を書きましたが、Javascriptなどを利用すると、デザインをもっとカスタマイズできるようになります。

次回はそれらを書いていきたいと思います。

ではでは。

WordPress はじめてのデザイン&カスタマイズ入門 ブログ・サイトの改善方法がわかる
茂木 葉子 岩本 修
技術評論社
売り上げランキング: 37,900

Writer

フクチ

フクチ| CEO


代表の福知です。 よろしくお願いします。









こちらの記事もおすすめ

Related Posts