- 完成サンプルページを追加
- 総まとめコードを先頭に、その後解説しています
- カテゴリーごとの記事のレイアウトを変更
- 手順を簡略化、コピペ+リンク等の設定で完成できるようにしました
- Cocoon2.5.6/新着記事ブロック追加について追記
こんにちは。
最近ブログサイトでよく見かける、新着記事やカテゴリー記事に分けて表示されたすっきりとしたトップページにしてみたいと思いませんか?
この形は今までのブログ型に対して「サイト型」と呼ばれています。
今回は最近人気の綺麗な有料テーマ【SWELL】をイメージしたサイト型トップページの作り方を解説していきたいと思います。
なお、今回のトップページは固定ページ+HTML+CSSを使って柔軟なカスタマイズができるもの(難易度は初級~中級ほど)です。そのままコピペできるコードを準備しましたので、コードを見て何を意味するのか、どこを変更したらよいのかだいだい分かる程度の理解があると良いです。
これとは別にCocoonの標準機能でも簡単にカテゴリーごとのタブ切り替えやサイト型にすることができるようになっています。サイト型を検討される方はこちらも参考にしてみてください。

コードを使うのは抵抗が…手軽にトップページを変えたいという人はCocoon設定でできるこちらがより簡単。
それではご覧ください。
ブログ型とサイト型の違いについて
ブログ型

- トップページに上から記事が投稿順に並んでいる
- カテゴリーが分かりにくい
- 目的の記事が探しにくい
- 古い記事が埋もれがち
- ブログのデフォルトはこのタイプ
- 検索流入がほとんどの場合はこちらでもよいかも
サイト型

- セクションごとに記事がまとまっている
- カテゴリーが一目で分かる
- 目的の記事を見つけやすい
- 動線がよくなりアクセスアップが期待できる

ただずらーっと記事が並んでいるよりは、サイト型にするとメリットがたくさんあるね!

今回はサイト型へ変更してみるよ。CocoonカスタマイズはHTMLとCSSを駆使するので手間がかかるけど、ひとつずつ説明するのでやってみよう!
サイト型トップページの完成イメージ
- 新着記事
- カテゴリーごとの記事
- 人気記事(今日読まれている記事)


あくまで当サイトのレイアウト例なのでアレンジは各自お好みでされてください。また仕上がりは若干異なる部分があります。
サイト型トップページの作成手順
- Step1固定ページを作成するHTMLを編集してトップページを作成します。
(コピペ+リンク先など設定)- 新着記事
- カテゴリーごとの記事
- 人気記事
- Step2CSSをコピペする
スタイル(見た目)を整える部分です。
アイキャッチ画像など必要ない項目をCSSで非表示にします - Step3トップページに適用する
作成したページをトップページに反映させます
- 完成!
固定ページを作成する方法
管理画面→固定ページ→新規追加 を選択します。
タイトルは”トップページ”など自分で分かるようになんでもOK。(このタイトルは最後にCSSで非表示にします)
コードの編集方法についてはこちらにまとめましたのでご覧ください。
トップページを作成するにあたっての注意
- 当サイトのスキンは「なし」です。スキンを適用させているとデザインが重なってしまうことがあるのでご注意ください。(別途CSSで調整が必要)
- 横幅を生かすためにトップページだけサイドバーを非表示にすることをおすすめします。
- Cocoon設定→全体→サイドバーの表示状態:フロントページで非表示にチェックする
- 固定ページメニュー:ページタイプ→1カラム(広い)を選択

- 従来のクラシックエディタは使用できません(タブ切り替えの際に自動的に<p>タグが入ることによりレイアウトが崩れてしまいます)、Gutenberg(ブロックエディタ)のカスタムHTMLをご利用ください
- コードを編集する際にはバックアップをとりましょう。(成功したところまでのコードをこまめにコピーしておくなど、失敗してもやり直せるようにしておきます)
- コピペするコードは最初に記載します。(※特にCSSは重複しないように短くしているので、このまとめたコードだけをコピペすればOK)
最後に解説していきますのでよろしければお付き合いください。

準備はOKでしょうか?それでは本編始めまーす。
【追記】新着・人気記事表示にブロックが利用できるようになりました
2023.3.3 追記
Cocoonのアップデート(Cocoon2.5.6)でブロックに新着記事が追加されました。(現在は人気記事も対応しています)
当ページのカスタマイズでは新着記事を表示するために従来のショートコードを使っていますが、このアップデートにより手軽にブロックから新着記事を呼び出す方法も選択できるようになりました。

これで完成!サイト型トップページのHTMLとCSS総まとめ
では、まず最初にすべての総まとめコードがこちら。
すべて入れてプレビューで確認すると見出しやタブ切り替えなどの骨組みがすべて出来上がりますので、あとは必要なところを入力するだけになっています。

すごいっ、これでほぼ完成!!
HTMLコード
<div class="toppage new">
<div class="title newpost">New post</div>
[new_list type="large_thumb" count="2" snippet="1"]
<a class="link-btn" href="(https://から始まるサイトURL)/?cat=0">New list</a>
</div>
- 最後のリンクボタン:リンク先のURL(サイトURLに /?cat=0 をつけるとすべての記事一覧ページになります)
<div class="toppage cate">
<div class="title category">Category</div>
<div class="tab-wrap">
<input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked"><label class="tab-label" for="TAB-01">(※カテゴリー名①)</label>
<div class="tab-content">
[new_list type="large_thumb" count="6" cats="(※ここにカテゴリーID)"]
<a class="link-btn" href="(※https://~から始まるリンク先URL)">Read More</a>
</div>
<input id="TAB-02" type="radio" name="TAB" class="tab-switch"><label class="tab-label" for="TAB-02">(※カテゴリー名②)</label>
<div class="tab-content">
[new_list type="large_thumb" count="6" cats="(※ここにカテゴリーID)"]
<a class="link-btn" href="(※https://~から始まるリンク先URL)">Read More</a>
</div>
<input id="TAB-03" type="radio" name="TAB" class="tab-switch"><label class="tab-label" for="TAB-03">(※カテゴリー名③)</label>
<div class="tab-content">
[new_list type="large_thumb" count="6" cats="(※ここにカテゴリーID)"]
<a class="link-btn" href="(※https://~から始まるリンク先URL)">Read More</a>
</div>
</div>
</div>
- カテゴリー名 ①②③
- カテゴリーID
- カテゴリーリンク先
(各カテゴリーページのURLです)
※コピペするときにURLを囲む” “(半角ダブルクォーテーション)や<>(タグ)を誤って消したり、また重複しないように注意します。
※ワードプレスの仕様で自動的に<p>タグが入る事例もありますが、改行されてタブがうまく表示されないためもし途中に<p>が入ってしまった場合は削除してくだい。
<div class="toppage pop">
<div class="title popular">Popular</div>
[popular_list days="1" count="6" type="large_thumb" cats="all"]
</div>
※変更するところはありません
CSSコード
CSSは短縮してありますのでこちらをコピペすればOK!
/*トップページカスマイズ***************************************/
.toppage{
padding:3em 1em;/*内側余白調整*/
}
/*見出し*/
div.title{
margin:2rem 0;/*外側余白*/
padding:0;/*内側余白*/
text-align:center;/*中央寄せ*/
font-size:2.5rem;/*文字の大きさ*/
letter-spacing:1px;/*文字間の余白*/
line-height:1.8;/*行の高さ*/
}
div.title:after{
display:block;
font-size:.8rem;
}
div.newpost:after{
content:'新着記事';
}
div.category:after{
content:'カテゴリー別の記事';
}
div.popular:after{
content:'今日、読まれている記事';
}
/***リンクボタン***/
.link-btn{
display:block;/*ブロック要素にする*/
margin:1em auto;/*外側余白*/
padding: 5px;/*内側余白*/
text-align: center;/*中央寄せ*/
text-decoration: none;/*文字装飾なし*/
border:1px solid #ccc; /*枠線(太さ、種類、色)*/
font-size:.9em;/*文字の大きさ*/
color:#666;/*文字色*/
width: 80%;/*ボタンの幅*/
}
/* ウィジェット記事全体*/
.widget-entry-cards.card-large-image .a-wrap {
max-width: 100%;/*カード幅調整*/
}
/***記事横並べ(flex)***/
.widget-entry-cards.large-thumb{
display: flex; /* フレックスにする */
flex-wrap: wrap;
}
/*新着、人気記事サムネイル(大)*/
.new-entry-cards.large-thumb a{
width:calc(100% / 2);/*pcで横2列に並べる*/
}
.cate .new-entry-cards.large-thumb a,
.popular-entry-cards.large-thumb a{
width:calc(100% / 3);/*pcで横3列に並べる*/
}
/*834px以下*/
@media screen and (max-width: 834px){
.new-entry-cards.large-thumb a{
width:100%;/*スマホで横1列に*/
}
.cate .new-entry-cards.large-thumb a,
.popular-entry-cards.large-thumb a{
width:calc(100% / 2);/*スマホで横2列*/
}
}
/**************************
タブ切り替え
***************************/
/* 親要素で囲みタブの横並びのためflexを指定*/
.tab-wrap {
display: flex;
flex-wrap: wrap;
margin:5px 0;
}
/*タブ(label)のスタイル*/
.tab-label {
border:1px solid #ccc;
text-align: center;
padding: .5em 1em;
order: -1;
position: relative;
z-index: 1;
cursor: pointer;
flex: 1;
}
/*タブの間に余白をあける*/
.tab-label:not(:last-of-type) {
margin-right: 5px;
}
/* タブのコンテンツ部分*/
.tab-content {
display: none;
width: 100%;
height: 0;
overflow: hidden;
opacity: 0;
}
/* アクティブなタブ、選択されていることが分かるようにチェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
color:#fff;/*文字色*/
background-color:#b5b5ae;/*タブの背景色*/
border:1px solid #b5b5ae;/*タブの枠線 太さ 種類 色*/
}
/*吹き出し部分のスタイル*/
.tab-switch:checked+.tab-label:after{
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 10px solid transparent;
border-top:10px solid #b5b5ae;/*タブの吹き出し部分*/
width: 0;
height: 0;
}
.tab-switch:checked+.tab-label+.tab-content {
height: auto;
overflow: auto;
padding: 15px 0 0 0;
opacity: 1;
transition: .5s opacity;
}
/* radioボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
display: none;
}
※ここから先、解説部分のHTML/CSSはまったく同じ内容になるのでコピペしないでください。
それではひとつのセクションごとに解説していきます。
新着記事
まずは冒頭の新着記事の部分。

- 見出し (New post)
- 最新記事 (2記事)
- リンクボタン
見出し

<div>タグにtitleというクラス名を付け、下段のサブ見出しはCSSの疑似要素を使って表示させています。
<div class="title newpost">New post</div>
/*見出し*/
div.title{
text-align:center;/*中央寄せ*/
font-size:2rem;/*文字の大きさ*/
letter-spacing:.1rem;/*文字間の余白*/
line-height:1.8;/*行の高さ*/
margin:1rem;/*外側余白*/
padding:0;/*内側余白*/
}
div.title:after{
display:block;/*ブロック要素にする*/
font-size:.8rem;/*サブ見出しの文字の大きさ*/
}
div.newpost:after{
content:'新着記事';/*表示させる文字*/
}
※見出しに表示方法についてはすべて同じなので以下の解説を省略します。
新着記事を表示する
ショートコードを使って新着記事を表示
新着記事についてはCocoon機能のショートコードを使ってこのように表記します。
[new_list]
この基本コードにオプションを追加することでカスタマイズすることができます。
[new_list type="large_thumb" count="2" snippet="1" bold="1"]
- new_list:新着記事を表示する
- type=”large_thumb”:大きなサムネイルカードで表示する
- count=”2″:表示する記事数は2記事
- snippet=”1″:スニペット(抜粋)を表示する
- bold=”1″:記事タイトルを太字にする
Cocoonショートコードについて使い方や詳しいオプションについてはこちらをご覧ください。
新着記事を横並びにする
ショートコードで表示された記事はそのままでは縦1列になるので、記事の並べ方をCSSで調整します。


要素を横並びにするときはCSSのflexbox(フレックスボックス)が便利。
CSSで親要素にdisplay: flex;と表記するだけで子要素をフレックスレイアウト(横並び)にすることができます。
/* 新着記事サムネイル(大)を横並びにする---------------------------------------------- */
.widget-entry-cards.card-large-image .a-wrap {
max-width: 100%;/*カード幅調整*/
}
.new-entry-cards.large-thumb{
display: flex; /* フレックスボックスにする */
flex-wrap: wrap;/*折り返しあり*/
}
/*新着記事サムネイル(大)*/
.new-entry-cards.large-thumb a{
width:calc(100% / 2);/*pcで横2列に並べる*/
}
/*480px以下*/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a{
width:100%;/*スマホで横1列に*/
}
}
リンクボタン
HTMLでリンクするときに使う<a>タグにlink-btnというクラス名をつけて、CSSでボタンのように装飾します。

記事一覧ページのリンク先:(サイトURL)/?cat=0
<a class="link-btn" href="(https://サイトURL)/?cat=0">New List</a>
/***リンクボタン***/
.link-btn{
display:block;/*ブロック要素にする*/
margin:1em auto;/*外側余白*/
padding: 5px;/*内側余白*/
text-align: center;/*中央寄せ*/
text-decoration: none;/*文字装飾なし*/
border:1px solid #ccc; /*枠線(太さ、種類、色)*/
font-size:.9em;/*文字の大きさ*/
color:#666;/*文字色*/
width: 80%;/*ボタンの幅*/
}
ここではシンプルな枠だけにしているので、このボタンの背景色を変えてキラリと光るデザインにすることもできます。
※リンクボタンの作り方もすべて同じなので以下の解説は省略します。
カテゴリーごとの記事
続いてこの部分、カテゴリーごとの記事。

- 見出し (Category)
- 3つのカテゴリーをタブ切り替えにする
(ひとつのカテゴリーに6記事表示) - リンクボタン
タブ切り替えにする

Cocoonにタブ切り替えする機能はついていなく自作設置になりますが、コピペして必要なところを入力すればいいようにコードを準備しました。
<input id="TAB-01" type="radio" name="TAB" class="tab-switch">
<label class="tab-label" for="TAB-01">(※カテゴリー名①)</label>
タブ切り替えの詳細はこちらの記事にまとめましたのでご確認ください。(カテゴリー数に合わせてタブを増減する方法も記載しています)
タブ切り替え(3タブ)、記事、リンクボタンを入れたカテゴリー部分のHTMLがこちらです。
<div class="toppage cate">
<div class="title category">Category</div>
<div class="tab-wrap">
<input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked"><label class="tab-label" for="TAB-01">(※カテゴリー名①)</label>
<div class="tab-content">
[new_list type="large_thumb" count="6" cats="(※ここにカテゴリーID)"]
<a class="link-btn" href="(※https://~から始まるリンク先URL)">Read More</a>
</div>
<input id="TAB-02" type="radio" name="TAB" class="tab-switch"><label class="tab-label" for="TAB-02">(※カテゴリー名②)</label>
<div class="tab-content">
[new_list type="large_thumb" count="6" cats="(※ここにカテゴリーID)"]
<a class="link-btn" href="(※https://~から始まるリンク先URL)">Read More</a>
</div>
<input id="TAB-03" type="radio" name="TAB" class="tab-switch"><label class="tab-label" for="TAB-03">(※カテゴリー名③)</label>
<div class="tab-content">
[new_list type="large_thumb" count="6" cats="(※ここにカテゴリーID)"]
<a class="link-btn" href="(※https://~から始まるリンク先URL)">Read More</a>
</div>
</div>
</div>
</div>
タブの色や形など見た目を整えるCSSはこちら。
/**************************
タブ切り替え
***************************/
/* 親要素で囲みタブの横並びのためflexを指定*/
.tab-wrap {
display: flex;
flex-wrap: wrap;
margin:5px 0;
}
/*タブ(label)のスタイル*/
.tab-label {
border:1px solid #ccc;
text-align: center;
padding: .5em 1em;
order: -1;
position: relative;
z-index: 1;
cursor: pointer;
flex: 1;
}
/*タブの間に余白をあける*/
.tab-label:not(:last-of-type) {
margin-right: 5px;
}
/* タブのコンテンツ部分*/
.tab-content {
display: none;
width: 100%;
height: 0;
overflow: hidden;
opacity: 0;
}
/* アクティブなタブ、選択されていることが分かるようにチェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
color:#fff;/*文字色*/
background-color:#b5b5ae;/*タブの背景色*/
border:1px solid #b5b5ae;/*タブの枠線 太さ 種類 色*/
}
/*吹き出し部分のスタイル*/
.tab-switch:checked+.tab-label:after{
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 10px solid transparent;
border-top:10px solid #b5b5ae;/*タブの吹き出し部分*/
width: 0;
height: 0;
}
.tab-switch:checked+.tab-label+.tab-content {
height: auto;
overflow: auto;
padding: 15px 0 0 0;
opacity: 1;
transition: .5s opacity;
}
/* radioボタンは仕組みだけ利用するため非表示に*/
.tab-switch{
display: none;
}
- カテゴリー名
- カテゴリーID
- カテゴリーリンク先

各タブごとにそれぞれ設定が必要。(※)で囲んである日本語のところを探すと見つけやすいよ!
最初の総まとめの方にも書きましたが、ワードプレスの仕様でHTMLの<p>タグ(段落を意味し改行される)が自動的に入ってしまう事例があります。うまく表示されない場合は意図しないタグがないかを確認し、もし入っていた場合は<p></p>を削除してくだい。
新着記事を表示する(カテゴリーごと)
タブの中(tab-contentというクラス名をつけた部分)にはショートコードでカテゴリー別新着記事を表示します。
カテゴリーを限定するためにcats=” “のオプションにカテゴリーIDを入れる必要があります。
[new_list type="large_thumb" count="6" cats="(※ここにカテゴリーID)"]
カテゴリーIDを調べるには
「投稿」→「カテゴリー」→カテゴリー一覧から該当するIDを確認できるので該当の番号を入れましょう。

カテゴリー記事を横に並べる
先ほどの新着記事と同じ要領で横並び3列(スマホでは2列)にするように調整します。


/*カテゴリーごとの記事内の新着記事を横並びにする*/
.cate .new-entry-cards.large-thumb a{
width: calc(100%/ 3);
}
/*834px以下*/
@media screen and (max-width: 834px){
.cate .new-entry-cards.large-thumb a{
width:calc(100% / 2);
}
}

あとひとつだよ、ガンバ!!
人気記事
最後はこの部分、人気記事です。

- 見出し (Popular)
- 人気記事 (6記事)
- リンクボタン
人気記事を表示させる
人気記事についてはCocoonのショートコードを使ってこのように表記します。
[popular_list]
この基本コードにオプションを追加してカスタマイズすることができます。
[popular_list days="1" count="6" type="large_thumb" cats="all"]
- popular_list:人気記事を表示する
- days=”1″ :対象期間の日数
- count=”6″ :表示する記事の数
- type=”large_thumb” :カードタイプを大きなサムネイルにする
- cats=”all”:すべてのカテゴリーを対象とする
人気記事の対象期間については、何も指定しないと全期間通してのPV数順に並びます。
全期間だとほとんど変動することがないので、当サイトでは対象を1日と短く設定して過去24時間にアクセスがあった記事が表示されるようにしています。(なので厳密に言うと0~24時区切りでの今日ではありませんが)
この期間についてはお好みで変更してください。
人気記事を表示するショートコードの使い方やオプションについての詳細はこちらをご覧ください。
人気記事を横並びにする
記事の並べ方をCSSで調整します。
新着記事の並べ方と同様にFlexbox(フレックスボックス)を使って横並べにし、パソコンとスマホで表示を切り替えます。


/*人気記事サムネイル(大)を横並び*/
.popular-entry-cards.large-thumb a{
width:calc(100% / 3);/*pcで横3列に並べる*/
}
/*834px以下*/
@media screen and (max-width: 834px){
.popular-entry-cards.large-thumb a{
width:calc(100% / 2);/*スマホで横2列*/
}
}
トップページに必要ないものを非表示にする
ここまで完了したら、固定ページで記事を作成したときに表示されるがトップページにするときに必要ないものをCSSで非表示にします。
/* トップページ非表示*/
.home .article-header,
.home .article-footer{
display: none;
}
- アイキャッチ画像
- 記事タイトル
- SNSシェアボタン、フォローボタン
- ヘッダー投稿日、更新日
- 投稿者名
うまくいかないときは
ここまで設定を終えたらプレビューで確認しましょう。
表示が崩れたりする場合は何か原因がありますので確認してみてください。
見つけにくい全角スペースが思わぬところに入っていたり、スペース、””、{}、<>などの記号に一文字でも入力ミスがあるとそれ以下は反映されなくなってしまうので注意。
どうしても原因が分からないときは成功したところまでのバックアップ、また最初からやり直すとうまくいくかと思います。
固定ページを「公開」
表示崩れがないことを確認したら固定ページ作成画面、右上の「公開」をクリックします。

公開といってもまだトップページに適用していないので下書きを保存する意味合いです。
仕上げ/トップページに適用する
これが最後の工程です!
管理画面→設定→表示設定
- ホームページの表示:固定ページにチェック
- ホームページ:トップページ(自分でつけたタイトル名)
変更を保存 をクリックする。


完成~!お疲れさまでした♪
あとがき
いかがでしたでしょうか。
記述間違いがなければスムーズに完成されたと思います。
コピペで簡単に使えるようにすべてのコードを公開しましたが…
見出しを2行にする、横並びにする、タブ切り替えを導入する、レイアウト、余白を調整する……諸々。
何日も睡眠時間を削り
ひとつひとつ調べながら試行錯誤してきた、
血と涙の結晶です (T_T)

Cocoonのサイト型を考えている方の手助けになれば幸いです。個人でのアレンジなどは自由ですが大切に使ってくださいね。
Comment