WordPressテーマCocoonのパンくずリストをカスタマイズする方法を解説していきます。
パンくずリストの表示設定の方法も載せています。
完成イメージ
パンくずリストの色を変更するコード

/* パンくずリスト */
.breadcrumb, .breadcrumb-caption, .breadcrumb a{
color: #ef97e8; /* 文字の色 */
}
ハバー時に下線をつけるためのコード

ハバー時に、上の画像のような下線をつけたい場合は、以下のコードを足します。
.breadcrumb-caption:hover{
text-decoration: underline; /* ハバー時に下線 */
}
パンくずリストの表示位置を変える方法
Cocoonでは、パンくずリストの位置はデフォルトで「メインカラムボトム」になっています。
Cocoonでパンくずリストの表示位置を変えるには、「ダッシュボード」→「Cocoon設定」→「投稿」を開きます。
そのまま1番下までスクロールすると「パンくずリスト設定」という項目があるので、そこで配置する位置を設定します。


パンくずリストをヘッダー下やフッター前に配置する場合
パンくずリストをヘッダー下(メインカラム手前)やフッター手前に配置する場合、デフォルトでは白い背景になっています。

背景を透明にする(白い部分をなくしたい)場合は、以下のコードをコピペします。
.breadcrumb.sbp-main-before, .breadcrumb.sbp-footer-before {
background: transparent;
}
