【Cocoon】パンくずリストのカテゴリ・記事アイコンを非表示にするカスタマイズ(コピペOK)

スポンサーリンク

Cocoon のパンくずリストには、ホーム・カテゴリ・記事タイトルの前にアイコンが表示されます。(デフォルト設定だと記事タイトルは含まれません)

ホームアイコンは表示しておきたいのですが、個人的にその他のアイコンはちょっとくどく見えてしまうため表示させたくありません。

そんなときは、CSS で非表示するのが手っ取り早いです。

Font Awesome 4 を利用している方

まずは『Font Awesome 4(デフォルト設定)』を利用している場合です。

具体的なカスタマイズ方法は、下記のコードを子テーマのスタイルシート、もしくは追加CSSにコピペすればOKです。

/*パンくずリスト カテゴリ・記事タイトルアイコン 非表示*/
.breadcrumb-item > span.fa-folder,
.breadcrumb-item > span.fa-file-o {
  display: none; /*非表示*/
}

なお、[ fa-folder ]はカテゴリアイコン。[ fa-file-o ]は記事タイトルアイコンを指しています。

なのでカテゴリアイコンのみ非表示にしたい場合は、下記のコードになります。

/*パンくずリスト カテゴリアイコン 非表示*/
.breadcrumb-item > span.fa-folder {
  display: none; /*非表示*/
}

反対に、記事タイトルアイコンのみ非表示したい場合はこちらです。

/*パンくずリスト 記事タイトルアイコン 非表示*/
.breadcrumb-item > span.fa-file-o {
  display: none; /*非表示*/
}

Font Awesome 5 を利用している方

『Font Awesome 5』を利用している方は、下記のコードをコピペしてください。

/*パンくずリスト カテゴリ・記事タイトルアイコン 非表示*/
.breadcrumb-item > span.fa-folder,
.breadcrumb-item > span.fa-file {
  display: none; /*非表示*/
}

『Font Awesome 4』と『Font Awesome 5』では、記事タイトルアイコンを指定する CSSの記述が異なります。

具体的には、Font Awesome 4 だと[ fa-file-o ]でしたが、Font Awesome 5 では[ fa-file ]となっています。

ということで、記事タイトルアイコンのみ非表示したい場合はこちらをコピペしてください。

/*パンくずリスト 記事タイトルアイコン 非表示*/
.breadcrumb-item > span.fa-file {
  display: none; /*非表示*/
}

ちなみに、当ブログは現在『Font Awesome 5』を利用しているので、Font Awesome 5 用のコードを使っています。

タイトルとURLをコピーしました