お家大好き女子が選ぶ!Amazonの買ってよかったものランキングはコチラ

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

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

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

記事をおすすめしたい人

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

ブログの雰囲気を変えてみたい「Cocoonユーザーさん」におすすめの記事です。

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

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

目次

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

Illustration by Freepik Stories

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

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

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

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

カスタマイズ前のトップページ

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

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

カスタマイズ後のトップページ

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

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

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

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

Illustration by Freepik Stories

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

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

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

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

フロントページタイプ

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

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

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

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

一覧

一覧タイプ

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

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

タブ一覧

タブ一覧タイプ

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

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

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

カテゴリごと

記事カテゴリータイプ

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

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

記事カテゴリータイプ(2カラム)

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

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

記事カテゴリータイプ(3カラム)

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

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

表示カテゴリー選択

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

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

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

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

Illustration by Freepik Stories

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

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

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

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

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

カルーセル設定

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

スマートフォンで表示

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

②人気記事の設定

カルーセルに表示させる「人気記事」の設定です。いろいろな項目が用意されており、細かく設定することができます。

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

このあたりはお好みですが、特にこだわりがなければ初期設定のままでよいでしょう。ひとつだけ確認しておきたい設定は、「オートプレイ」です。

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

オートプレイを実行

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

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

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

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

Illustration by Freepik Stories

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

人気記事やカテゴリー別の記事一覧を表示させることで、トップページの雰囲気がずいぶん変わります。Cocoon設定を変更していくだけできるので、ブログを始めたばかり初心者ブロガーさんもチャレンジしやすいのではないでしょうか。Cocoonユーザーさんは、ぜひカスタマイズしてみてくださいね。

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

あわせて読みたい
完全無料で使えるイラスト素材サイトunDraw【商用利用、色変更可】 完全無料!商用利用可能のイラスト画像サイト「unDraw」について解説します。モダンなデザインのイラストが多く、とても使いやすいですよ。
あわせて読みたい
ブロガーの教科書「ブログ飯」レビュー!ブログで飯が食える理由を考察 多くのブロガーさんにおすすめされている染谷昌利さんの著書「ブログ飯」をレビューします。
アナログ子
「アナログな自分から変わりたい」アナログ子です。機械オンチで、よく物を壊します。ブログ、WordPress、ライティングなどの勉強中。

気になったこと、良かったことなどを記事にまとめています。好きな食べものは「焼いも」

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

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

コメント

コメントする

目次
閉じる