Cocoonフロントページのタブ一覧のカスタマイズ

カスタマイズ
この記事は約3分で読めます。

Cocoonでは、フロントページタイプ切り換え機能により、フロントページの表示スタイルを自由に変えることができます。

本記事では、フロントページタイプをタブ一覧にした場合のカスタマイズ方法を紹介していきます。

こんな見た目になります

カスタマイズ後
カスタマイズ後

サイトに合わせた色の変更と、ボタン同士をくっつけました。

また、両端の角だけ少し丸めているのもこだわりポイントです。

カスタマイズ前
デフォルトのデザイン

フロントページタブ一覧のカスタマイズの手順

  1. WordPress管理画面の「Cocoon設定→インデックス→フロントページタイプ」から、表示形式を「タブ一覧」に設定する
  2. 「外観→カスタマイズ→追加CSS」にCSSコードをコピペする

Cocoonタブ一覧の設定画面
フロントページタイプの設定

また、ここでは表示形式の他にも、カテゴリーの並び順やエントリーカードの枚数といった細かい部分も変更できます。

詳しい使い方は、公式サイトを参照してください。

カスタマイズ用CSS

カラーコードの部分を好きな色に変えてお使いください。

/* カテゴリ別インデックス */
.index-tab-buttons .index-tab-button {
	margin: 0; /* ボタンをくっつける */
	border-radius: 0; /* 角を直角に */
	border-right: none;
	border-color: #c8d8e6; /* 枠線の色 */
}
.index-tab-buttons .index-tab-button:nth-child(1) {
	border-radius: 3px 0 0 3px; /* 1番目の要素の角を丸める */
}
.index-tab-button:last-child {
	border-radius: 0 3px 3px 0; /* 最後の要素の角を丸める */
	border-right: 1px solid #c8d8e6;
}
#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 #ffb1d8; /* 選択中の背景色 */
    border: 1px solid #ffb1d8; /* 選択中の枠線の色 */
}

おまけ:子要素「nth-child(n)」について

「最初と最後のタブだけ角を丸める」は、「擬似クラス」「子要素」と呼ばれる「nth-child(n)」を使って指定しています。

子要素は「最初の要素にだけ適応したい」「最後の要素にだけ適応したい」といった場合に便利です。

他にも「何番目に」「奇数・偶数に」といった指定ができます。

詳しくは別記事にまとめているので、もし興味があったらお読みください😄

コメント

  1. […] Cocoonフロントページのタブ一覧のカスタマイズalice.yuhostyles.com2021.02.10 […]

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