Cocoonパンくずリストのカスタマイズと設定の方法

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;
}