Cocoonの使い方やカスタマイズとオリジナルスキン

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

スポンサーリンク
カスタマイズ
この記事は約3分で読めます。

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

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

 

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

Cocoonショートコード-サイトマップの使い方と表示サンプル
サイトマップ生成ショートコード サイト内のページ一覧を簡単に作成する事が出来ます。 投稿ページ 固定ページ カテゴリーページ 月別アーカイブページ それぞれ...

 

スポンサーリンク

カスタマイズサンプル

Before

Cocoonサイトマップ

 

After

 

カスタマイズ方法

簡単なCSS追記のみです。

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

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

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

 

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

Cocoonサイトマップ:カスタマイズ

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

 

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

Cocoonサイトマップ:カスタマイズ

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

 

 

リストスタイルを変更する

 

消す場合
Cocoonサイトマップ:カスタマイズ

.sitemap ul li{list-style:none;}

 

白丸
Cocoonサイトマップ:カスタマイズ

.sitemap ul li{list-style:circle;}

 

黒四角
Cocoonサイトマップ:カスタマイズ

.sitemap ul li {list-style:square;}

 

文字サイズを変える

Cocoonサイトマップ:カスタマイズ

 

.sitemap ul li a{font-size:14px;}

 

 

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名

 

 

コメント

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