パンくずリストのCSS

f:id:Kawan0116:20210520125128p:plain

かわんです。

本日からスタンディングデスクで作業をしています。

スタンディングデスクは健康に良いとか言われていますが、まぁ、それはどうでもいいですね(笑)。

座って作業するのが飽きたのでスタンディングデスクを使ってます。

さて、本日は、はてなブログにおけるパンくずリストのCSSをご紹介したいと思います。

なお、これは僕の環境で実現出来ているモノ。

スマホで見るパンくずリストとは違う形でパンくずリストが表示されるという仕組み。

興味がある人は、この記事をスマホと見比べて下さい。

それを踏まえてご紹介したいと思います。

では早速CSSを紹介しますね。

#top-box {
    background: none;
    border-left: 1px solid #963550;
    position: absolute;
    top: 85px;
    right: 0;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    margin: 0;
  }

はてなブログの場合、調べるとパンくずリストは「top-box」になっているみたいなので、これをターゲットにCSSをゴリゴリと書いていくことになります。

「 position: absolute;」にすることで、パンくずリストをどこにでも表示出来るようにしています。

top: 85px;
right: 0;

上のモノは、「画面上から85pxに、右から0pxのところにパンくずリストを置いてね」という意味です。

あとはラインを引いたり縦書きにしています。

たったこれだけ。

でもですね、実現に1時間ほど費やしました。

時間がかかり過ぎですね(笑)。

スマホのパンくずリストと全く異なるデザインですので、差別化するのに結構苦労しました。

完全に見た目重視です(笑)。

クリックされることはないでしょう・・・。

背景を付けて目立たすことも出来ますが、今のところは考えていませんね~。

まぁ、背景を白色とかで塗ることは出来ますけどね。

あまり色を使いたくないので、恐らくそのままにするかと思います。

また変更したら記事にしたいと思います。

 

【追記】

現在、パンくずリストの大幅改造中です。上のCSSを基準に作業中。完了したら別記事にしたいと思います。