Cocoonで作るサイト型トップページ／オシャレなSWELL風（固定ページ使用）

2023.2.28 一部変更しました

完成サンプルページを追加
総まとめコードを先頭に、その後解説しています
カテゴリーごとの記事のレイアウトを変更
手順を簡略化、コピペ＋リンク等の設定で完成できるようにしました
Cocoon2.5.6／新着記事ブロック追加について追記

こんにちは。

最近ブログサイトでよく見かける、新着記事やカテゴリー記事に分けて表示されたすっきりとしたトップページにしてみたいと思いませんか？

この形は今までのブログ型に対して「サイト型」と呼ばれています。

今回は最近人気の綺麗な有料テーマ【SWELL】をイメージしたサイト型トップページの作り方を解説していきたいと思います。

こんな人のお役に立てます

テーマ【Cocoon】を使っている
サイト型トップページに切り替えたい
HTML／CSSの理解が多少ある

なお、今回のトップページは固定ページ＋HTML＋CSSを使って柔軟なカスタマイズができるもの（難易度は初級～中級ほど）です。そのままコピペできるコードを準備しましたので、コードを見て何を意味するのか、どこを変更したらよいのかだいだい分かる程度の理解があると良いです。

これとは別にCocoonの標準機能でも簡単にカテゴリーごとのタブ切り替えやサイト型にすることができるようになっています。サイト型を検討される方はこちらも参考にしてみてください。

コードを使うのは抵抗が…手軽にトップページを変えたいという人はCocoon設定でできるこちらがより簡単。

Cocoon 2.1.6公開。フロントページに「タブ切替」や「カテゴリーごと表示」機能追加

＼こちらもおすすめ、アピールエリア編／

Cocoonアピールエリアのカスタマイズ／SWELL風オシャレなトップページ（ファーストビジュアル）を作ってみる

お知らせ2022.8.29ページ内リンクする方法について追記しました。ここ数年で人気が出てユーザーが増えているワードプレス有料テーマの「SWELL」。綺麗なサイトデザインやトップページのカスタマイズ性、豊富なブロック機能...

それではご覧ください。

目次から見たいところへジャンプできます

ブログ型とサイト型の違いについて
1. ブログ型
2. サイト型
サイト型トップページの完成イメージ
サイト型トップページの作成手順
固定ページを作成する方法
トップページを作成するにあたっての注意
【追記】新着・人気記事表示にブロックが利用できるようになりました
これで完成！サイト型トップページのHTMLとCSS総まとめ
1. HTMLコード
2. CSSコード
新着記事
カテゴリーごとの記事
人気記事
1. 人気記事を表示させる
2. 人気記事を横並びにする
トップページに必要ないものを非表示にする
うまくいかないときは
固定ページを「公開」
仕上げ／トップページに適用する
あとがき

ブログ型とサイト型の違いについて

ブログ型

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

サイト型

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

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

今回はサイト型へ変更してみるよ。CocoonカスタマイズはHTMLとCSSを駆使するので手間がかかるけど、ひとつずつ説明するのでやってみよう！

サイト型トップページの完成イメージ

この３部構成で作成しています

新着記事
カテゴリーごとの記事
人気記事（今日読まれている記事）

＼スクロールできます／

サンプルページを見る

あくまで当サイトのレイアウト例なのでアレンジは各自お好みでされてください。また仕上がりは若干異なる部分があります。

サイト型トップページの作成手順

Step1
固定ページを作成する
HTMLを編集してトップページを作成します。
（コピペ+リンク先など設定）
1. 新着記事
2. カテゴリーごとの記事
3. 人気記事
Step2
CSSをコピペする
スタイル（見た目）を整える部分です。
アイキャッチ画像など必要ない項目をCSSで非表示にします
Step3
トップページに適用する
作成したページをトップページに反映させます
完成！

固定ページを作成する方法

管理画面→固定ページ→新規追加　を選択します。

タイトルは”トップページ”など自分で分かるようになんでもOK。（このタイトルは最後にCSSで非表示にします）

コードの編集方法についてはこちらにまとめましたのでご覧ください。

Cocoon（コクーン）でカスタマイズ／HTML・CSSの編集方法

HTMLやCSSの編集方法は共通なので、それぞれの記事に毎回書かずにこちらのページにまとめておきます。特にカスタマイズが初めての方、慣れていない方はご確認ください。こんな方にオススメワードプレステーマCoc...

トップページを作成するにあたっての注意

当サイトのスキンは「なし」です。スキンを適用させているとデザインが重なってしまうことがあるのでご注意ください。（別途CSSで調整が必要）

横幅を生かすためにトップページだけサイドバーを非表示にすることをおすすめします。

サイドバーの非表示設定

（①②どちらかを設定します)

Cocoon設定→全体→サイドバーの表示状態：フロントページで非表示にチェックする
固定ページメニュー：ページタイプ→１カラム（広い）を選択

従来のクラシックエディタは使用できません（タブ切り替えの際に自動的にタグが入ることによりレイアウトが崩れてしまいます）、Gutenberg（ブロックエディタ）のカスタムHTMLをご利用ください
コードを編集する際にはバックアップをとりましょう。（成功したところまでのコードをこまめにコピーしておくなど、失敗してもやり直せるようにしておきます）

コピペするコードは最初に記載します。(※特にCSSは重複しないように短くしているので、このまとめたコードだけをコピペすればOK)

最後に解説していきますのでよろしければお付き合いください。

準備はOKでしょうか？それでは本編始めまーす。

【追記】新着・人気記事表示にブロックが利用できるようになりました

2023.3.3　追記

Cocoonのアップデート（Cocoon2.5.6）でブロックに新着記事が追加されました。（現在は人気記事も対応しています）

当ページのカスタマイズでは新着記事を表示するために従来のショートコードを使っていますが、このアップデートにより手軽にブロックから新着記事を呼び出す方法も選択できるようになりました。

＼koikenoteさんで使い方を書かれています／

これで完成！サイト型トップページの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を囲む” “（半角ダブルクォーテーション）や<>（タグ）を誤って消したり、また重複しないように注意します。
※ワードプレスの仕様で自動的にタグが入る事例もありますが、改行されてタブがうまく表示されないためもし途中にが入ってしまった場合は削除してくだい。

＼人気記事部分／

<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！

CSSを見る

/*トップページカスマイズ***************************************/
.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%;/*スマホで横１列に*/
	}
       .cate .new-entry-cards.large-thumb a,
       .popular-entry-cards.large-thumb a{
	       width:calc(100% / 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はまったく同じ内容になるのでコピペしないでください。

それではひとつのセクションごとに解説していきます。

STEP

/**************************
 タブ切り替え
***************************/

/* 親要素で囲みタブの横並びのため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;
}

HTMLを変更する箇所はここ

カテゴリー名
カテゴリーID
カテゴリーリンク先

各タブごとにそれぞれ設定が必要。（※）で囲んである日本語のところを探すと見つけやすいよ！

最初の総まとめの方にも書きましたが、ワードプレスの仕様でHTMLのタグ（段落を意味し改行される）が自動的に入ってしまう事例があります。うまく表示されない場合は意図しないタグがないかを確認し、もし入っていた場合はを削除してくだい。

カテゴリー記事を横に並べる

先ほどの新着記事と同じ要領で横並び３列（スマホでは２列）にするように調整します。

＼パソコンでは横３列に並べる／

＼スマホでは横２列×３行／

/*カテゴリーごとの記事内の新着記事を横並びにする*/
.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);
	}
}