【はてなブログ】パンくずリストのテキストを「トップ」から「ホーム」に変える方法（コピペOK）

スポンサーリンク

はてなブログではデフォルト（初期）のパンくずリストのテキストは「トップ」と決まっていますが、これを他のテキストに変えて、家のアイコンも付けるCSSを紹介をしています。もちろんコピペするだけの超簡単なやつです！本当にすぐできます。

表記は統一したほうが良い

私のブログでは、グローバルメニューが「ホーム」なのに、パンくずリストでは「トップ」で、ページの上に行くボタンは「TOP」と、表記がごちゃごちゃしすぎでした！

だいたい意味は分かるだろうけど、テキスト（単語）がバラバラだと見る人はちょっと困惑しますよね。グローバルメニューとパンくずリストは近くにあるので表記が揃ってないと見栄えが悪いです。意外と目立ちます。

あなたのブログはどうですか？

パンくずリストのテキストをコピペして修正する

貼り付ける場所と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';  
}

▼CSSを全部コピペすると下の画像のようなパンくずリストになります。

「ホーム」以外にする場合

MEMO

• content:のあとの赤字は任意のテキストに変更可能
• 「\f017」の後は半角スペース
• 家アイコンが不要なら「\f017」を消す

カテゴリ部分のアイコンが不要でしたら三番目のcssは使いません。
カテゴリのアイコンがつくのは記事ページだけです。

アイコン（Webフォント）を他のものに変えたい場合

「\f017」はWebフォントというものです。
はてなブログで既にいくつか用意されているのでコードを入れるだけですぐ使えます。
はてなブログ用のwebフォント一覧をまとめてくれてるページがありますので、他のものに変えたい場合は参照してください。

はてなブログで使えるアイコンフォント（Webフォント）120種類 - FOXISM

最初から用意されてるものを使った方が楽ですが、「webフォント」と検索すると、他にもたくさん出てきますので興味があれば色々探してみてください。

おわりに

パンくずリストのテキストを「トップ」から「ホーム」に変えるCSSを紹介しました。Google アドセンスの審査ではグローバルメニューがある方が良いと言われてるし、ユーザビリティ的にも良いので付けてる人が多いですよね。

「トップ」で統一すればすぐ解決しますが、パンくずリストに家のアイコンをつけたいので、より合いそうな「ホーム」（HOME）にしました。ただコピペすれば良いだけなので、ぜひ試してみてください。

はてなブログ「目次」の見た目をCSSで変える（コピペOK）

▲目次をこのページのような見た目に変えるCSSも紹介してますので、興味がありましたら見てみてください！

スポンサーリンク