涼鈴雑多工廠

涼鈴雑多

〜暇人工作員のブログ〜

【備忘録】パンくずリストをカスタマイズする(はてなブログ)

参考にしたブログ

【はてなブログ】パンくずリストの最後の項目(現在のページ名)を消す - simon's note

【はてなブログ】パンくずリストのカスタマイズ - simon's note

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

最後の項目を隠す

パンくずリストの最後の項目は現在のページ名で、ものによってはかなり長い。
パンくずリストのすぐ近くには大きな文字でページ名が表示してあり、はっきり言って余計なので見えなくする。

「デザイン」→「カスタマイズ」→「デザインCSS」から行を追加する。

/* パンくずリストの最後の項目を消す */
#top-box .breadcrumb-child:last-child{display:none;}

/* */で囲われているのはコメントアウトなのであっても無くても書き換えてもいい

グローバルメニューのアイコン・テキスト変更

「デザイン」→「カスタマイズ」→「デザインCSS」から行を追加する。

/* パンくずリストのグローバルメニューのアイコン・テキスト変更 */
.breadcrumb-link span{
    font-size:0;
}
.breadcrumb-link:before {
    font-family: 'blogicon';
    content:'\f017 ホーム';
}

\f017はアイコンWEBフォントなので、コード表から任意のアイコンを選んで使用することができる。
このブログが分かりやすい。
ホームの部分はアイコンの隣に表示されるテキストになっている。トップとかホームとか好きなものに。
この2つの間には半角スペース必須。

結果

f:id:himajinkosaku:20200416134325p:plain
こんな感じ
一番右に > が残っているけど消し方が分からない…