IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / CSS / はてなブログ:パンくずリストをカスタマイズ

はてなブログ:パンくずリストをカスタマイズ

2020/11/13 CSS, はてなブログ

そろそろこのサイトのデザインを変えようかと思い始めての tips チップス。

  • パンくずリストのカスタマイズ
  • はてなブログパンくずリストHTML構造
  • パンくずリストの最後の項目を変更する
    • パンくずリストの最後の項目を削除する
    • パンくずリストの最後の項目を変更する
  • パンくずリストを矢羽根にカスタマイズ

パンくずリストのカスタマイズ

こんなイメージです。

パンくずリストの最後の項目、つまり表示されているページのタイトルを他の言葉に、たとえば here(You are here)に変え、リストそのものを CSS でカスタマイズします。

はてなブログパンくずリストHTML構造

<div id="top-box">
    <div class="breadcrumb" data-test-id="breadcrumb">
        <div class="breadcrumb-inner">
            <a class="breadcrumb-link" href="https://test0.hateblo.jp/">
                <span>トップ</span>
            </a>
            <span class="breadcrumb-gt">&gt;</span>
            <span class="breadcrumb-child">
                <a class="breadcrumb-child-link" href="カテゴリーurl">
                    <span>カテゴリー</span>
                </a>
            </span>
            <span class="breadcrumb-gt">&gt;</span>
            <span class="breadcrumb-child">
                <span>記事タイトル</span>
            </span>
        </div>
    </div>
</div>

リストではありませんので結構面倒な構造です。

パンくずリストの最後の項目を変更する

パンくずリストの最後の項目は表示されているページのタイトルですからいらないですよね。

削除するか、他の言葉に変えましょう。

パンくずリストの最後の項目を削除する

.breadcrumb-child:last-child {
    display: none;
}


/* 不等号の > を消す場合
 他にもいろいろ指定方法はあると思う */
.breadcrumb-child + .breadcrumb-gt {
    display: none;
}

これで消えます。

パンくずリストの最後の項目を変更する

.breadcrumb-child:last-child::after{
    content: "here";
}
.breadcrumb-child:last-child span {
    display: none;
}

パンくずリストを矢羽根にカスタマイズ

.breadcrumb {
    font-size: 14px;
}
.breadcrumb-gt {
    display: none;
}
.breadcrumb-inner {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
}
.breadcrumb-link,
.breadcrumb-child-link {
    display: block;
    height: 20px;
    background-color: #a1b6cf;
    color: #fff;
    padding-right: 10px;
    padding-left: 15px;
    position: relative;
    margin-right: 2px;
}
.breadcrumb-link::after,
.breadcrumb-child-link::after {
    content: "";
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #a1b6cf;
    position: absolute;
    right: -10px;
    top: 0;
    z-index: 1;
}
.breadcrumb-link:hover,
.breadcrumb-child-link:hover {
    background-color: #5e81ac;
    color: #ffffff;
}
.breadcrumb-link:hover::after,
.breadcrumb-child-link:hover::after {
    border-left: 10px solid #5e81ac;
}
.breadcrumb-child-link::before {
    content: "";
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #fff;
    position: absolute;
    left: 0;
    top: 0;
}
.breadcrumb-child:last-child {
    height: 20px;
    padding-right: 5px;
    padding-left: 15px;
}
.breadcrumb-child:last-child::after {
    content: "here";
}
.breadcrumb-child:last-child span {
    display: none;
}

フォントサイズに合わせて padding や矢羽根の border の数値は変更指定ください。

今すぐ使えるCSSレシピブック

今すぐ使えるCSSレシピブック

  • 作者:たかもそ
  • 発売日: 2019/01/29
  • メディア: Kindle版

【改訂版】はてなブログの画像ポップアップをオリジナル画像に変える
はてなブログ:フォントサイズを動的に変化させる min(), max(), clamp()
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com