...

【Cocoon】トップページのカテゴリタブを可愛くカスタマイズする方法!コピペでOK!

Cocoonのカテゴリタブのカスタマイズ

どうもおはようポテト(@ohayoupoteto22)です。

当サイトでも絶賛使用中の神テーマCocoon。

先日アップデートにより、トップページの記事一覧をタブでカテゴリごとに分けて表示することができるようになりました。

設定一つでこれは神!

ソロモン

 

そんなタブのデフォルトのデザインはこんな感じ。

 

…チョットジミジャナイ?(›´ω`‹ )

 

ということで今回は

カテゴリタブを可愛くカスタマイズしたい

Cocoonを使っていてコピペでできるカスタマイズを探している

という方に向けて「トップページのカテゴリタブを可愛くカスタマイズする方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

ブログ主

早速いってみよう!

カテゴリタブの完成イメージ

完成イメージはこんな感じです。

ウチのサイトのトップページはこのデザインにしています。

 

 

 

タブを切り替えた時の色も変えてよりサイトにあったものにしています。ここは自分のサイトのテーマカラーにした方が良さげですね。

カスタマイズ手順

手順は大きく分けて3つ。文字の間に画像を置きたくなければstep1は飛ばして構いません。

手順
step1
画像をアップロード!
step2
style.cssにコピペ!
step3
自分のサイトにあった色に設定!

Cocoonのカテゴリタブのカスタマイズ方法

使いたい画像をアップロード

メディアを追加

「メディア」から「新規追加」を選択。

画像をアップ

使いたい画像をドラッグ&ドロップします

画像のURLを取得

アップし終わると、右の方らへんにURLが表示されるのでメモしておきます

 

CSSをコピー&ペースト

以下のコードを子テーマのstyle.cssに貼り付けます

************************************
** タブカスタマイズ
************************************/
.index-tab-button{
background:#fef7eb!important;/*好きな色に*/
padding: 8px 16px!important;
}
@media screen and (max-width: 834px){
.index-tab-button{
padding: 5px 16px!important;
font-size:13px!important;
}
}
/*上の余白を少し無くす*/
.index-tab-buttons{
margin-top:-9px!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]{
background:#f8c678!important;/*選択した時の色。好きな色に*/
border:initial!important;
}
************************************
** ここから下は画像を使う場合
************************************/
.index-tab-button ::before{
content: '';
display: inline-block;
width: 27px;/*画像によって要調整*/
height: 27px;/*画像によって要調整*/
background-image: url("画像のURL");
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
}

「画像のURL」というところには先ほどメモしておいたURLを貼っちゃってください。

色を調整

「サイトのテーマカラーか…うーん」

という人は「選択した時の色」のところの色をヘッダーの背景色にするのがオススメです。

 

そして通常時の色は、そのヘッダーの背景色に似合う色ちょっと薄くした色が良いかもです。

ブログ主

その辺りは下の記事が参考になります

 

色の設定が終われば完成です!

お疲れ様!

ソロモン

 

最後に

以上になります。

タブはトップページでも目に付くところにあるので、オシャレにカスタマイズしておくことに越した事はないですよね!

ブログ主

他にもCocoonカスタマイズの記事書いてるのでぜひ
Cocoonの目次のカスタマイズする方法【コピペでOK】Cocoonの目次を見やすくカスタマイズする方法

 

Cocoonのサイドバーのカスタマイズ【Cocoon】サイドバーの見出しを可愛くカスタマイズする方法!コピペで簡単!

 

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA