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

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

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

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

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

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

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

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

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

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

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

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

設定手順は簡単です。

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

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

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

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

簡単ですね。

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

タグを並べ替える

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

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

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

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

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

タグの色を変更する

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

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

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

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

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

色って大事です。

まとめ

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

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

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

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

こんなこととか

あわせて読みたい

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

こんなこととか

あわせて読みたい

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

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

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

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

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

うーん・・・悩む。

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