トップページのデザインっていつまでも悩みます。
他のかたのブログを見ていると
「こっちのデザインもいい!あっちのデザインもいい!!」
いろいろと迷走中のクラゲです。
さて、他のかたのブログを見ていると、トップページに「タブ切り替え」がありました。
「なにこれ!?かっちょいい!Cocoonでもできるのかな?」
![](https://ryulifeblog.com/wp-content/uploads/2020/12/0.jpg)
調べた結果、2020年5月からCocoonでもタブ切り替えができるようになったようです。
タブをクリックする手間はありますが、トップページにカテゴリーをまとめて表示できるのは嬉しい機能ですね。
さっそくクラゲブログにもタブ切り替えを導入すべく設定しました。
今回は「Cocoonでタブ切り替えを設定する方法」をお話しします。
- タブ切り替えの設定方法
- タブ切り替えのカスタマイズ方法
![](https://ryulifeblog.com/wp-content/uploads/2020/09/3d20fb9b421a86486db347387cfe8384.png)
最近トップページのデザインに迷走してない?
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d160a53f71104dc4e5ed3c300ba3ba79-1.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d160a53f71104dc4e5ed3c300ba3ba79-1.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d160a53f71104dc4e5ed3c300ba3ba79-1.png)
すべてお見通しですね
トップページにタブ切り替えを設定する【Cocoon】
![](https://ryulifeblog.com/wp-content/uploads/2020/11/animal_chara_computer_penguin.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/11/animal_chara_computer_penguin.jpg)
設定手順は簡単です。
「Cocoon設定」「インデックス」をクリックして「タブ一覧」にチェックを入れます。
表示したいカテゴリーにチェックを入れます。
表示するカテゴリーは3つまで選択可能です。
![](https://ryulifeblog.com/wp-content/uploads/2020/12/1.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/12/1.jpg)
タブ切り替えが設定されました!
簡単ですね。
![](https://ryulifeblog.com/wp-content/uploads/2020/12/2.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/12/2.jpg)
タブをクリックすると別のタブに切り替わります。
![](https://ryulifeblog.com/wp-content/uploads/2020/12/3.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/12/3.jpg)
タグを並べ替える
タグの並びが気になるのでカスタマイズしましょう。
「Cocoon設定」「インデックス」をクリックして「カテゴリ表示の順番を並び替える場合はこちら」をクリックします。
カテゴリ表示の順番を並び替えるために、カテゴリーIDを調べましょう。
![](https://ryulifeblog.com/wp-content/uploads/2020/12/4.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/12/4.jpg)
「投稿」「カテゴリー」をクリックして、カテゴリーIDを調べたいカテゴリーをクリックします。
![](https://ryulifeblog.com/wp-content/uploads/2020/12/5.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/12/5.jpg)
URLの「tag_ID=」の後ろの番号がカテゴリーIDです。
![](https://ryulifeblog.com/wp-content/uploads/2020/12/6.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/12/6.jpg)
カテゴリーIDを並べたい順番で入力します。
![](https://ryulifeblog.com/wp-content/uploads/2020/12/7.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/12/7.jpg)
タグの順番が変わりました。
![](https://ryulifeblog.com/wp-content/uploads/2020/12/8.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/12/8.jpg)
タグの色を変更する
タグの色がブログデザインと合っていないので、タグの色を変えましょう。
「外観」「テーマエディター」をクリックして「Cocoon Child」を選択します。
一番後ろにコードを追加して「ファイルを更新」をクリックします。
文字色や背景色は、自分の好きな色に変更してください。
![](https://ryulifeblog.com/wp-content/uploads/2020/12/9.0.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/12/9.0.jpg)
- /*トップページのタブ(選択前)*/
- .index-tab-button{
- color: #454545;/*文字色*/
- 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: #66a6ff!important;/*選択後の背景色*/
- font-weight: 400;/*文字の太さ*/
- }
タブの色を変更できました。
色って大事です。
![](https://ryulifeblog.com/wp-content/uploads/2020/12/9.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/12/9.jpg)
まとめ
![](https://ryulifeblog.com/wp-content/uploads/2020/11/animal_chara_smartphone_penguin.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/11/animal_chara_smartphone_penguin.jpg)
トップページにタブ切り替えを設定する方法についてお話ししました。
タブ切り替えは有料テーマだけの機能かと思っていましたが、無料テーマのCocoonでも設定できました。
有料テーマ購入を検討するにあたり、Cocoonで有料テーマのデザインに近づけないかと試行錯誤してきましたが
「有料テーマでやりたいことは、ほとんどCocoonでもできてしまうなー」というのが素直な感想です。
こんなこととか
![](https://ryulifeblog.com/wp-content/uploads/2020/11/eedee85266921b125ac7dd7a28bbab38-1-300x158.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/11/eedee85266921b125ac7dd7a28bbab38-1-300x158.jpg)
こんなこととか
![](https://ryulifeblog.com/wp-content/uploads/2020/11/3cfc92e2c453d81d0f18c605b6bb4339-300x173.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/11/3cfc92e2c453d81d0f18c605b6bb4339-300x173.jpg)
いや、ほんとCocoonってなんで無料なんでしょうか?
でも、囲み線などの装飾に関しては、有料テーマの方が使い勝手が良さそうかなと思います。
有料テーマにするならSWELLが第一候補ですが、AFFINGER6がリリース予定ということもあり、悩むところです。
THE THORのデザインもカッコよくて憧れます。
うーん・・・悩む。
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d045cb03f132e716d3b04122da7c3e6c.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d045cb03f132e716d3b04122da7c3e6c.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d045cb03f132e716d3b04122da7c3e6c.png)
悩んでる時間がもったいないから、ぜんぶ買って比較記事でも書け!
![](https://ryulifeblog.com/wp-content/uploads/2020/09/54306f1ddfa8f9ec2a72347cbe571dcd.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/54306f1ddfa8f9ec2a72347cbe571dcd.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/54306f1ddfa8f9ec2a72347cbe571dcd.png)
男前だわー
最後まで読んでいただき、ありがとうございます。
コメント