- この記事で作成できるトップページのサンプルはこちら。
- 当記事のカスタマイズを実装されたサイトを紹介します。
- コピペできるコードを有料公開しています。
- X（Twitter）のポストに反響いただきました。
最近ブログサイトでよく見かける、新着記事やカテゴリー記事に分けて表示されすっきりとしたトップページ。この形はデフォルトのブログ型に対して「サイト型」と呼ばれますが、Cocoonでもこんな風にしてみたいな～と気になっている方は多いのではないでしょうか？
私も見やすいサイト型にしたいなと思い、どうしたらイメージしたサイト型にできるかを試行錯誤しながら考えました。
この記事では私が憧れる綺麗な有料テーマ【SWELL】をイメージして考案した
【Cocoon】でのサイト型トップページの作り方
をご紹介します。
- テーマ【Cocoon】を使っている
- サイト型トップページに切り替えたい
- カテゴリーごとの記事をタブ切り替えで表示したい
- HTML／CSSの理解が多少ある
なお、今回のトップページは、固定ページ＋HTML＋CSSを使って柔軟なレイアウトができるものです。（難易度は普通）
新着記事などをブロック操作でも表示できるのですが、この記事ではまるごとコピペできることを最優先に、あえてコード記述にしています。
難しい知識は不要ですが、コード（HTML＋CSS）を見てざっくりと何を意味するのか、どこを変更したらよいのか分かる程度の理解があると進めやすいです。
この記事のカスタマイズを実装するとこのようなトップページを作ることができますよ。
- トップページカスタマイズを組み合わせできるようにしました
- もっと簡単に！ブロック機能でもサイト型トップページを作成できる
- ブログ型とサイト型の違いについて
- Cocoonで作るサイト型トップページの完成イメージ
- 【事例集】当カスタマイズを実装されたサイトをご紹介
- Cocoonでサイト型トップページを作成するにあたっての注意
- ここから先は有料公開です
- Cocoonで作るサイト型トップページの作成手順
- HTMLで固定ページを作成する
- 固定ページを作成する／新着記事
- 固定ページを作成する／カテゴリーごとの記事
- 固定ページを作成する／人気記事部分
- 固定ページ／HTMLコード（まとめ）
- 固定ページを「公開」
- CSSをコピぺする（コードまとめ）
- 仕上げ／トップページに適用する
- ショートコードで表示した新着記事、人気記事に日付を表示する方法 NEW
- 反映されないときの確認事項
- あとがき
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- JavaScriptを勉強中
- ドメインパワー35
- ワードプレスで複数サイトを運営しています
です
トップページカスタマイズを組み合わせできるようにしました
当サイトのトップページは、当記事とフルワイド＆背景色をつけるカスタマイズを組み合わせて作成しています。同じコードで組み合わせできるようにしました。
当記事のトップページ+フルワイドを組み合わせて使う方法（フルワイドにするCSSを追加、背景色を設定するだけ）
合わせてご覧になってください。
もっと簡単に！ブロック機能でもサイト型トップページを作成できる
コードをいじるのは苦手…手軽にトップページを変えられないかなー
また、HTMLやCSSに馴染みがない方でも、ワードプレスやCocoonのブロック機能をメインに使用してトップページを作成できます。
作り方や完成イメージ（サンプルページあり）のデザイン等を見ながらお好みで選択ください。
ブログ型とサイト型の違いについて
冒頭からブログ型・サイト型と書いていますが、それぞれの特徴を比較してみます。
ブログ型
- トップページに上から記事が投稿順に並んでいる
- カテゴリーが分かりにくい
- 目的の記事が探しにくい
- 古い記事が埋もれがち
- ブログのデフォルトはこのタイプ
- 検索流入がほとんどの場合はこちらでもよいかも
サイト型
- セクションごとに記事がまとまっている
- カテゴリーが一目で分かる
- 目的の記事を見つけやすい
- トップページからの動線がよくなりアクセスアップが期待できる
ただずらーっと記事が並んでいるよりは、サイト型にするとメリットがたくさんあるね！
今回はサイト型を作ります。CocoonでのカスタマイズはHTMLとCSSを駆使するので手間がかかるけど、ひとつずつ解説するのでやってみましょう！
Cocoonで作るサイト型トップページの完成イメージ
- 新着記事
- カテゴリーごとの記事（タブ切り替え式）
- 人気記事
あくまで当サイトのレイアウト例でシンプルに作っているので、アレンジは各自お好みでされてくださいね。
また、次に当カスタマイズの実例集を掲載します。
【事例集】当カスタマイズを実装されたサイトをご紹介
テーマCocoonを使用して当記事のカスタマイズを実装（独自のアレンジや一部のみ実装を含む）されたサイトをご紹介します。
![サイト型トップぺージ／フルスクリーン](https://turicco.com/wp-content/uploads/2023/05/ponpoco-minimalist.com_-scaled.jpg")
皆様、アレンジされてそれぞれの個性が光ってる～
素敵サイトばかりなので参考になさってくださいね。
Cocoonでサイト型トップページを作成するにあたっての注意
- 当サイトのスキンは「なし」ですが、スキンを適用したままでもOKです。
- サイドバーは表示したままでも、しなくてもどちらでも使えます。
【サイドバーを非表示にする方法】
Cocoon設定→全体→サイドバーの表示状態：フロントページで非表示にチェックする。
または、
固定ページ右側サイドバー／固定ページタブ「ページ設定」→ページタイプで「１カラム（狭い）」を選択。（１カラムはサイドバーが表示されません）
- 従来のクラシックエディタは使用できません（タブ切り替えの際に自動的に<p>タグが入ることによりレイアウトが崩れてしまいます）、Gutenberg（ブロックエディタ）のカスタムHTMLをご利用ください。
- キャッシュ系のプラグインを有効化しているとCSSが反映されない事例があります。
- コードを編集する際にはバックアップをとりましょう。（成功したところまでのコードをこまめにコピーしておくなど、失敗してもやり直せるようにしておきます）
それでは本編スタート
ここから先は有料公開です
- Cocoonで作るサイト型トップページの作成手順
- 解説／新着記事、カテゴリー記事、人気記事
- サイト型トップページのHTMLコード
- サイト型トップページのCSSコード
- 反映されないときの確認事項
※公開コードは別サイトで検証の上、反映されることを確認しております。
| 特定商取引法に基づく表記 | |
| サイト名 | Turicco |
| サイトURL | https://turicco.com/ |
| お問い合わせ | https://turicco.com/contact/ |
| 購入方法 | コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。 |
| 納品方法 | 記事公開 |
| 販売価格 | 600円／記事によって異なります |
| お支払い 方法 | クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済 |
| ※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。 | |
| 返金・キャンセルについて | codoc株式会社利用規約 第10条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。 |
Comment
こんばんわ。
この度、ブログのカスタマイズを試みようと思い、こちらにたどり着きました。
とても可愛くて、どれもこれもマネしたくなり
そのままコピペでいけそうなので今現在コピペで試しているところです。
いくつか質問があるのでお手隙の時に教えて頂きたくコメントさせていただきました。
①CommentやNew listなど同じようなフォントに仕上がらない。
どうすれば同じような可愛いフォントにできますか？
②タブ切り替えのところがうまくいってません。
全てコピペですが、色だけ変えました。
カテゴリーは出てきますが、その下にカテゴリーごとの記事がでてこず、タブのみになります。
なぜでしょうか？
特に、おかしくなるようなことをしていませんが？
お分かりになりますでしょうか？
> かわうその母さん
記事を見ていただき、またコメントありがとうございます。
お問い合わせの件です。
①フォントの違いについて
当サイトは現在、見出しやリンクボタンの一部にWEBフォント（GoogleFont）を取り入れているため設定したフォントとは異なっています。「GoogleFont」で検索するといろいろなフォントや導入方法があり難しくはないので探してみてくださいね^^
②タブ切り替えの部分について
申し訳ありません。
CSSに余計なコードが入っていてタブの内容が非表示になっていました。
コピペされたCSSのdisplay: none;（非表示にするという意味）を削除していただけますでしょうか。
/* タブのコンテンツ部分*/
.tab-content {
display: none;←※この一行だけを削除
width: 100%;
height: 0;
overflow: hidden;
opacity: 0;
}
この修正で表示されたかどうかご連絡いただけると幸いです。お手数をおかけいたします。
お返事ありがとうございます。
遅くなり申し訳ございません！
絶対「はっちゃんさん」サイトのような仕上がりにしたいので
やってみます！
トライしてみてからどうだったのかまたお返事します！
はっちゃんさん…
display: none;←※この一行だけを削除
しても表示されません。
確認していただきたく、はっちゃんさん仕様のトップページを「公開」にしました。
ご確認お願いしたいです！
こんにちは！
サイトを拝見させていただきました。
タブ切り替え部分のcssが２つ存在して重複しているようです。（親テーマにも追加されたりしましたか？）
その一つにdisplay: none;が残っているためタブの内容が表示されていない状態です。
対応
①CSSの記載は一か所（cocoon.child：子テーマのスタイルシート）にする
②display: none;を削除する
検証上はdisplay: none;の削除のみで表示されました^^
画像を添付しますのでご確認宜しくお願いします。
表示されています。
はっちゃんさん！！
カスタムCSSにも記載してしまっていました(;’∀’)
無事に記載できるようになりました！！！
本当に感謝します！
デベロッパーツールを使いこなせるのは本当に凄腕ですね！
私は色々なサイトを通して勉強していますが、まだまだ分かりません(;’∀’)
はっちゃんさん仕様のサイトを目指して次にフォントにトライしてみます！
教えて頂いたように「グーグルフォント」にいってみます！
はっちゃんさんのHPの中の
コンテンツなどに❶や❷など番号がふってありますが、
これは自分で数字を打っているのでしょうか？
例えば→右側に記載のコンテンツ「❶ブログ型とサイト型の違いについて」のところの
「❶」の番号は入力して数字を出すのでしょうか？
番号をふっているのを初めてみて、すごく魅力を感じました！
難しくなければいいなー（笑）
表示されてよかったです^^
①～の部分は目次の番号部分をカスタマイズしています。
①デフォルトの番号を一旦消す
②新たにカウントして番号をふる
③番号まわりに背景色を入れて丸くする
④縦の位置を合わせる
ということをやっています。
記事に書こうと思いつつも「cocoon 目次 丸くする」で調べると書いてあるサイトがありました。参考にされてください。
はっちゃんさん
なるほど！
はっちゃんさんのご意見を参考にさせていただきます！
そういったちょっとしたカスタマイズなどのやり方などもブログで紹介していただきたいです！
はっちゃんさんを参考に少しカスタマイズ頑張ります！
はっちゃんさんが同じ「Coccon」とは思えなくて…
本当にすごいです！
そして、疑問ですがこれだけカスタマイズしているということは
CSS（子テーマ）すごいことになっているのですか？
私は初心者でボックスなどのCSSでなんだかよく分からないstyle.cssになっていて
大変です。
はっちゃんさんのstyle.cssはどのようになっていますか？
ありがとうございます^^
子テーマのCSSは現在4000行弱あります。
私も最初はネットで公開されているカスタマイズをコピペしていたら、デザインを変えられるのが楽しくて沼にハマった感じです～。
すっきりと書かないとコードが肥大化してしまうのでときどき断捨離しています。笑
目次の番号、記事にする予定なのでしばしお待ちくださいませ。
…はっちゃんさんで4000行弱…
自分より少ないのに驚きです。
そうなんです。おしゃれなデザインを見つけてはコピペしていたら膨大な量のCSSになっていて
今困っている状態です。
記事の下にあるカスタマイズCSSはその記事のみのCSSということですよね？
面倒くさいですが、その方がいいものなのでしょうかね？
はい！
目次の番号の記事を首を長くしてお待ちしております！！
> かわうその母 さん
お返事が遅くなりました。
その通りで記事下のカスタムCSSはその記事限定になります。
外観→テーマファイルエディタ→スタイルシート（子テーマ）でCSSの管理を統一する方が管理しやすいかなと思います。
CSSはさらに減らして3500行になりました^^
こんにちは！初めまして。
できるだけおしゃれなサイトを作りたくて、参考にさせていただいています。
ひとまずほぼコピペですがトップページだけできて…。
今後もなにかと参考にさせていただくことがあるかと思いますが、ひとまずすぐできることはやれたのでお礼だけでもと思いご連絡しております。
素敵な指南ブログを書いてくださりありがとうございました。
> ちばはるさん
初めまして。
サイト拝見しました。
トップページ冒頭のサイト紹介文が可愛く目立ってよいですね^^
サイト型カスタマイズがお役に立てて嬉しいです。
ご丁寧にコメントありがとうございました！
こんばんは！初めまして！
サイトの表示がおかしくなりいろいろ検索していたところ、こちらのページを見つけました。
これまでのサイトは古いデザインだったので、思い切って切り替えたのですがとてもステイなトップページになり大満足です。
CSSの内容など、とても細かく書いてあり、知識のない私でも理解しやすかったです。
このような素晴らしいブログを書いてくださり本当にありがとうございます。
> ここややさん
初めまして。
ブログを見ていただきましてありがとうございます。
サイトを拝見したらとても綺麗にまとまっていて素敵ですね！
ブログ作りのお役に立て、またこうしてコメントをいただきとても励みになります^^
今後ともよろしくお願いします。
はじめまして！
トップページから末尾に至るまで（TOPに戻る矢印等素材すべて含む）、
はっちゃんさんのデザインをそっくりそのまま再現してサイトを作りたいと思っております。
有料記事に指定されている500円の記事を購入するだけでできますでしょうか。
それとも、全搭載できるような購入ページがあればシェアしていただけないでしょうか。
値段にもよりますが、ぜひ前向きに検討したいと思っております。
みかさん
X（Twitter）の方にもご連絡いただきありがとうございます。
このトップページのカスタマイズは、掲載している 「サンプルページ」のデザインで完成します。現在の当サイトデザインと同じではありませんのでご了承ください。
各スタイルまでカスタマイズに入れてしまうとコードが膨大になり、編集する際に混乱するのを防ぐためシンプルに仕上げています。
そっくりそのままできるページは現在公開していなく、個別の製作も承っておりません。（すいません）
矢印の作り方、各ボックスの装飾等、リクエストがありましたら今後個別に記事にしていこうと思います。
お時間をいただきますが、参考にしていただけると幸いです。
とても素晴らしいデザインで、心をつかまれたのです。
お返事くださり、本当にありがとうございました。
私は素人なので、
あまり自分で負担は背負いたくなく、
コピペさえすれば仕上がってしまえるのを期待していたのが正直なところです笑
本当に素敵なデザインです。
また遊びにきます✋
> みかさん
とても嬉しいです。
またよろしくお願いします^^
初めまして。
とても素敵なサイトで、色々と参考にさせていただいています。サイトトップページもすぐに参考にさせていただきました。
一点ご質問なのですが、各ブログの更新日がカードに表示させたいのですがどのようにすればいいのでしょうか？
Arisaさん、初めまして！
フォーラムで拝見してから素敵になっていくサイトを見て感心していました^^
ブログを見てくださりありがとうございます。
お問い合わせの件、最初は日付がdisplay: none;にの設定になっていて非表示なので、display:block;にすれば表示されます。
具体的なコードを記事に書きましたのでご覧になってくださいね。
> Cocoonウィジェットカード新着記事・人気記事に日付（投稿日・更新日）を表示する方法
はっちゃんさん
お返事ありがとうございます。
そして、記事にまでしていただいて感激です。
これからもはっちゃんさんのページで勉強させていただきます。