Cocoonなら簡単!トップページの記事表示を変更するカスタマイズ方法

Illustration by Freepik Stories

こんにちは、アナログ子です。

WordPressテーマ「Cocoon」の機能を活用して、「トップページの記事表示を変更するカスタマイズ方法」をご紹介します。

 おすすめの人
  • Cocoonを利用している
  • トップページの雰囲気を変えたい
  • カテゴリー別に記事を表示したい
  • トップページに人気記事を表示したい

ブログの雰囲気を変えてみたい方へ、おすすめの記事です。

難しい知識は必要ありません。Cocoon設定の変更だけで、トップページに「人気記事」や「カテゴリー別の記事一覧」を表示させることができますよ!

この記事はCocoonの公式サイトを参考に、カスタマイズ方法をご紹介しています。

スポンサーリンク

人気テーマだからこそ似たようなトップページになりがち……

Illustration by Freepik Stories

「Cocoon」は、便利な機能がたくさん用意されているにもかかわらず、無料という太っ腹なWordPressテーマです!ブロガーさんにとても人気がありますよね。

〉〉Cocoon公式サイトへアクセス!

しかし、利用者が多いためか、似たようなトップページのブログをよく見かけませんか?

当サイトを例にしてみます。たとえば、次のような新着記事が順番に並んでいるようなトップページ

triggerblog.com

デフォルトのままだと、このようなトップページになっています。

ところが、少しだけ設定変更すれば「カテゴリーごとの記事一覧」や「人気記事」を表示することができるのですよ。

triggerblog.com

Cocoon設定には、ブログのトップページ(フロントページ)を表示変更する項目があります。

  • インデックス設定:記事一覧の表示を変更
  • カルーセル設定:人気記事を表示

今回は、インデックス設定とカルーセル設定を変更してカスタマイズします。それでは、さっそくカスタマイズの手順をみてみましょう。

インデックス設定:記事一覧の表示変更

Illustration by Freepik Stories

まずは、インデックス設定です。インデックス設定では、トップページの記事一覧の表示変更ができます。手順は、つぎのとおりです。

  • トップページの表示タイプを選ぶ
  • 表示させる記事カテゴリーを選ぶ

①トップページの表示タイプを選ぶ

WordPress管理画面の「Cocoon設定」をひらきます。Cocoon設定のタブ一覧から「インデックス設定」タブをクリックしましょう。

「インデックス設定」では、ブログのトップページ(フロントページ)を5つの表示タイプから選ぶことができます。

  • 一覧(デフォルト)
  • タブ一覧
  • カテゴリごと
  • カテゴリごと(2カラム)
  • カテゴリごと(3カラム)

写真のアイコンにカーソルを合わせると、どんなデザインになるか確認できますよ。

好みの表示タイプを選びましょう。

一覧

triggerblog.com

デフォルトの表示タイプです。

設定を変えていない場合は一覧に設定されており、新着記事が順番に表示されるようになっています。

タブ一覧

triggerblog.com

記事一覧の上に「タブ」が作られています。

新着記事3つの記事カテゴリーのタブがあります。それぞれのタブをクリックすると、表示される記事一覧を切り替えることができますよ。

注意:タブは4つしか表示できません。新着記事は固定になっているので、3つまで記事カテゴリーを選ぶことが可能です。

カテゴリごと

triggerblog.com

記事カテゴリーごとの記事一覧が1列で表示されています。一番上は新着記事ですね。

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

triggerblog.com

こちらは、新着記事が1列、記事カテゴリーが2列(2カラム)で表示されています。

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

triggerblog.com

新着記事が1列、記事カテゴリーが3列(3カラム)で表示されています。

②表示させる記事カテゴリーを選ぶ

表示カテゴリー」の中から、トップページに表示させたい記事一覧のカテゴリーを選び、チェックを入れます。

変更をまとめて保存」をクリックします。これで、記事一覧を表示する設定はおわりました!トップページを確認してみましょう。

注意:トップページの表示タイプを「タブ一覧」にした場合、選べる記事カテゴリーは3つまでです。

カルーセル設定:人気記事を表示

Illustration by Freepik Stories

つぎは、「カルーセル設定」です。

カルーセル設定を変更すると、トップページに人気記事を表示できます。

  • カルーセルの表示を設定
  • 人気記事の設定

カルーセルとは:メリーゴーラウンドのようにくるくる回転させて、画像や記事などをスライド表示する方法

①カルーセルの表示を設定

Cocoon設定のタブ一覧にある「カルーセル設定」をクリックします。

カルーセルの表示で「フロントページのみで表示」を選択します。スマートフォンでも表示させたい場合は、「スマートフォンで表示」にチェックを入れておきましょう。

②人気記事の設定

カルーセルに表示させる人気記事の設定です。細かく設定することができます。

  • 集計期間
  • 記事カテゴリー
  • タグ
  • カルーセルの並び替え
  • 最大表示数
  • 枠線の表示
  • オートプレイ
  • オートプレイインターバル

このあたりはお好みですね。ひとつだけ確認しておきたい設定は、「オートプレイ」です。

「オートプレイ」はカルーセルを自動的にスライドさせることができます。自動的にスライドさせたい場合は、「オートプレイを実行」にチェックを入れておきましょう。

オートプレイインターバル」は、カルーセルに表示している人気記事をスライドさせる間隔のことです。3秒から30秒の間から選べますよ。

変更をまとめて保存」をクリックします。

トップページに人気記事を表示する設定は、これで完了です。

ブログのトップページに移動して確認してみましょう!人気記事やカテゴリーごとの記事が表示されていたらOKです。トップページがにぎやかになりましたね。

まとめ「Cocoonテーマなら、簡単に記事表示を変更できる!」

Illustration by Freepik Stories

今回は、Cocoon設定を活用して、トップページの記事表示を変更させる方法を解説しました。

人気記事やカテゴリー別の記事一覧を表示させることで、トップページの雰囲気がずいぶん変わります。

Cocoon設定を変更していくだけで簡単にできるので、ブログを始めたばかり初心者ブロガーさんにも、おすすめのカスタマイズですよ。

当サイトでは、ブログやWebサイト作成に役立つ情報をシェアしています。Twitterでも情報発信していますので、良かったらフォローしてくださいね。

こちらの記事もおすすめです!

WordPress
スポンサーリンク
シェアする
アナログ子をフォローする
TRIGGER BLOG

コメント

アナログ子

こんにちは、アナログ子です。「アナログな自分から変わりたい」ブログ、HTML、CSS、WordPressなど勉強中。自分が困ったこと、気になったことを記事に書いています。好物は「焼きいも」

アナログ子をフォローする
タイトルとURLをコピーしました