cocoon : タブに関するCSS(背景色・文字色・枠線・文字のフォント)をカスタマイズする方法

WordPressの無料テーマの中でも多くの方に使用されている「cocoon(こくーん)」で、フロントページの表示形式を「タブ一覧」に設定した際、背景色や文字(種類、色)・枠線をどうしたら変更出来るのか、CSSのどの部分をいじればいいのかと疑問を抱く方もいるのではないかと思います。

そこで今回は、cocoonでタブのCSS(色やフォント・枠線など)をカスタマイズするための方法をご紹介していきます！

動画(操作手順)

動画内で使用しているサンプルコードなどについては、本記事内のものをコピペしてもらえたらと思います。

現在割り当てられているCSSを確認

まずは、現在タブに割り当てれているCSS(タブが選択されている場合とされていない場合の2パターン)を確認してみましょう。

ブラウザの検証ツールを使っていきますので、ブラウザ上で右クリック ⇨ メニュー上から「検証」を選択しましょう。(Windowsの方は、「F12キー」でもOKです。)

検証ツールがブラウザの右側に表示されましたら、左上のほうにある矢印を選択しましょう。これを選択することで、サイト内の要素を調べることが出来ます。

タブが選択されていない時

矢印を選択した状態で、選択されていないほうのタブをクリックします。

すると、検証ツールにクリックした要素に割り当てられているCSSが表示されます。

選択されていないほうのタブは、枠線がグレーっぽいので、赤枠の部分が修正を加えるうえで使用するCSSであることが分かります。以下の部分のみコピーして、控えましょう。

/*  クリックされていない時 */ 
.index-tab-buttons .index-tab-button { 　　
  /* ここにカスタマイズ用のCSSを記述していきます。 */ 
}

タブが選択されている時

続いて、選択されている時のCSSも同様に確認しましょう。

選択されていないほうのタブは、背景色が黒っぽいグレーですので、赤枠のCSSを使用します。先ほど、コピーしたものとあわせて、以下のように追加CSSにセット出来たらカスタマイズをしていく上での準備は完了です。

タブの背景色を変更

選択されている時のタブの背景色を変更するには、次のCSSプロパティの値を変更する必要があります。本記事では、背景色を赤色にしていきます。

background: none #404453;
↓ 
background: none red;

【結果】

選択されていない時のタブの背景色を変更するには、

/*  クリックされていない時 */ 
.index-tab-buttons .index-tab-button { 
  background-color:orange; 
}

のようにbackground-colorプロパティを追加します。

タブの枠線の色・幅を変更

選択されている時のタブの枠線の色を変更するには、次のCSSプロパティの値を変更する必要があります。本記事では、色をゴールド, 線の幅を5pxにしていきます。

border: 1px solid #404453;
↓
border: 5px solid gold;

【結果】

選択されていない時のタブの枠線(幅, 色)を変更するには、

/*  クリックされていない時 */ 
.index-tab-buttons .index-tab-button { 　　
  background-color:orange; 　　
  border:2px solid black; /* 追加 */ 
}

のようにborderプロパティを追加します。

タブの文字フォントを変更

選択されている時・されていない時のタブの枠線(幅, 色)を変更するには、font-familyプロパティを追加する必要があります。

理由としては、タブに割り当てられているclass自体は、同じであるためです。タブの中に設定されている要素(今回でいうと文字)には、.index-tab-buttons .index-tab-button{}内にまとめて設定可能です。

本記事では、文字のフォントを”MS 明朝”にしていきます。

/*  クリックされていない時 */ 
.index-tab-buttons .index-tab-button { 　　
  background-color:orange; 　　
  border:2px solid black; 　　　
  font-family:"ＭＳ 明朝"; /* 追加 */ 
}

【結果】

タブの文字色を変更

選択されている時のタブの文字色を変更するには、次のCSSプロパティの値を変更する必要があります。本記事では、色を青にしていきます。

color: #fff;
↓
color: blue;

【結果】

選択されていない時のタブの文字フォントを変更するには、

/*  クリックされていない時 */
.index-tab-buttons .index-tab-button {
  background-color:orange;
  border:2px solid black; 
  font-family:"ＭＳ 明朝";
  color:green; /* 追加 */
}

のようにcolorプロパティを追加します。

最終コード＆結果

タブが選択されていない時

/*  クリックされていない時 */
.index-tab-buttons .index-tab-button {
  background-color:orange;
  border:2px solid black; 
  font-family:"ＭＳ 明朝";
  color:green; /* 追加 */
}

タブが選択されている時

/*  クリックされている時 */
#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"] {
  background: none red;
  border: 5px solid gold;
  color: blue;
  font-family:"ＭＳ 明朝";
  font-weight: 700;
}