コピペでどうぞ、スマホサイトのパンくずリストを横スクロールさせるカスタマイズ

こんにちは、つばさ（@tsubasa123）です。

なかなか便利そうなCSSコードを発見したのではてなブログでも使えるようにちょっと調整してみました。実用性はあまり高くないかもしれませんが、スマホサイトのカスタマイズに興味がある方、もしよろしければお付き合いください。

元ネタはこちら
想定している対象ユーザー
完成したのがこちら
CSSだけでOK
さいごに

元ネタはこちら

junk-blog.com

CSSだけでできるってのは予想外でした。JavaScriptのライブラリがいくつか存在するのは知っていましたが、うまいこと考えてくれるものです。

特にスマホサイトは読み込みに時間がかかることが多いので、できるだけJavaScriptを使わずにCSSだけで済ませたいと思っていました。これは助かる。

想定している対象ユーザー

bulldra.hatenablog.com

こちらのカスタマイズを導入してる方向けです。はてなブログ公式のパンくずでも多分動作しますが、多少コードの改変が必要になるかもしれません。すみません、試してないです。

今回はスマホサイト向けとして記事を書いていますが、レスポンシブデザインのモバイル端末でも同じように使うといい感じかもしれません。

完成したのがこちら

赤枠で囲っているところがパンくずリストです。デフォルトでは左のようにタイトルが長くなると折り返ってしまいます。というか、タイトルが短くてもサイト名やカテゴリ名が入るのでほぼ間違いなく折り返ってしまうと思います。

右がカスタマイズ後。記事のタイトルが見えませんが、横にフリックでスクロールすることができるようになっているので、スッってやると横にスルッってなって隠れている部分が表示されるようになりました。これこれ、これがやりたかった。

別に折り返っても問題にはなりませんが、なんとなく横スクロールさせる方がスマートに感じたので導入してみました。自己満かな。

CSSだけでOK

元ネタの記事でも書かれていますがカスタマイズはCSSだけで完結します。JavaScriptは不要です。はてなブログでパンくずリストのカスタマイズを導入している方は下記をコピペしていただくだけで導入可能です。

<style>
/* フリックできるパンくずリスト */
#breadcrumb {
padding: 15px;
overflow-x: scroll;
background-color: #FFF;
border-bottom: solid 1px #CCC;
white-space: nowrap;
}
#breadcrumb div {
display: inline-block;
padding: 5px 1em;
}
/* スクロールバーの装飾 */
#breadcrumb::-webkit-scrollbar {
height: 10px;
}
#breadcrumb::-webkit-scrollbar-track {
background-color: #FFF;
}
#breadcrumb::-webkit-scrollbar-thumb {
background-color: rgba( 238, 238, 238, 0.8);
}
</style>