簡単！Cocoonのサイトマップをプチカスタマイズ

Cocoon・カスタマイズ

2020.05.15

この記事は約3分で読めます。

Cocoonにはサイトマップを自動生成する機能があります。

文字の色・ホバー色を変更したり、アンダーラインを消す簡単なカスタマイズ方法についてです。

使い方については以下をご覧ください。

Cocoonショートコード-サイトマップの使い方と表示サンプル

サイトマップ生成ショートコードサイト内のページ一覧を簡単に作成する事が出来ます。投稿ページ固定ページカテゴリーページ月別アーカイブページそれぞれの表示・非表示を指定できます。出来ない事個別に表示しない記事を指定カテゴリー別...

カスタマイズサンプル
- Before
- After
カスタマイズ方法
カラーの変更

カスタマイズサンプル

Before

After

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ→追加CSS

外観→テーマエディター→style.css

文字色、ホバー色を変える

.sitemap  ul li a{
color:#333; /*文字色/*/
text-decoration:none; /*アンダーラインを消す*/
}
.sitemap ul li a:hover{
color:#839b5c; /*ホバー色*/
}

ホバー時に背景色をつける

.sitemap ul li{
list-style:none; /*リストの●を消す*/
}
.sitemap  ul li a{
padding:3px 5px; /*上下　左右　余白*/
color:#333; /*文字色*/
text-decoration:none; /*アンダーラインを消す*/
}
.sitemap ul li a:hover{ /*ホバー時*/
/*背景色　グラデーション*/
background: radial-gradient(rgba(131,155,92,0.4), rgba(131,155,92,0.9));
color:#fff;
}