サイト型トップページの作り方を公開しています!Check

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

アイキャッチ/トップページ Cocoon
Cocoon
記事内に広告が含まれています
スポンサーリンク

この記事では、テーマ【Cocoon】でのサイト型トップページの作り方をご紹介します。

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

今回ご紹介するトップページの作成方法では、固定ページ+HTML+CSSを使用し、柔軟なレイアウトを実現します。ブロックエディタを利用した簡易表示も可能ですが、この記事では「コードをそのままコピペで使える」ことを最優先に解説します。

微調整が必要な場合、HTMLやCSSの記述を多少修正するスキルがあるとより自由度が高まります。

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

     
大きく3つのセクションに分けています
  • 新着記事セクション
  • カテゴリー別記事セクション(タブ切り替え)
  • 人気記事セクション

3つのセクションを設定し、カテゴリー別に記事を切り替えられるタブ機能も導入しています。

  1. Cocoonで作るサイト型トップページの特徴
    1. フルワイド(幅いっぱい)にできる
    2. もっと簡単に!ブロック機能を使う
  2. トップページのブログ型とサイト型の違いについて
    1. ブログ型
    2. サイト型
  3. 事例集/Cocoonで作るサイト型トップページを実装されたサイトをご紹介
    1. ママくらし
    2. リメイーナ
    3. koikenote
    4. Tani no Uchi – タニノウチ –
    5. 雨止み屋ブログ
    6. FURYU BLOG
    7. 気マぐレクローバーの日常
    8. ぜいたくゆるミニマリスト
    9. さらば、思うだけ
    10. 花嫁の幸せな笑顔
    11. 天国に一番近い個人旅行
    12. 良コレ
  4. Cocoonでサイト型トップページを作成するにあたっての注意
  5. 実装方法/Cocoonで作るサイト型トップページ
    1. 有料エリアの目次
  6. 作成手順/Cocoonで作るサイト型トップページ
    1. HTMLコード(コピペ用)
    2. CSSコード(コピペ用)
    3. 仕上げ/作成した固定ページをトップページに適用する
  7. 解説/Cocoonで作るサイト型トップページ
    1. スタイリング
    2. 固定ページの作成/新着記事
    3. 固定ページの作成/カテゴリーごとの記事
    4. 固定ページの作成/人気記事部分
  8. CSSが反映されないときの原因と対処法/Cocoonで作るサイト型トップページ
    1. チェックリスト:基本的な確認事項
    2. 見落としがちなポイント
    3. 原因が見つからない場合
  9. 追加カスタマイズ/Cocoonで作るサイト型トップページ
    1. 表示する新着記事数を変更する
    2. ショートコードで表示した新着記事、人気記事に日付を表示する
    3. タブひとつの幅を調整する
    4. セクションを幅いっぱいのフルワイドにして、背景色をつける
    5. アピールエリアでメインビジュアルを作る
    6. 見出しの位置を左右交互にする
  10. あとがき
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40
  • 2023年~有料記事公開
    • →累計300件(月間約20件)購入いただきました
はっちゃん
です
プロフィール

Cocoonで作るサイト型トップページの特徴

  • 難易度:普通
    • HTMLやCSSの基本を理解しているとスムーズに作業を進められます。特に以下を確認できると便利です。
      • 各コードが何を意味しているか、ざっくり理解する
      • デザインの変更箇所を特定して微調整するスキル
  • 柔軟なカスタマイズが可能
    • HTMLとCSSを使用するため、細かいデザインの微調整や独自のスタイルを簡単に適用できます。
  • ブロック機能も併用可能
    • 新着記事などのセクションは、Cocoonのブロック機能を使うことで簡単に表示できます。ただし、本記事ではコードによる固定ページ作成に重点を置いて解説します。
  • 分かりやすい表示
    • 提供するHTMLコードには「変更可能箇所」にコメントを付けています。またCSSには各プロパティごとに簡単なコメントアウト(役割のメモ書き)をつけています。これを参考にカスタマイズを進めてください。

その他、以下のような特徴があります。

フルワイド(幅いっぱい)にできる

当サイトのトップページは、当記事で紹介した方法に加え、フルワイド&背景色カスタマイズを組み合わせて作成しています。これにより、より洗練されたデザインを実現しました。

トップページをフルワイド化し背景色を設定するカスタマイズについては、以下の記事をご参考ください

もっと簡単に!ブロック機能を使う

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

また、HTMLやCSSに馴染みがない方でも、ワードプレスやCocoonのブロック機能をメインに使用してトップページを作成できます。コード記述を極力少なくする工夫をしています。

作り方や完成イメージ(デモページあり)等を見ながらお好みで選択ください。

記事比較当記事ブロックを使う方法
作り方コード記述
(HTML+CSS)
ブロック機能+少ないCSS
難易度普通(コピペで簡単)簡単
タブ切り替えありなし(後付け可)
おすすめコードコピペで済ませたい人目に見えるブロック機能で作りたい人
デモページDEMODEMO
手順ごとのスクリーンショットをたくさん盛り込みました!
スポンサーリンク

トップページのブログ型とサイト型の違いについて

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

ブログ型

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

サイト型

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

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

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

スポンサーリンク

事例集/Cocoonで作るサイト型トップページを実装されたサイトをご紹介

イメージ画像/pc

Cocoonテーマを使用して当記事のカスタマイズを実装されたサイトをご紹介します。(独自のアレンジや一部のみ実装を含み、レイアウトは掲載時点から変更されている可能性があります)

ママくらし

     
フルスクリーン

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

リメイーナ

     
フルスクリーン

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

koikenote

     
フルスクリーン
/タブ切り替え部分を実装されています\

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

Tani no Uchi – タニノウチ –

     
フルスクリーン

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

雨止み屋ブログ

     
フルスクリーン/あむやみや
/タブ切り替え部分をアレンジされています\

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

FURYU BLOG

     
フルスクリーン
/アピールエリア部分を実装されています\

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

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

     
フルスクリーン

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

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

     
フルスクリーン
/タブ切り替え部分を実装されています\

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

さらば、思うだけ

     
フルスクリーン

URL:https://yoko51.com/
運営:yoko さん

花嫁の幸せな笑顔

     
フルスクリーン

URL:https://minoaka-blog.com/
運営:えリッチ さん

天国に一番近い個人旅行

     
フルスクリーン

URL:https://caledonia01.com/
運営:りと さん

良コレ

     
フルスクリーン/良コレ

URL:https://yoikore.com/
運営:ミカヅキ さん

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

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

スポンサーリンク

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

イメージ画像/ステップ

テーマ「Cocoon」を使って、サイト型トップページをブロックエディタで作成する際のポイントと注意点をまとめました。以下を参考に作業を進めてください。

  • エディタ:ブロックエディタ(Gutenberg)を前提に解説しています。
  • バックアップの重要性:コード編集時には、必ずバックアップを取りましょう。成功した部分のコードを小まめにコピーして保存しておくと、万が一のトラブル時にも安心です。
  • キャッシュ系プラグインの影響:CSSやデザイン変更が反映されない場合、キャッシュ系プラグインが原因の可能性があります。一時的に無効化して検証してください。
  • スキンの設定:スキンの影響を避けるため、設定は「スキンなし」で検証しています。
    使用中のスキンによって若干スタイルが異なる可能性があります。
  • サイドバーの表示設定:サイドバーは「あり」「なし」のどちらでも使用可能です。
  • ページタイプの選択:推奨設定「1カラム(広い)」を選択することで、バランスの良いレイアウトが実現します。
    1. 固定ページを開きます。
    2. サイドバーの「ページ設定」タブを選択。
    3. 「ページタイプ」から「1カラム(狭い)」または「1カラム(広い)」を選択します。

「1カラム(フルワイド)」は横幅が広すぎるため、記事カードの間隔が開きすぎてバランスが悪くなる場合があります。このレイアウトは推奨しません。

ブロックトップページ/ページ設定

それでは本編スタート

スポンサーリンク

実装方法/Cocoonで作るサイト型トップページ

以下で、HTML・CSSの各ポイントを詳しく説明します。

有料エリアの目次

  1. 作成手順/Cocoonで作るサイト型トップページ
    1. HTMLコード(コピペ用)
    2. CSSコード(コピペ用)
    3. 仕上げ/作成した固定ページをトップページに適用する
  2. 解説/Cocoonで作るサイト型トップページ
    1. スタイリング
    2. 固定ページの作成/新着記事
    3. 固定ページの作成/カテゴリーごとの記事
    4. 固定ページの作成/人気記事部分
  3. CSSが反映されないときの原因と対処法/Cocoonで作るサイト型トップページ
    1. チェックリスト:基本的な確認事項
    2. 見落としがちなポイント
    3. 原因が見つからない場合
  4. 追加カスタマイズ/Cocoonで作るサイト型トップページ
    1. 表示する新着記事数を変更する
    2. ショートコードで表示した新着記事、人気記事に日付を表示する
    3. タブひとつの幅を調整する
    4. セクションを幅いっぱいのフルワイドにして、背景色をつける
    5. アピールエリアでメインビジュアルを作る
    6. 見出しの位置を左右交互にする
  5. あとがき

※公開コードは別サイトで検証の上、反映されることを確認しています。

特定商取引法に基づく表記
サイト名Turicco
サイトURLhttps://turicco.com/
お問い合わせhttps://turicco.com/contact/
購入方法コンテンツ販売サービス、codoc(コードク)を利用しています。
詳しくは購入者向けFAQをご覧ください。
納品方法記事公開
販売価格980円
お支払い
方法
クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済
※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。
返金・キャンセルについてcodoc株式会社利用規約 第10条(返金)に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。

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

シェアはこちらから
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/

お買い物の際にぽちっとお願いします

Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

  1. すが より:

    使用したプラグインは「Toggle wpautop」です。
    こちらはテーマ全体ではなく、固定ページや投稿ごとに p タグの削除ができました。
    フロントページの p タグ変換を切ったところ、タグ切り替えが機能しました。
    参考になりましたら幸いです!

  2. すが より:

    ご回答いただきありがとうございます!
    ご指摘いただいた箇所を修正しましたところ、無事タブ切り替えを作成できました!
    (が勝手に入ってしまう問題については、結局解決できなかったので削除するプラグインを導入して解決しました)

    ほかにも参考にさせていただきたいカスタマイズ記事がございましたので、購入させていただきます。
    ありがとうございます!

  3. すが より:

    初めまして。
    はっちゃんさんのブログデザインに見惚れて、参考にさせていただいております。
    CSSの勉強になる記事をいくつも公開してくださり、とても助かっております。ありがとうございます!

    一点、相談させていただきたいのですが、
    HTML、CSSをコピペしてブログに適用させていただきましたところ、カテゴリーのタブ切り替え箇所が上手くいきませんでした。
    タブも作成されず、その下のコンテンツも表示されませんでした。
    原因はどこにあるのか、お分かりになりますでしょうか?

    お力を貸していただければ幸いです。

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

      すが さん

      初めまして!

      記事を参考にしてくださりありがとうございます。
       
       
      タブ切り替えがうまく表示されない件について。
       
      原因①:タブを作る label が p で囲まれている
      →タブのコンテンツが表示されません
       
      原因②:< label >内に br が入り改行されてしまう
      →レイアウトが崩れます

       
      これはワードプレスの仕様で自動的に挿入されてしまう場合があります。(特にクラシックエディタだと起こるようです)
       
       
        
      対策:

      ①タブ切り替えのHTML内に挿入されている p と br をすべて削除する
      ②タブ切り替えのHTMLを改行せずにすべて繋げて書く
       
      これで綺麗に表示されるかと思いますのでお試しいただければと思います。

      参考に画像を添付いたします。
       
      よろしくお願いします。

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

      改行を表す br が挿入されている例。(画像内の誤字すいません…)

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

      検証上、タブ内HTMLのp ~ /pと br を削除したところタブが表示されました。

  4. Arisa より:

    初めまして。
    とても素敵なサイトで、色々と参考にさせていただいています。サイトトップページもすぐに参考にさせていただきました。
    一点ご質問なのですが、各ブログの更新日がカードに表示させたいのですがどのようにすればいいのでしょうか?

  5. みか より:

    とても素晴らしいデザインで、心をつかまれたのです。
    お返事くださり、本当にありがとうございました。

    私は素人なので、
    あまり自分で負担は背負いたくなく、
    コピペさえすれば仕上がってしまえるのを期待していたのが正直なところです笑

    本当に素敵なデザインです。
    また遊びにきます✋

  6. みか より:

    はじめまして!
    トップページから末尾に至るまで(TOPに戻る矢印等素材すべて含む)、
    はっちゃんさんのデザインをそっくりそのまま再現してサイトを作りたいと思っております。
    有料記事に指定されている500円の記事を購入するだけでできますでしょうか。

    それとも、全搭載できるような購入ページがあればシェアしていただけないでしょうか。
    値段にもよりますが、ぜひ前向きに検討したいと思っております。

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

      みかさん
      X(Twitter)の方にもご連絡いただきありがとうございます。

      このトップページのカスタマイズは、掲載している 「サンプルページ」のデザインで完成します。現在の当サイトデザインと同じではありませんのでご了承ください。

      各スタイルまでカスタマイズに入れてしまうとコードが膨大になり、編集する際に混乱するのを防ぐためシンプルに仕上げています。

      そっくりそのままできるページは現在公開していなく、個別の製作も承っておりません。(すいません)

      矢印の作り方、各ボックスの装飾等、リクエストがありましたら今後個別に記事にしていこうと思います。

      お時間をいただきますが、参考にしていただけると幸いです。

  7. ここやや より:

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

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

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

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

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

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

  8. ちばはる より:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  11. はっちゃんさん

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

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

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

  12. はっちゃんさん!!

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

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

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

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

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

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

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

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

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

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

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

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

  13. はっちゃんさん…

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

    しても表示されません。

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

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

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

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

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

      対応

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

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

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

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

      表示されています。

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

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

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

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

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

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

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

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

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

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

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

      お問い合わせの件です。

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

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

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

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

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

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

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