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

最近ブログサイトでよく見かける、新着記事やカテゴリー記事に分けて表示されすっきりとしたトップページ。（フロントページとも呼ばれます）

この形はデフォルトのブログ型に対して「サイト型」と呼ばれますが、シンプルな無料テーマCocoonでもこんな風にしてみたいな～と気になっている方は多いのではないでしょうか？

私も見やすいサイト型にしたいなと思い、どうしたらイメージしたサイト型にできるかを試行錯誤しながら考えました。

この記事では私が憧れる綺麗な有料テーマ【SWELL】をイメージして考案した

【Cocoon】でのサイト型トップページの作り方

をご紹介します。

なお、今回のトップページは、固定ページ＋HTML＋CSSを使って柔軟なレイアウトができるものです。（難易度は初級～中級ほど）

新着記事などブロック操作でも表示できるのですが、この記事ではまるごとコピペできるようにあえてコード記述にしています。

難しい知識は不要ですが、コードを見てざっくりと何を意味するのか、どこを変更したらよいのか分かる程度の理解があると進めやすいです。

この記事のカスタマイズを実装するとこのようなトップページを作ることができますよ。

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

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

turicco.com

2022年06月29日

それではご覧ください。

この記事を書いた人

• ブログ好きな40代主婦
• CocoonサイトをCSSでフルカスタマイズ
• JavaScriptを勉強中
• ドメインパワー32
• ワードプレスで２サイトを運営しています

はっちゃん
です

はじめに／Cocoon設定（標準機能）でも簡易的なサイト型トップページが作成できる

まず最初にCocoon機能について。

コードをいじるのは苦手…手軽にトップページを変えられないかなー

今回のカスタマイズとは別に、Cocoonの標準機能でも簡単にカテゴリーごとのタブ切り替えやサイト型にできるようになっています。

ちなみに私の別サイト「釣りっこ」ではこのCocoon標準機能を使ってトップページを作成しています。

サイト型を検討される方はこちらも参考にしてみてください。

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

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

冒頭からブログ型・サイト型と書いていますが、それぞれの特徴を比較してみます。

ブログ型

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

サイト型

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

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

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

Cocoonで作るサイト型トップページの完成イメージ

1. 新着記事
2. カテゴリーごとの記事（タブ切り替え式）
3. 人気記事

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

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

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

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

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

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

Cocoonカスタマイズ／HTML・CSSの編集とワードプレスをバックアップする方法

ブロガーHTML？CSS？どこに書いたらいいの？戸惑う方も多いかと思いますので、このページではHTMLやCSSの編集方法とバックアップのとり方をまとめました。特にCocoonでのカスタマイズが初めての方、慣れていない方はご一読ください。この...

turicco.com

2023年01月18日

Cocoonでサイト型トップページを作成するにあたっての注意

• 当サイトのスキンは「なし」です。スキンを適用させているとデザインが重なってしまうことがあるのでご注意ください。（スキンを適用したままでもOKです）
• 横幅を生かすためにトップページだけサイドバーを非表示にすることをおすすめします。（お好みで表示しても問題ありません）

※Cocoon設定→全体→サイドバーの表示状態：フロントページで非表示にチェックする

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

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

それでは本編スタート

これで完成！Cocoonで作るサイト型トップページの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">Read More</a>
</div>

カテゴリー部分（タブ切り替え）

<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 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 0;/*内側余白（上下・左右）*/
}

/*見出し*/
div.title{
       margin:2rem 0;/*外側余白*/
	padding:0;/*内側余白*/
	text-align:center;/*中央寄せ*/
	font-size:2.5rem;/*文字の大きさ*/
	letter-spacing:4px;/*文字間の余白*/
	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: 0.7em 2.5em;/*内側余白*/
  text-align: center;/*中央寄せ*/
  text-decoration: none;/*文字装飾なし*/
  border:1px solid #ccc; /*枠線（太さ、種類、色）*/
  font-size:.9em;/*文字の大きさ*/
  color:#666;/*文字色*/
  width:250px;/*ボタンの幅*/
}

/***記事横並べ(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);/*スマホで横２列*/	
	}	
}

/*スマホで文字の大きさを調整する場合*/
/*834px以下*/
@media screen and (max-width: 834px){
	.widget-entry-card-title,
	.popular-entry-card-title{
		 font-size: 14px!important;/*調整してください*/
	}
}


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

/* 親要素で囲みタブの横並びのため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 {
  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: calc(50% + 5px);
	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: 20px 0 0 0;
  opacity: 1;
  transition: .5s opacity;
}

/* radioボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
  display: none;
}

※ここから先、解説部分のHTML／CSSはまったく同じ内容になるのでコピペしないでください。

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

Cocoonで作るトップページ／新着記事部分

まずは冒頭の新着記事の部分。

見出し

<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機能のショートコードを使ってこのように表記します。（カスタムHTML）

[new_list]

この基本コードにオプションを追加することでカスタマイズします。

[new_list type="large_thumb" count="2" snippet="1" bold="1"]

Cocoonショートコードについて使い方や詳しいオプションについては、こちらの公式ページをご覧ください。

新着記事を横並びにする

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

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

ショートコードで表示された記事はそのままでは縦１列になるので、記事の並べ方をCSSで調整します。

要素を横並びにする方法はいくつかあるのですが、CSSのflexbox（フレックスボックス）が便利。

CSSで親要素にdisplay: flex;と表記するだけで子要素をフレックスレイアウト（横並び）にでき、とても簡単かつ柔軟な並び替えができる方法です。

/* 新着記事サムネイル(大)を横並びにする---------------------------------------------- */
.new-entry-cards.large-thumb{
	display: flex; /* フレックスボックスにする */
	flex-wrap: wrap;/*折り返しあり*/
}

/*新着記事サムネイル(大)*/
.new-entry-cards.large-thumb a{
   width:calc(100% / 2);/*pcで横２列に並べる*/
}

/*480px以下*/
@media screen and (max-width: 480px){
	.new-entry-cards.large-thumb a{
		width:100%;/*スマホで横１列に*/
	}
}

リンクボタン

HTMLでリンクするときに使う<a>タグにlink-btnというクラス名をつけて、CSSでボタンのように装飾します。

<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%;/*ボタンの幅*/
}

（分かる方はCocoon独自のボタンのHTMLをコピーして使っても、どちらでもOK）

ここではシンプルな枠だけにしているので、このボタンの背景色を変えてキラリと光るデザインにもできます。

aタグ（アンカー要素）をボタン風にする方法（HTML・CSS）

この記事で分かることリンクできるボタンを設置する方法HTML/CSSのコードキラッと光らせる方法ボタンを反転させる方法アイコンをつける方法ここを解説今回はボタンをMTMLとCSSを使って、リンクボタンを自作する方法をご紹介します。Guten...

turicco.com

2021年01月25日

※リンクボタンの作り方もすべて同じなので以下の解説は省略します。

Cocoonで作るトップページ／カテゴリーごとの記事部分

続いてこの部分、カテゴリーごとの記事。

タブ切り替えにする

Cocoonにタブ切り替えする機能はついていなく自作設置になるのですが、コピペして必要なところを入力すればいいようにコードを準備しました。

<input id="TAB-01" type="radio" name="TAB" class="tab-switch">
<label class="tab-label" for="TAB-01">※カテゴリー名①</label>

タブ切り替えの詳細はこちらの記事にまとめましたのでご確認ください。（カテゴリー数に合わせてタブを増減する方法も記載しています）

タブ切り替えをHTMLとCSSで実装（JavaScriptなし／複数設置可）

ブロガーCocoonでも、有料テーマのようにタブ切り替えできないかな？そんな願いを叶えます。コードペンで作成したタブ切り替えがこちら。実際に動作やコードを確認できますSeethePenUntitledbyはっちゃん(@hacchan)onC...

turicco.com

2021年01月26日

タブ切り替え（３タブ）、記事、リンクボタンを入れたカテゴリー部分の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: calc(50% + 5px);
	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: 20px 0 0 0;
  opacity: 1;
  transition: .5s opacity;
}

/* radioボタンは仕組みだけ利用するため非表示に*/
.tab-switch{
  display: none;
}

HTMLを変更する箇所はここ

1. カテゴリー名
2. カテゴリーID
3. カテゴリーリンク先

各タブごとにそれぞれ設定が必要。※が先頭についている日本語のところを探そう！

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

カテゴリーごとの新着記事を表示する

タブの中（tab-contentというクラス名をつけた部分）にはショートコードでカテゴリー別新着記事を表示します。

[new_list type="large_thumb" count="6" cats="※ここにカテゴリーID"]

カテゴリーを限定するためにcats=” “のオプションにカテゴリーIDを入れる必要があります。

カテゴリーIDを調べるには

投稿→カテゴリー→カテゴリー一覧から該当するIDを確認できるので、該当の番号を入れましょう。

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

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

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

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

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

あとひとつだよ、ガンバ！！

Cocoonで作るトップページ／人気記事部分

最後はこの部分、人気記事です。

人気記事を表示させる

人気記事についてはCocoonのショートコードを使ってこのように表記します。

[popular_list]

この基本コードにオプションを追加してカスタマイズします。

[popular_list days="1" count="6" type="large_thumb" cats="all"]

人気記事の対象期間については、何も指定しないと全期間通してのPV数順に並びます。

全期間だとほとんど変動することがないので、当サイトでは対象を１日と短く設定して過去２４時間にアクセスがあった記事が表示されるようにしています。（なので厳密に言うと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;
}

レイアウトがうまくいかないときは

ここまで設定を終えたらプレビューで確認しましょう。

表示が崩れる場合は必ず原因がありますので確認してみてください。

見つけにくい全角スペースが思わぬところに入っていたり、スペース、””、｛｝、<>などの記号に一文字でも入力ミスがあるとそれ以下は反映されなくなってしまうので注意します。

どうしても原因が分からないときは成功したところまでのバックアップ、また面倒でも最初からやり直すとうまくいくかと思います。

固定ページを「公開」

表示崩れがないことを確認したら固定ページ作成画面、右上の公開をクリックします。

公開といってもまだトップページに適用していないので下書きを保存する意味合いです。

仕上げ／トップページに適用する

これが最後の工程です！

管理画面→設定→表示設定

1. ホームページの表示：固定ページにチェック
2. ホームページ：トップページ（自分でつけたタイトル名）

変更を保存 をクリックする。

完成～♪

あとがき

お疲れさまでした！！！

記述間違いがなければスムーズに完成されたと思います。

コピペで簡単に使えるようにすべてのコードを公開しましたが…

見出しを２行にする、横並びにする、タブ切り替えを導入する、レイアウト、余白を調整する……もろもろ。

何日も睡眠時間を削り

ひとつひとつ調べながら試行錯誤してきた、

血と涙の結晶です。

もしお役に立てましたら、ブログ等で紹介していただけるととても嬉しいです。

>Twitter(X)で公開しました

【実例集】当カスタマイズを実装されたサイトをご紹介！

最後に、テーマCocoonを使用して当記事のカスタマイズを実装（アレンジや一部を含む）されたサイト様をご紹介いたします。

ママくらし

URL：https://momomammy.com/
運営：momo さん　Tweet

リメイーナ

URL：https://meinadiary.com/
運営：meina さん Tweet

koikenote

／タブ切り替え部分を実装されています＼

URL：https://koikenote.com/
運営：こいけ さん　Tweet

Tani no Uchi – タニノウチ –

URL：https://taninouchi.com/
運営：谷ノ内 真帆子さん　Tweet

雨止み屋ブログ

／タブ切り替え部分をアレンジされています＼

URL：https://ameyamiya-ot.com/
運営：あめやみや さん　Tweet

FURYU BLOG

／アピールエリア部分を実装されています＼

URL：https://furyublog.com/
運営：FURYUさん　Tweet

SAKUNOBLOG

URL：https://sakunoblog.com/
運営：さく さん　Tweet

推しログ

URL：https://my-lifelog.com/
運営：まめさん　Tweet

気マぐレクローバーの日常

URL：https://kimagurenaneko.com/
運営：気マぐレクローバー さん　Tweet

こちらのサイトではタブ切り替え、スマホでの表示を２列に変更されています。
参考Tweet

ぜいたくゆるミニマリスト

／タブ切り替え部分を実装されています＼

URL：https://ponpoco-minimalist.com/
運営：ponpoco さん

ネット回線マニア

URL：https://net-kaisen-mania.com/
運営：くみたろう さん

／タブ切り替え部分を実装されています＼

皆様、アレンジされてそれぞれの個性が光ってる～

素敵サイトばかりなので参考になさってくださいね。