papico's note

通信大学生で主婦。日常を楽しく過ごす方法を探していきます。

【はてなブログ】パンくずリストのテキストを「トップ」から「ホーム」に変える方法(コピペ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フォント」と検索すると、他にもたくさん出てきますので興味があれば色々探してみてください。

おわりに

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


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

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

よく読まれてる記事