お買い物マラソン開催中!9/24 01:59まで楽天市場
カスタマイズ

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

アイキャッチ/サイト型トップページカスタマイズ
スポンサーリンク
一部変更しました

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

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

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

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

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

をご紹介します。

このような方におススメ
  • テーマ【Cocoon】を使っている
  • サイト型トップページに切り替えたい
  • カテゴリーごとの記事をタブ切り替えで表示したい
  • HTML/CSSの理解が多少ある

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

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

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

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

サイト型トップぺージ/フルスクリーン
\最初に目に入るアピールエリア編もあります/

それではご覧ください。

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでフルカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー32
  • ワードプレスで2サイトを運営しています
はっちゃん
です
プロフィール
  1. はじめに/Cocoon設定(標準機能)でも簡易的なサイト型トップページが作成できる
  2. ブログ型とサイト型の違いについて
    1. ブログ型
    2. サイト型
  3. Cocoonで作るサイト型トップページの完成イメージ
  4. Cocoonで作るサイト型トップページの作成手順
  5. Cocoonで固定ページを作成する方法
  6. Cocoonでサイト型トップページを作成するにあたっての注意
  7. これで完成!Cocoonで作るサイト型トップページのHTMLとCSS総まとめ
    1. HTMLコード(総まとめ)
    2. CSSコード(総まとめ)
  8. Cocoonで作るトップページ/新着記事部分
    1. 見出し
    2. 新着記事を表示する
    3. 新着記事を横並びにする
    4. リンクボタン
  9. Cocoonで作るトップページ/カテゴリーごとの記事部分
    1. タブ切り替えにする
    2. カテゴリーごとの新着記事を表示する
    3. カテゴリー記事を横に並べる
  10. Cocoonで作るトップページ/人気記事部分
    1. 人気記事を表示させる
    2. 人気記事を横並びにする
  11. トップページに必要ないものを非表示にする
  12. レイアウトがうまくいかないときは
  13. 固定ページを「公開」
  14. 仕上げ/トップページに適用する
  15. あとがき
  16. 【実例集】当カスタマイズを実装されたサイトをご紹介!
    1. ママくらし
    2. リメイーナ
    3. koikenote
    4. Tani no Uchi – タニノウチ –
    5. 雨止み屋ブログ
    6. FURYU BLOG
    7. SAKUNOBLOG
    8. 推しログ
    9. 気マぐレクローバーの日常
    10. ぜいたくゆるミニマリスト
    11. ネット回線マニア

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

cocoon

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

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

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

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

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

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

標準機能ではある程度決まったレイアウトになるので、自由に色やデザインをアレンジしたい場合(タブを入れたい場所に配置、画像を使う等)には固定ページを使ったトップページを作成することをおすすめします。

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

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

ブログ型

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

サイト型

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

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

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

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

\スクロールできます/
サイト型トップぺージ/フルスクリーン
この3部構成で作成しています
  1. 新着記事
  2. カテゴリーごとの記事(タブ切り替え式)
  3. 人気記事

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

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

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

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

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

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

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>
変更するところ
  • 最後のリンクボタン:リンク先のURL(サイトURLに /?cat=0 をつけるとすべての記事一覧ページになります)
  • URLは” “(半角ダブルクォーテーション)で囲みます(※消したり、コピペで重複しないように注意

カテゴリー部分(タブ切り替え)

<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 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%;/*スマホで横1列に*/
	}
       .cate .new-entry-cards.large-thumb a,
       .popular-entry-cards.large-thumb a{
	       width:calc(100% / 2);/*スマホで横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で作るトップページ/新着記事部分

サイト型トップページ/新着記事

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

この項目を表示しています
  1. 見出し (New post)
  2. 最新記事 (2記事)
  3. リンクボタン

見出し

サイト型(見出し)

<div>タグにtitleというクラス名を付け、下段のサブ見出しはCSSの疑似要素を使って表示させています。

  • 見出しタグ<h2>を使っても良いのですが、装飾をリセットするためのCSSが増えるのでこちらではまとまりを表す<div>タグを使っています。
  • 当サイトは見出しにWEBフォント(GoogleFont)を使用しているのでテーマで設定しているフォントとは異なります。
<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"]
ショートコードで設定していること
  • new_list:新着記事を表示する
  • type=”large_thumb”:大きなサムネイルカードで表示する
  • count=”2″:表示する記事数は2記事
  • snippet=”1″:スニペット(抜粋)を表示する
  • bold=”1″:記事タイトルを太字にする

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

新着記事を横並びにする

\パソコンでは横2列に並べる/
サイト型トップページ/新着記事
\スマホでは横1列×2行/
サイト型トップページ/新着記事(スマホ)

ショートコードで表示された記事はそのままでは縦1列になるので、記事の並べ方を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で横2列に並べる*/
}

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

リンクボタン

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)

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

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

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

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

この項目を表示しています
  1. 見出し (Category)
  2. 3つのカテゴリーをタブ切り替えにする(ひとつのカテゴリーに6記事表示)
  3. リンクボタン

タブ切り替えにする

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

例)ひとつのタブはHTMLの<input>と<label>で作られます
<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: 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を確認できるので、該当の番号を入れましょう。

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

\パソコンでは横3列に並べる/
\スマホでは横2列×3行/
サイト型トップページ/カテゴリー(スマホ)

新着記事と同じ要領で横並び3列(スマホでは2列)にするように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で作るトップページ/人気記事部分

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

この項目を表示しています
  1. 見出し (Popular)
  2. 人気記事 (6記事)
  3. リンクボタン

人気記事を表示させる

人気記事については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時区切りでの今日ではありませんが)

この期間についてはお好みで変更してください。

人気記事を表示するショートコードの使い方やオプションについての詳細はこちらをご覧ください。

人気記事を横並びにする

\パソコンでは横3列に並べる/
\スマホでは横2列×3行/
サイト型トップページ/人気記事(スマホ)

記事の並べ方を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シェアボタン、フォローボタン
  • ヘッダー投稿日、更新日
  • 投稿者名

.home をつけることでトップページのみに適用するようにしているのでプレビュー画面の段階では表示されていて問題ありません。

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

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

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

  • コード部分はすべて半角で入力されているか
  • HTMLでリンク先URLやクラス名は””で囲んでいるか
  • CSSのプロパティは{ }囲んでいるか
  • CSSを区切る ,(カンマ) や CSSクラス名の先頭につけている.(ドット)に間違いがないか(コピペしたときに多くつけていないか)

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

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

固定ページを「公開」

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

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

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

これが最後の工程です!

管理画面設定表示設定

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

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

サイト型

完成~♪

あとがき

お疲れさまでした!!!

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

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

見出しを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

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

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

サイト型トップぺージ/フルスクリーン
/タブ切り替え部分を実装されています\

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

ネット回線マニア

サイト型トップぺージ/フルスクリーン

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

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

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

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

Comment

  1. こんばんわ。
    この度、ブログのカスタマイズを試みようと思い、こちらにたどり着きました。

    とても可愛くて、どれもこれもマネしたくなり
    そのままコピペでいけそうなので今現在コピペで試しているところです。

    いくつか質問があるのでお手隙の時に教えて頂きたくコメントさせていただきました。

    ①CommentやNew listなど同じようなフォントに仕上がらない。
    どうすれば同じような可愛いフォントにできますか?

    ②タブ切り替えのところがうまくいってません。
    全てコピペですが、色だけ変えました。
    カテゴリーは出てきますが、その下にカテゴリーごとの記事がでてこず、タブのみになります。
    なぜでしょうか?
    特に、おかしくなるようなことをしていませんが?
    お分かりになりますでしょうか?

    • はっちゃんはっちゃん より:

      > かわうその母さん
      記事を見ていただき、またコメントありがとうございます。

      お問い合わせの件です。

      ①フォントの違いについて

      当サイトは現在、見出しやリンクボタンの一部にWEBフォント(GoogleFont)を取り入れているため設定したフォントとは異なっています。「GoogleFont」で検索するといろいろなフォントや導入方法があり難しくはないので探してみてくださいね^^

      ②タブ切り替えの部分について

      申し訳ありません。
      CSSに余計なコードが入っていてタブの内容が非表示になっていました。
      コピペされたCSSのdisplay: none;(非表示にするという意味)を削除していただけますでしょうか。

      /* タブのコンテンツ部分*/
      .tab-content {
      display: none;←※この一行だけを削除
      width: 100%;
      height: 0;
      overflow: hidden;
      opacity: 0;
      }

      この修正で表示されたかどうかご連絡いただけると幸いです。お手数をおかけいたします。

  2. お返事ありがとうございます。

    遅くなり申し訳ございません!

    絶対「はっちゃんさん」サイトのような仕上がりにしたいので
    やってみます!

    トライしてみてからどうだったのかまたお返事します!

  3. はっちゃんさん…

    display: none;←※この一行だけを削除

    しても表示されません。

    確認していただきたく、はっちゃんさん仕様のトップページを「公開」にしました。
    ご確認お願いしたいです!

    • はっちゃんはっちゃん より:

      こんにちは!
      サイトを拝見させていただきました。

      タブ切り替え部分のcssが2つ存在して重複しているようです。(親テーマにも追加されたりしましたか?)

      その一つにdisplay: none;が残っているためタブの内容が表示されていない状態です。

      対応

      ①CSSの記載は一か所(cocoon.child:子テーマのスタイルシート)にする
      ②display: none;を削除する

      検証上はdisplay: none;の削除のみで表示されました^^

      画像を添付しますのでご確認宜しくお願いします。

    • はっちゃんはっちゃん より:

      表示されています。

  4. はっちゃんさん!!

    カスタムCSSにも記載してしまっていました(;’∀’)

    無事に記載できるようになりました!!!
    本当に感謝します!
    デベロッパーツールを使いこなせるのは本当に凄腕ですね!
    私は色々なサイトを通して勉強していますが、まだまだ分かりません(;’∀’)

    はっちゃんさん仕様のサイトを目指して次にフォントにトライしてみます!

    教えて頂いたように「グーグルフォント」にいってみます!

    はっちゃんさんのHPの中の
    コンテンツなどに❶や❷など番号がふってありますが、
    これは自分で数字を打っているのでしょうか?
    例えば→右側に記載のコンテンツ「❶ブログ型とサイト型の違いについて」のところの
    「❶」の番号は入力して数字を出すのでしょうか?
    番号をふっているのを初めてみて、すごく魅力を感じました!

    難しくなければいいなー(笑)

    • はっちゃんはっちゃん より:

      表示されてよかったです^^

      ①~の部分は目次の番号部分をカスタマイズしています。

      ①デフォルトの番号を一旦消す
      ②新たにカウントして番号をふる
      ③番号まわりに背景色を入れて丸くする
      ④縦の位置を合わせる

      ということをやっています。

      記事に書こうと思いつつも「cocoon 目次 丸くする」で調べると書いてあるサイトがありました。参考にされてください。

  5. はっちゃんさん

    なるほど!
    はっちゃんさんのご意見を参考にさせていただきます!

    そういったちょっとしたカスタマイズなどのやり方などもブログで紹介していただきたいです!

    はっちゃんさんを参考に少しカスタマイズ頑張ります!

  6. はっちゃんさんが同じ「Coccon」とは思えなくて…
    本当にすごいです!

    そして、疑問ですがこれだけカスタマイズしているということは
    CSS(子テーマ)すごいことになっているのですか?

    私は初心者でボックスなどのCSSでなんだかよく分からないstyle.cssになっていて
    大変です。

    はっちゃんさんのstyle.cssはどのようになっていますか?

    • はっちゃんはっちゃん より:

      ありがとうございます^^
      子テーマのCSSは現在4000行弱あります。

      私も最初はネットで公開されているカスタマイズをコピペしていたら、デザインを変えられるのが楽しくて沼にハマった感じです~。

      すっきりと書かないとコードが肥大化してしまうのでときどき断捨離しています。笑

      目次の番号、記事にする予定なのでしばしお待ちくださいませ。

  7. …はっちゃんさんで4000行弱…

    自分より少ないのに驚きです。
    そうなんです。おしゃれなデザインを見つけてはコピペしていたら膨大な量のCSSになっていて
    今困っている状態です。

    記事の下にあるカスタマイズCSSはその記事のみのCSSということですよね?

    面倒くさいですが、その方がいいものなのでしょうかね?

    はい!
    目次の番号の記事を首を長くしてお待ちしております!!

    • はっちゃんはっちゃん より:

      > かわうその母 さん
      お返事が遅くなりました。
      その通りで記事下のカスタムCSSはその記事限定になります。

      外観→テーマファイルエディタ→スタイルシート(子テーマ)でCSSの管理を統一する方が管理しやすいかなと思います。

      CSSはさらに減らして3500行になりました^^

  8. ちばはる より:

    こんにちは!初めまして。
    できるだけおしゃれなサイトを作りたくて、参考にさせていただいています。
    ひとまずほぼコピペですがトップページだけできて…。
    今後もなにかと参考にさせていただくことがあるかと思いますが、ひとまずすぐできることはやれたのでお礼だけでもと思いご連絡しております。
    素敵な指南ブログを書いてくださりありがとうございました。

    • はっちゃんはっちゃん より:

      > ちばはるさん
      初めまして。
      サイト拝見しました。
      トップページ冒頭のサイト紹介文が可愛く目立ってよいですね^^

      サイト型カスタマイズがお役に立てて嬉しいです。
      ご丁寧にコメントありがとうございました!

  9. ここやや より:

    こんばんは!初めまして!
    サイトの表示がおかしくなりいろいろ検索していたところ、こちらのページを見つけました。
    これまでのサイトは古いデザインだったので、思い切って切り替えたのですがとてもステイなトップページになり大満足です。
    CSSの内容など、とても細かく書いてあり、知識のない私でも理解しやすかったです。
    このような素晴らしいブログを書いてくださり本当にありがとうございます。

    • はっちゃんはっちゃん より:

      > ここややさん
      初めまして。
      ブログを見ていただきましてありがとうございます。

      サイトを拝見したらとても綺麗にまとまっていて素敵ですね!

      ブログ作りのお役に立て、またこうしてコメントをいただきとても励みになります^^

      今後ともよろしくお願いします。

タイトルとURLをコピーしました