つばさのーと

つばさの日常を綴るのーと

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

f:id:tsubasa123:20170604182512j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

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

 

元ネタはこちら

 

junk-blog.com

 

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

 

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

 

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

 

bulldra.hatenablog.com

 

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

 

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

 

完成したのがこちら

 

f:id:tsubasa123:20170208133027j:plain

 

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

 

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

 

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

 

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>

 

スクロールバーの装飾は恐らくChromeしか効かないですが、まぁ特に不満はありません、概ね満足です。

 

さいごに

 

CSSだけで実装可能なパンくずリストにちょっとアレンジを加えるカスタマイズのご紹介でした。

 

スマホサイトのユーザビリティって考えることがたくさんあった対応するのが非常に大変です。でもまぁ、やった分だけブログを見ていただけるユーザーに還元できると思えばがんばれますね。これからも面白い情報があったらシェアしていきたいと思います。

 

ではでは、最後までお付き合いいただきありがとうございました。