【Cocoon】トップページのタブの色を変更する方法

ブログ

こんにちは、おはやです

 

今回は、トップページのタブの色をカスタマイズする方法をご紹介します

ちょっとした違いですが、サイト内の印象を変えることができます

サイトデザインに合わせた色に変更することで、ブログをオシャレにグレードアップできるのがうれしいですね!

 

CSSを用意してありますので、コピー&ぺーストで簡単に設定ができると思います

 

今回の作業は3分で終わります

それでは、どうぞ!

 

スポンサーリンク

タブの色変更の手順

 

手順は、3つです

  1. トップページに『タブ』を設定する
  2. コードをコピペして『style.css』に貼り付ける
  3. 色を設定する

  

ップページに『タブ』を設定する

 

『Cocoon設定』⇒『インデックス』を選択します

Cocoonの設定上、タブとして表示させるカテゴリーの数は3つです

カテゴリーが3つ以上ある場合は、『表示カテゴリー』で表示させたいカテゴリーを選択します

 

ードをコピペして『style.css』に貼り付ける

 

次に、タブの色を変えるための、下準備をします

下のコードをコピペします

 

************************************
** タブカスタマイズ
************************************/
/*トップページのタブ(選択前)*/
.index-tab-button{
color: #f7f0ed;/*文字色*/
font-size: 16px!important;/*文字の大きさ*/
background: #dbebf8!important;/*背景色*/
border: solid 1px #66a6ff!important;/*枠線の種類・太さ・色*/
}
/*トップページのタブ(選択後)*/
#index-tab-1:checked~.index-tab-buttons .index-tab-button[for=index-tab-1],
#index-tab-2:checked~.index-tab-buttons .index-tab-button[for=index-tab-2],
#index-tab-3:checked~.index-tab-buttons .index-tab-button[for=index-tab-3],
#index-tab-4:checked~.index-tab-buttons .index-tab-button[for=index-tab-4]{
color: #FFF;/*選択後の文字色*/
background: #826a58!important;/*選択後の背景色*/
font-weight: 400;/*文字の太さ*/

 

『外観』⇒『テーマエディター』を選択し『Cocoon Child』を開きます

 

『スタイルシート』の一番したに、先ほどコピペしたコードを貼り付けます

 

を設定する

最後に、色を変更します

 

コードの中の『背景色』、『選択後の背景色』に自分の変えたい色を設定します

色は、サイト全体の背景色と合わせると、まとまりが出ます

 

『Cocoon設定』⇒『全体』に進み、『サイト背景色』の色(数字)をコピーします

 

『スタイルシート』のコード内の、背景色を変更します

 

同様に、選択後の背景色も変更したら、作業は完了です

 

まとめ

 

以上が、Cocoonでトップページのタブの色を変える方法でした

 

トップページは、ブログの玄関のようなものです

トップページがおしゃれだと、ついついサイト内を回ってしまうので、見た目にをお洒落にしておくに越したことはないですね!

 

今回の記事が『Cocoon』ユーザー様のお役に立てれば嬉しいです

 

オハヤ
オハヤ

おわり!!

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