Cocoonトップページの記事表示を2分割にカスタマイズする方法(タブ一覧、カテゴリごと)

ブログ

前回の記事ではCocoonのトップページの記事を2分割に表示する方法について解説しました。

まだ見ていない方は先にそちらを見てからこの記事に戻ってきてください!

すでにトップページの記事の表示を2分割になっている方は問題ありません。

今回はさらに表示をカスタマイズする方法について説明します。

今回の外観設定はCocoon設定のインデックスから行います。

今回の設定はフロントページタイプの「タブ一覧」と「カテゴリーごと」の設定になります。

上の図のフロントページタイプ(β版)の表示形式が最初は一覧(デフォルト)になっていると思います。

その設定を「タブ一覧」と「カテゴリーごと」にするとどのようにトップページの表示が変化するのかを実際に変更してみたイメージを見ながら見ていきましょう!!

スポンサーリンク

タブ一覧

フロントページタイプ(β版)の設定を「タブ一覧」にして、表示カテゴリーに「ブログ」「理系&大学」「英語」を含めると

PCでは

こんな感じになります!

スマホでは

こんな感じです!

表示カテゴリーから「ブログ」を除外すると

こんな感じになります!

PCだとグローバルメニューとタブが被って少し変な感じですが、スマホのほうは良い感じだと思います笑。

「タブ一覧」では表示カテゴリーが3つまでしか選択できないので迷ったら3つ選択するのがおすすめです。

スポンサーリンク

カテゴリごと

フロントページタイプ(β版)の設定を「カテゴリごと」にして、表示カテゴリーに「ブログ」「理系&大学」「英語」を含めると

PCでは

スマホでは

こんな感じになります!

一つのカテゴリごとに最大4つの記事が表示される設定になっています。

カテゴリごと(2カラム)

フロントページタイプ(β版)の設定を「カテゴリごと(2カラム)」にして、表示カテゴリーに「ブログ」「理系&大学」「英語」を含めると

PCでは

こんな感じになります!

新着記事以外のカテゴリーが2分割される表示ですね。

スマホの表示は、「カテゴリごと」と同じになりました。

おそらくスマホは画面が小さいのでそのようなレスポンシブの設定になっているのだと思います。

カテゴリごと(3カラム)

フロントページタイプ(β版)の設定を「カテゴリごと(3カラム)」にして、表示カテゴリーに「ブログ」「理系&大学」「英語」を含めると

PCでは

こんな感じになります!

スマホの表示は「カテゴリごと」と同じです。

「タブ一覧」&「カテゴリごと」まとめ

以上4つの表示を見てきました。

特段、「これがいい!」というのがないので好みの問題だと思います笑。

自分の好みに合った表示にしてください!

【あわせて読みたい記事】

コメント

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