トップページにタブ切り替えを設定したい【Cocoon】

トップページのデザインっていつまでも悩みます。

他のかたのブログを見ていると

「こっちのデザインもいい!あっちのデザインもいい!!」

いろいろと迷走中のクラゲです。

さて、他のかたのブログを見ていると、トップページに「タブ切り替え」がありました。

「なにこれ!?かっちょいい!Cocoonでもできるのかな?」

調べた結果、2020年5月からCocoonでもタブ切り替えができるようになったようです。

タブをクリックする手間はありますが、トップページにカテゴリーをまとめて表示できるのは嬉しい機能ですね。

さっそくクラゲブログにもタブ切り替えを導入すべく設定しました。

今回は「Cocoonでタブ切り替えを設定する方法」をお話しします。

この記事を読んで分かること
  • タブ切り替えの設定方法
  • タブ切り替えのカスタマイズ方法
妻クラゲ

最近トップページのデザインに迷走してない?

クラゲ

すべてお見通しですね

目次

トップページにタブ切り替えを設定する【Cocoon】

設定手順は簡単です。

「Cocoon設定」「インデックス」をクリックして「タブ一覧」にチェックを入れます。

表示したいカテゴリーにチェックを入れます。

表示するカテゴリーは3つまで選択可能です。

タブ切り替えが設定されました!

簡単ですね。

タブをクリックすると別のタブに切り替わります。

タグを並べ替える

タグの並びが気になるのでカスタマイズしましょう。

「Cocoon設定」「インデックス」をクリックして「カテゴリ表示の順番を並び替える場合はこちら」をクリックします。

カテゴリ表示の順番を並び替えるために、カテゴリーIDを調べましょう。

カテゴリーIDの調べ方

「投稿」「カテゴリー」をクリックして、カテゴリーIDを調べたいカテゴリーをクリックします。

URLの「tag_ID=」の後ろの番号がカテゴリーIDです。

カテゴリーIDを並べたい順番で入力します。

タグの順番が変わりました。

タグの色を変更する

タグの色がブログデザインと合っていないので、タグの色を変えましょう。

「外観」「テーマエディター」をクリックして「Cocoon Child」を選択します。

一番後ろにコードを追加して「ファイルを更新」をクリックします。

文字色や背景色は、自分の好きな色に変更してください。

コピペ用コード
  1. /*トップページのタブ(選択前)*/
  2. .index-tab-button{
  3.     color: #454545;/*文字色*/
  4.     font-size: 16px!important;/*文字の大きさ*/
  5.     background: #dbebf8!important;/*背景色*/
  6.     border: solid 1px #66a6ff!important;/*枠線の種類・太さ・色*/
  7. }
  8. /*トップページのタブ(選択後)*/
  9. #index-tab-1:checked~.index-tab-buttons .index-tab-button[for=index-tab-1],
  10. #index-tab-2:checked~.index-tab-buttons .index-tab-button[for=index-tab-2],
  11. #index-tab-3:checked~.index-tab-buttons .index-tab-button[for=index-tab-3],
  12. #index-tab-4:checked~.index-tab-buttons .index-tab-button[for=index-tab-4]{
  13.     color: #FFF;/*選択後の文字色*/
  14.     background: #66a6ff!important;/*選択後の背景色*/
  15.     font-weight: 400;/*文字の太さ*/
  16. }

タブの色を変更できました。

色って大事です。

まとめ

トップページにタブ切り替えを設定する方法についてお話ししました。

タブ切り替えは有料テーマだけの機能かと思っていましたが、無料テーマのCocoonでも設定できました。

有料テーマ購入を検討するにあたり、Cocoonで有料テーマのデザインに近づけないかと試行錯誤してきましたが

「有料テーマでやりたいことは、ほとんどCocoonでもできてしまうなー」というのが素直な感想です。

こんなこととか

あわせて読みたい
アイキャッチ画像にマウスを合わせたときに画像拡大させたい【Cocoon】
アイキャッチ画像にマウスを合わせたときに画像拡大させたい【Cocoon】あいかわらず有料テーマに悩んでいるクラゲです。有料テーマで作られたサイトを見ていると、アイキャッチ画像にマウスを合わせたときに、画像がブワッっと拡大したり、...

こんなこととか

あわせて読みたい
【カルーセル】ヘッダー下に記事スライドショーを設置しよう【Cocoon】
【カルーセル】ヘッダー下に記事スライドショーを設置しよう【Cocoon】人もクラゲもブログも第一印象が大事!!ブログの第一印象はトップページで決まります。トップページの身だしなみを整えることは、離脱率にも影響を与える重要なことで...

いや、ほんとCocoonってなんで無料なんでしょうか?

でも、囲み線などの装飾に関しては、有料テーマの方が使い勝手が良さそうかなと思います。

有料テーマにするならSWELLが第一候補ですが、AFFINGER6がリリース予定ということもあり、悩むところです。

THE THORのデザインもカッコよくて憧れます。

うーん・・・悩む。

妻クラゲ

悩んでる時間がもったいないから、ぜんぶ買って比較記事でも書け!

クラゲ

男前だわー

最後まで読んでいただき、ありがとうございます。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる