はてなブログではデフォルト（初期）のパンくずリストのテキストは「トップ」と決まっていますが、これを他のテキストに変えて、家のアイコンも付けるCSSを紹介をしています。もちろんコピペするだけの超簡単なやつです！本当にすぐできます。
表記は統一したほうが良い
私のブログでは、グローバルメニューが「ホーム」なのに、パンくずリストでは「トップ」で、ページの上に行くボタンは「TOP」と、表記がごちゃごちゃしすぎでした！
だいたい意味は分かるだろうけど、テキスト（単語）がバラバラだと見る人はちょっと困惑しますよね。グローバルメニューとパンくずリストは近くにあるので表記が揃ってないと見栄えが悪いです。意外と目立ちます。
あなたのブログはどうですか？
パンくずリストのテキストをコピペして修正する
▼CSSを全部コピペすると下の画像のようなパンくずリストになります。
貼り付ける場所とCSS
【PC】とレスポンシブの人は｢カスタマイズ」→「デザインCSS」の中にコピペ
【スマホ】は「スマートフォン」→「ヘッダ」（タイトル下 ※PROの人のみ）
/*パンくずリストのテキスト変更*/
.breadcrumb-link span{
font-size:0;
}
.breadcrumb-link:before {
font-family: 'blogicon';
content:'\f017 ホーム';
}
/*パンくずリスト カテゴリもアイコンつける場合*/
.breadcrumb-child-link:before{
font-family: 'blogicon';
content:'\f022';
}
「ホーム」以外にする場合
MEMO
- content:のあとの赤字は任意のテキストに変更可能
- 「\f017」の後は半角スペース
- 家アイコンが不要なら「\f017」を消す
カテゴリ部分のアイコンが不要でしたら三番目のcssは使いません。
カテゴリのアイコンがつくのは記事ページだけです。
アイコン（Webフォント）を他のものに変えたい場合
「\f017」はWebフォントというものです。上のイメージ図で言うと家のアイコン。
はてなブログで既にいくつか用意されているのでコードを入れるだけですぐ使えます。
はてなブログ用のwebフォント一覧をまとめてくれてるページがありますので、他のものに変えたい場合は参照してください。
おわりに
パンくずリストのテキストを「トップ」から「ホーム」に変えるCSSを紹介しました。Google アドセンスの審査ではグローバルメニューがある方が良いと言われてるし、ユーザビリティ的にも良いので付けてる人が多いですよね。
「トップ」で統一すればすぐ解決しますが、パンくずリストに家のアイコンをつけたいので、より合いそうな「ホーム」（HOME）にしました。ただコピペすれば良いだけなので、ぜひ試してみてください。
