【Cocoon】タブ切り替えを吹き出し型にカスタマイズ!

Cocoonタブ切り替えカスタマイズカスタマイズ
この記事は約6分で読めます。

この記事では、Cocoonのタブ切り替えを吹き出し型にカスタマイズする方法を紹介していきます。

コピペで簡単にできる上、ポップで親しみやすいサイトになるので、ぜひやってみてください。

最初に

フロントページの表示形式を「タブ一覧」にした場合のカスタマイズです。

フロントページの表示形式を「タブ一覧」にする方法は、こちらの記事をお読みください。

こんな見た目になります

Cocoonタブ切り替えの吹き出し型カスタマイズ

カスタマイズ用コード

以下のコードの、カラーコードの部分を好きな色に変えて「追加CSS」に記述します。

デザインも吹き出しがくっついたものと離れたものの2種類用意しましたので、お好きな方を使ってください。

吹き出しくっつきバージョン

Cocoonタブ切り替え
/* カテゴリ別インデックス */
.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"] {
    position: relative;
    background: #ffb1d8; /* 背景色 */
    border: 1px solid #ffb1d8; /* 枠線の色 */
}
/* 吹き出しの三角形の部分 */
#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"]:before, #index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"]:before, #index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"]:before, #index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"]:before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -8px;
    opacity: 1;
    width: 0;
    height: 0;
    border-top: 8px solid #ffb1d8; /* 吹き出しの三角形の部分の色 */
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

それぞれ離れたバージョン

Cocoonタブ切り替え
/* カテゴリ別インデックス */
.index-tab-buttons .index-tab-button {
	border-color: #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"] {
    position: relative;
    background: #ffb1d8; /* 背景色 */
    border: 1px solid #ffb1d8; /* 枠線の色 */
}
/* 吹き出しの三角形の部分 */
#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"]:before, #index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"]:before, #index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"]:before, #index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"]:before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -8px;
    opacity: 1;
    width: 0;
    height: 0;
    border-top: 8px solid #ffb1d8; /* 吹き出しの三角形の部分の色 */
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

コメント

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