このブログはCocoonというWordpressテーマを使って作成しています。
この記事ではCocoonのトップページのカスタマイズ方法（レイアウト変更）方法を備忘録として記録しています。
記事が増えてくるとトップページも工夫しないと記事が埋もれてしまったりしますので、少し見栄えをウェブサイトっぽくしてみました。
Cocoonトップページのカスタマイズ方法【超簡単レイアウト変更】
Cocoonのトップページのカスタマイズの方法を超簡単に解説します。
トップページのレイアウトはCocoonの「固定ページ」で作っています。
トップページの構成を決める
このサイトのトップページの構成は下記のようにしています。
| 最新記事 | |
| おすすめ記事 | |
| 人気記事 | カテゴリー1 |
| カテゴリー2 | カテゴリー3 |
最新記事とおすすめ記事
最新記事もおすすめ記事もショートコードを使って表示しています。
画像は「大きいサムネイル」を指定して、2列表示になるようにしています。
編集画面では下記のように見えます。
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”
投稿のみを表示（固定ページは表示しない）
おすすめ記事のショートコード
[navi_list name="おすすめ記事" type="large_thumb" bold="0" arrow="0"]
としています。
こちらも上記で出てきていないショートコードの解説を簡単にしておきます。
navi_list name=”おすすめ記事”
おすすめ記事というナビリストを表示
メニューで記事を選んで表示するショートコード です。（作り方は後述）
arrow=”0″
[>]のマークを表示しない
大きいサムネイル の記事一覧を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レイアウトの2カラムを使用して表示しています。
2カラムを選ぶと下記のようになりますので、それぞれにショートコードを入れています。
人気記事のショートコード
[popular_list days="all" rank="1" count="6" cats="all" type="default"]
days=”all”
全ての日付からランキングを計算する。数字を入れると直近の日数から計算。
rank=”1″
ランキングの順位を表示する（サムネイル の左肩に番号を自動で付けてくれます）
カテゴリーのショートコード
[new_list count="5" type="default" cats="13" children="0" post_type="post"]
cats=”13″
カテゴリーナンバー13のみを表示
カテゴリーの番号は下記で確認できます。
左のカテゴリーから右側のカテゴリー名にマウスを当てると下にURLが表示されます。
その真ん中あたりのtag_ID=31（赤丸のところ）と書いてあるところの数字部分がカテゴリーの番号です。
ブログ上でショートコード を紹介したい場合
ショートコード の表示は整形済みテキストに下記のように
大かっこを二重にして書くと、上のように表示できます。
ボタンの設置
ボタンはCocoonブロックの「ボタン」を使用しています。URLを入れて色などを整えればOKです。
新着記事（最新の記事）一覧
固定ページをトップページにすることで、新着記事の一覧を表示するページがなくなってしまうので、これも固定ページで作成します。
固定ページの新規作成で
最新記事（名前は新着記事とか、なんでも大丈夫です。）というタイトルのページを作ります。
中身は空っぽで大丈夫です。（中身は自動生成します。）
次に設定＞表示設定でトップページ（ホームページ）を今回作成した固定ページに差し替えます。
固定ページを選んで、ホームページを今回作成した固定ページを選びます。
投稿ページに新着記事をセットして、下の変更を保存ボタンを押すと完了です。
これでトップページが切り替わり、下記のような新着記事のページが生成されます。
Cocoon トップページのカスタマイズ方法【超簡単レイアウト変更】まとめ
トップページのカスタマイズは記事が増えてくるとどうしても必要になりますね。
読んでもらいたい記事がすぐわかることや、訪問した方が読みたい記事にたどり着きやすいというのは必須事項です。
この記事では超簡単なCocoonのトップページのカスタマイズ方法をご紹介しました。
手順は以下の通りです。
・トップページの構成（レイアウト）を決める
・最新記事とおすすめ記事を表示
・人気記事とカテゴリを2列で表示
・ボタンの設置
・新着記事一覧ページの作成
これで、ただ新着記事が並んだだけのつまらないトップページから、意図のあるトップページに変更することができました。
このほか、すっきりしたデザインにして見栄えをよくするために細かい調整もしています。
Cocoonのカスタマイズの備忘録はこちらの記事でご紹介します。
