Cocoonトップページのカスタマイズ方法【超簡単レイアウト変更】

この記事ではWordpressテーマのCocoonのトップページのカスタマイズ方法の備忘録です。
記事が増えてくるとトップページも工夫しないと記事が埋もれてしまうので、見栄えをウェブサイト化して、記事にアクセスしやすくすることができます。
この記事を読むとCocoonのフロントページのレイアウト変更や記事一覧のショートコードの使い方がわかり、ウェブサイト型のフロントページにすることができます。

らぴす

ここでは僕が運営している投資ブログを例にとって解説します。

Cocoonトップページ（フロントページ）のカスタマイズ方法【超簡単レイアウト変更】
固定ページをトップページに設定する方法
1. 新着記事（最新の記事）一覧を固定ページに作る方法
Cocoon トップページのカスタマイズ方法【超簡単レイアウト変更】まとめ

Cocoonトップページ（フロントページ）のカスタマイズ方法【超簡単レイアウト変更】

Cocoonのトップページのカスタマイズの方法を超簡単に解説します。

トップページのレイアウトはCocoonの「固定ページ」で作れます。

トップページ以外のカスタマイズについては
Cocoonのカスタマイズ【すっきりデザイン編集の備忘録】
の記事で詳しく解説していますので参考にしてください。

らぴす

ちょっと面倒ですが、根気よくやりましょう。
時間短縮したい方は有料テーマを使うことをおすすめします。

WordPressテーマ「ACTION（AFFINGER6）」なら、かなり時間短縮になります。

トップページの構成は下記のようにしています。

メイン記事
おすすめ記事
人気記事	カテゴリー1
カテゴリー2	カテゴリー3

フロントページのカスタマイズは固定ページで

固定ページを開いて、レイアウトをします。

一番上にメインの記事（読者の方に一番読んで欲しい記事）を配置して、
メイン記事の下に以下のようにレイアウトをしました。

次にトップページに使う記事一覧などの設定をしていきます。

Cocoonのショートコードを使って最新記事やおすすめ記事の一覧を表示する方法

上の画像のように最新記事やおすすめ記事をショートコードを使って表示する方法です。
画像は「大きいサムネイル」を指定して、2列表示になるようにしていました。

編集画面では下記のように見えます。

大きいサムネイルの記事一覧を2列に表示する方法

Cocoonの大きいサムネイルの記事の一覧はそのままだと縦に1列に並んでしまうので、２列表示にするためCSSを少しだけ追記しました。

CSSの追加先は
外観＞カスタマイズ＞追加CSSに記載します。

CSSのコードは下記をコピペするだけで大丈夫です。
これで記事が縦に表示されずに、幅が十分なる場合は右側に回り込んで2列に表示されるようになります。

/*新着記事大きいエントリーカードを二列にして見え方を調節*/
.page .new-entry-cards.card-large-image {
display: flex;
flex-wrap: wrap;
}

/*おすすめ記事（navi entry card）の大きいエントリーカードを二列にして見え方を調節*/
.navi-entry-cards{
display: flex;
flex-wrap: wrap;
}

すると、下のようになります。

上の画像のように大きいサムネイルの下にすぐ文字が来て嫌だったので下記のコードを追記しました。

大きいエントリーカードの下にスペースを少し入れて、見栄えをよくしてみました。

/*大きいエントリーカードの下にスペースを入れて見栄え良く*/
.card-content {
padding-top: 10px;
line-height: 1.6;
}

これで大きなサムネイルの見栄えがすっきりとしました。

Cocoonの最新記事一覧のショートコード

らぴす

最新記事を一覧で表示したくて、ショートコードを使いました。
使い方は簡単です。

上の画像のように最新記事を一覧で表示するためのショートコードです。

[new_list count="4" type="large_thumb" bold="0" snippet="1" modified="1" cats="all" children="0" post_type="post"]

ショートコードの中身は以下のようになっています。

new_list
新着記事をの一覧を表示する

count=”4″
記事を4つ表示する

type=”large_thumb”
大きいサムネイル（画像）を表示。小さいサムネイルにする場合は”default”です。

bold=”0″
タイトルを太文字にしない。1にすると太文字になります。

snippet=”1″
スニペット（説明文）を表示する。0にすると説明文は表示せず、タイトルだけになります。

modified=”1″
更新した新しい順に表示する。これを指定しなければ投稿日順になります。

cats=”all”
カテゴリーは全部のカテゴリー。指定する場合はカテゴリー番号を入れます

children=”0″
小カテゴリーは表示しない

post_type=”post”
投稿のみを表示（固定ページは表示しない）

ここまででトップページの簡単なデザイン変更は完了です。
意外とめんどくさいですよね。
もっと簡単にやりたい方は有料テーマがおすすめです。

無料テーマのカスタマイズに疲れる前に
WordPressテーマ「ACTION（AFFINGER6）」
やりたいことが実現できます。

AFFINGER6の公式サイトを確認する

固定ページをトップページに設定する方法

作成した固定ページをトップページに設定します。

設定＞表示設定を開きます。

ホームページの表示を「固定ページ」にして、どの固定ページをホームページにするかを選びます。

左下の変更を保存ボタンをクリックすると、トップページが固定ページに切り替わります。

固定ページの一覧を見ると、トップページに設定されている固定ページの記事にフロントページと記載されます。

固定ページをトップページにすると、最新記事一覧がなくなってしまうので、最新記事一覧のページも固定ページで作りましょう。