はてなブログのパンくずリストをCSSデザインしてみた。CSSコードも載せておくよ。マーベラスなプレゼント！

ついに今日から3月になった。みなさんいかがお過ごしだろうか？

俺は昨日のメモリの交換以来「OBE920」が好調なので調子に乗っている。

ちなみに「OBE920」というのは…これは昨日散々やったのでもういいか。知らない人のためにリンクを貼っておこう。

kabuku.hateblo.jp

新しい月を迎えたということでブログのテーマを変更してみた。最初にいくつか試した候補のうちの1つなのだけども。

スマホの人には見れないと思うのだがパンくずリストが付いている。どうやら非公式のものもあるらしいのだが、これははてなブログの機能を使ったものだ。

まあそれは驚くべきことではないのだけども。パンくずリストて何？についてはWikipediaの説明を読んでみよう。

ウェブディレクトリのような大規模なウェブサイト内で、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。

パンくずリスト - Wikipedia

名前の由来はヘンゼルとグレーテルから来ているということで怖いイメージをするかもしれないがWEB版のパンくずリストは魔女も出てこないし優しい機能なので安心してほしい。

パンくずが散らばって部屋が汚れることもない。だが食べることもできないので期待しないでほしい。

まあ話しを戻そう。

そのパンくずリストをCSSでデザインしてみた。普通のでも良かったのだがなんとなくやりたくなったのでやってみた。

画像にするとこんな感じだ。

左からTOP。雑記の部分はカテゴリー。そして記事のタイトル。背景色が変更されていく仕様だ。一応レスポンシブなのだがスマホで表示される場合はタイトルの部分が短くなりタイトルが途中まで表示されるようになる。

以前使ってたテーマ「Innocent」だと何かCSSが効いているのか一部の色変更がおかしくなってしまった。そこで今回のテーマに変更してみたのもある。

以前のテーマがおかしいということではなく俺が書いたCSSに合わなかっただけなのだろうが。

今回変更したのは「Contents」というテーマなのだけども幅が合わずに少し手を加えてある。その辺が他のテーマでどうなるかはちょっと分からない。

まあこの部分の変更の方が楽だったのもあり最終的に「Contents」の方にさせていただいた。

はてなブログのパンくずリストは元々HTMLやセレクタが自動的に吐き出される仕様なのでそこに合わせてCSSを適用した。そして疑似要素などを足している。

CSSなど分からない人にはちんぷんかんぷんな話しで申し訳ない。

本来そこから説明をした方が良いのだろうがこのブログではそういうのはあまりしたくない。CSSを面白おかしく説明していくのも楽しそうではあるんだけどねえ。

せっかく作ったのでもし使いたい人がいたり参考にしたい人がいたらと思いCSSを公開することにした。

俺から皆にマーベラスなプレゼントだ！

まあどうなるかは分からないがデザイン設定からデザインCSSに貼り付けてみて使えそうなら使ってみてちょうだいな。

#top-box{
    margin: 0 auto;
    padding: 16px 0 0;
    line-height: 0;
    border: 0; 
    background: #fff;
    margin-left: -100%; 
    margin-right: -100%; 
    padding-left: 100%; 
    padding-right: 100%; 
}

#top-box .breadcrumb{
    margin: 0 auto;
    padding: 0;
    border: 0;
    text-align: left;
    font-size: .8em; 
}

#top-box .breadcrumb a{
    color: #fff; 
}

.breadcrumb-inner{
    margin: 0;
    padding: 0;
    line-height: 0;
    border-top: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: left;
    box-sizing: padding-box;
    overflow: hidden;
    background: #; 
}

.breadcrumb-link{
    background: #444; 
    text-decoration: none;
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 10px 0 9px;
    text-align: center;
    margin-right: 23px;
    display: inline-block;
    width: 50px;
    white-space: nowrap;
}

.breadcrumb-link a:visited{
     color: #fff;
}

.breadcrumb-link:hover{
    background: #666; 
}

.breadcrumb-link::after{
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    border: 0 solid #444; 
    border-width: 20px 10px;
    width: auto;
    height: 0;
    border-color: transparent;
    border-left-color: #333;
}

.breadcrumb-link:hover::after{
    border: 0 solid #666; 
    border-width: 20px 10px;
    left: 100%;
    border-color: transparent;
    border-left-color: #666;
}

.breadcrumb-link::before{
    left: -20px;
    border-left-color: transparent;
}

.breadcrumb-gt{
    display: none;
}

.breadcrumb-child{
    color: #fff;
    display: block;
    background: #777;
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 10px 0 5px;
    text-align: center;
    margin-right: 23px;
    width: auto;
    white-space: nowrap;
    text-decoration: none;
}

.breadcrumb-child a{
    text-decoration: none;
}

.breadcrumb-child:last-child{
    width: auto;
    white-space: normal;
    background: #aaa;
}

.breadcrumb-child:last-child:hover,
.breadcrumb-child:hover{  
      background: #666;
}

.breadcrumb-child:last-child::before,
.breadcrumb-child:last-child::after,
.breadcrumb-child::before,
.breadcrumb-child::after{
    content: "";
    position: absolute;
    top: 0;
    border: 0 solid #777;
    border-width: 20px 10px;
    width: 0;
    height: 0;
}

.breadcrumb-child:last-child::before,
.breadcrumb-child:last-child::after{
    border: 0 solid #aaa;
    border-width: 20px 10px;
}

.breadcrumb-child:last-child:hover::before,
.breadcrumb-child:last-child:hover::after,
.breadcrumb-child:hover::before,
.breadcrumb-child:hover::after{
    border: 0 solid #666;
    border-width: 20px 10px;
}

.breadcrumb-child:last-child::before,
.breadcrumb-child::before{
    left: -20px;
    border-left-color: transparent;
}

.breadcrumb-child::after{
    left: 100%;
    border-color: transparent;
    border-left-color: #777;
}

.breadcrumb-child:last-child::after{
    left: 100%;
    border-color: transparent;
    border-left-color: #aaa;
}

.breadcrumb-child:last-child:hover::before,
.breadcrumb-child:hover::before{
    left: -20px;
    border-left-color: transparent;
}

.breadcrumb-child:last-child:hover::after,
.breadcrumb-child:hover::after{
    border-color: transparent;
    border-left-color: #666;
}

まず今日はこれぎり！