IMUZA.com

<<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で送る

最初のサイドバー

最新記事

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

2022/06/06

WordPress Popular Posts 表示されないを解決する

2022/06/03

WordPress Popular Posts 表示されない(解決だが…)

2022/05/29

WordPress:テーマをゼロから作ってみる(2)

最新記事を一覧で見る

よく読まれている記事

カテゴリー

  • はてなブログ211
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress34
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php18
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • cms-style10
  • Chrome10
  • iPhone9
  • Git入門6
  • genesis6
  • Android4
  • Python4
  • ConoHa WING4
  • 静的サイトジェネレーター3
  • Firefox3
  • Blankslate3
  • Docker3
  • SSD3
  • Facebook3
  • スマートフォン3
  • GitHub2
  • Mactype2
  • 映画1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • youtube1

Footer

My Web Sites

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

Another Sites

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

Contact Us

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

Copyright © 2022 · IMUZA.com