【Cocoon】カテゴリーを見やすくカスタマイズする方法

Cocoon カテゴリー カスタマイズ ブログ運営

Cocoonのカテゴリーを見やすくカスタマイズしてみました。サイドバーにあるやつですね。

シンプルなのでどんなサイトにも合うはずです。

web初心者の方でも簡単に使える記述なので、cssの勉強がてらぜひ使ってみてください。一応コピペでも使えます。

Cocoonのカテゴリーを見やすくカスタマイズ

今回のカスタマイズで実装できるのがこちら。

Cocoon カテゴリー カスタマイズ

ボーダーが入ることでちょっと見やすくなりますよね。ワンポイントのリストマーカーもあった方がデザイン的にも良くなるはず。

 

やってることは非常にシンプルなんですが、サイトの印象はこれだけでも大きく変わります。

このカスタマイズのポイントは、

  1. タイトル(h3)のデザインをカスタマイズ
  2. 文字の前にアイコンフォントを付ける
  3. ボーダーで境目を作る

の3つです。

一つずつカスタマイズのポイントを解説していきますね。(最終的なコードはこちら

1、カテゴリータイトル(h3)をカスタマイズ

それでは、カテゴリータイトルのデザインから見ていきましょう。

ここでは大きく2つの作業をしています。

タイトルの文字と背景色を変更

まずはタイトルの「文字」と「背景色」の変更。

デフォルトのCocoonの場合は、テーマカラーが背景色に入り、文字は白抜きで表示されているはず。これを逆転させました。

.sidebar .widget-sidebar-title{
    color: #499eda;
    background-color: #fff;
}

この通り、文字の色は「colorプロパティ」、背景の色は「background-colorプロパティ」で指定することができます。

カラーコードは、各自サイトのテーマカラーを指定してみてください。

タイトル前にアイコンフォントを付ける

続いて、タイトル文字前にアイコンフォントを付ける作業です。

Cocoonでは「Font Awesome」というサービスを利用しているので、簡単にアイコンフォントを扱うことができます。

アイコンフォントの使い方はこちらの記事で紹介しているので参考にしてみてください。

実際のcssがこちら。

.sidebar .widget_categories .widget-sidebar-title:before {
    line-height: 1!important;
    content: "\f07b";
    color: #499eda;
    padding-right: 5px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 16px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    animation: horizontal 3s ease infinite;
    -webkit-animation: horizontal 3s ease infinite;
}

今回はフォルダのアイコンを使用しましたが、Font Awesomeにあるアイコンなら何でも当てはめることができます。「contentプロパティ」の箇所ですね。

サイズと色も各自変更することができるので試してみてください。

2、各カテゴリー名の文字前にアイコンフォントをつける

続いて、各カテゴリー名の文字前にもアイコンフォントを付けていきます。

アイコンフォントの付け方は上記で紹介した方法と全く同じです。

.widget_categories ul .cat-item a::before{
    line-height: 1!important;
    content: "\f0da"; 
    color: #499eda;
    padding-right: 10px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    animation: horizontal 3s ease infinite;
    -webkit-animation: horizontal 3s ease infinite;
}

これもサイズ、カラー等の変更は各自変更お願いします。

3、各カテゴリーの間をボーダーで仕切る

最後に、各カテゴリーの間をボーダーで仕切ります。

線を入れるには「borderプロパティ」を使うんですが、今回はちょっとコツがいるので注意してください。

.widget_categories ul .cat-item{
    border-top: 1px dotted #e1e1e1;
}
.widget_categories ul .cat-item:last-child{
	border-bottom: 1px dotted #e1e1e1;
}

まずは「border-topプロパティ」を使って各カテゴリーの上に点線を入れていくんですが、これだけだと一番下に点線が入らず不格好になってしまいます。

ですから、最後のカテゴリー名にのみに疑似クラス「:last-child」を使って下にボーダーを加えておきましょう。ここでは要素の下に点線を入れたいので「border-bottomプロパティ」を使います。

 

今回のように、同じ要素が並んでいる中から一つの要素を指定するには疑似クラスを使います。これは知っておくと便利。

あとは文字の間隔など微調整をして完成

要点は以上。あとは文字の間隔などを調整すれば完成です。

最終的なコードがこちら。

/*カテゴリー
===================================*/
.widget_categories ul .cat-item a::before{
    line-height: 1!important;
    content: "\f0da"; 
    color: #499eda;
    padding-right: 10px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    animation: horizontal 3s ease infinite;
    -webkit-animation: horizontal 3s ease infinite;
}
.widget_categories ul .cat-item{
    border-top: 1px dotted #e1e1e1;
}
.widget_categories ul .cat-item:last-child{
     border-bottom: 1px dotted #e1e1e1;
}
.widget_categories ul li a{
    padding: 10px 0;
    padding-right: 10px;
    padding-left: 10px;
}
.sidebar .widget-sidebar-title{
   	color: #499eda;
	background-color: #fff;
	margin: 16px 0 0 0;
	padding: 16px 0 10px 5px;
}
.sidebar .widget_categories .widget-sidebar-title:before {
    line-height: 1!important;
    content: "\f07b";
    color: #499eda;
    padding-right: 5px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 16px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    animation: horizontal 3s ease infinite;
    -webkit-animation: horizontal 3s ease infinite;
}

コピペで使えると思いますが、ほかのcssとの兼ね合いでレイアウトが崩れる場合もあるので注意してください。

 

今回の主なポイントは「アイコンフォント」と「疑似クラス」でした。

特に疑似クラスは、知っているだけでカスタマイズの幅が広がるので一度勉強しておくと良いですよ。

ブログ運営

FFseeのweb担当。ブログ、アフィリエイト、ネットショップ運営歴3年。
最初の1年で失敗サイトを量産しながらも、今は6サイトくらいに落ち着いて半フリーランスな生活をしてます。

やまりょうをフォローする
\ この記事をシェアする /
スポンサーリンク
FFsee