WELCOME
当ブログを紹介いただいたサイトを掲載します受付中

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

アイキャッチ/トップページ カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク
お知らせ

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

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

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

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

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

をご紹介します。

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

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

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

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

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

サイト型トップぺージ/フルスクリーン
  1. トップページカスタマイズを組み合わせできるようにしました
  2. Cocoon設定(標準機能)でも簡易的なサイト型トップページが作成できる
  3. ブログ型とサイト型の違いについて
    1. ブログ型
    2. サイト型
  4. Cocoonで作るサイト型トップページの完成イメージ
  5. 【実例集】当カスタマイズを実装されたサイトをご紹介
    1. ママくらし
    2. リメイーナ
    3. koikenote
    4. Tani no Uchi – タニノウチ –
    5. 雨止み屋ブログ
    6. FURYU BLOG
    7. SAKUNOBLOG
    8. 推しログ
    9. 気マぐレクローバーの日常
    10. ぜいたくゆるミニマリスト
    11. ネット回線マニア
    12. Mino’aka Blog -ブライダル情報ブログ-
    13. 天国に一番近い個人旅行
    14. さらば、思うだけ
    15. 良コレ NEW
  6. Cocoonでサイト型トップページを作成するにあたっての注意
  7. ここから先は有料公開です
  8. Cocoonで作るサイト型トップページの作成手順
  9. HTMLで固定ページを作成する
  10. 固定ページを作成する/新着記事
    1. 見出し
    2. 新着記事を表示する
    3. 新着記事を横並びにする
    4. リンクボタン
  11. 固定ページを作成する/カテゴリーごとの記事
    1. タブ切り替えにする
    2. カテゴリーごとの新着記事を表示する
    3. カテゴリー記事を横並びにする
  12. 固定ページを作成する/人気記事部分
    1. 人気記事を表示させる
    2. 人気記事を横並びにする
  13. 固定ページ/HTMLコード(まとめ)
    1. 新着記事部分
    2. カテゴリー部分(タブ切り替え)
    3. 人気記事部分
  14. 固定ページを「公開」
  15. CSSをコピぺする(コードまとめ)
    1. トップページに必要ないものを非表示
  16. 仕上げ/トップページに適用する
  17. ショートコードで表示した新着記事、人気記事に日付を表示する方法 NEW
  18. 反映されないときの確認事項
  19. あとがき
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで2サイトを運営しています
はっちゃん
です
プロフィール

トップページカスタマイズを組み合わせできるようにしました

当サイトのトップページは、当記事とフルワイド&背景色をつけるカスタマイズを組み合わせて作成しています。同じコードで組み合わせできるようにしました。

合わせてご覧になってください。

\よりデザインが洗練されるのでオススメです/
\ファーストビューとなるアピールエリア編もあります/
スポンサーリンク

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

cocoon

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

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

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

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

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

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

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

スポンサーリンク

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

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

ブログ型

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

サイト型

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

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

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

スポンサーリンク

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

\スクロールできます/
サイト型トップぺージ/フルスクリーン

この3部構成で作成しています
  1. 新着記事
  2. カテゴリーごとの記事(タブ切り替え式)
  3. 人気記事

あくまで当サイトのレイアウト例でシンプルに作っているので、アレンジは各自お好みでされてくださいね。

また、次に当カスタマイズの実例集を掲載します。

スポンサーリンク

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

テーマCocoonを使用して当記事のカスタマイズを実装(独自のアレンジや一部のみ実装を含む)されたサイト様をご紹介します。

ママくらし

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

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

リメイーナ

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

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

koikenote

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

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

Tani no Uchi – タニノウチ –

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

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

雨止み屋ブログ

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

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

FURYU BLOG

サイト型トップぺージ/フルスクリーン
/アピールエリア部分を実装されています\

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

SAKUNOBLOG

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

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

推しログ

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

URL:https://my-lifelog.com/
運営:ひろさん

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

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

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

タブ切り替え、スマホでの表示を2列に変更されています。Post

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

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

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

ネット回線マニア

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

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

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

Mino’aka Blog -ブライダル情報ブログ-

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

天国に一番近い個人旅行

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

さらば、思うだけ

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

良コレ NEW

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

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

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

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

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

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

または、

固定ページ右側にあるサイドメニューのページタイプの「1カラム(狭い)」、「1カラム(広い)」どちらかを選択。(1カラムはサイドバーが表示されません)

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

それでは本編スタート

ここから先は有料公開です

書いていること

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

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

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の内容など、とても細かく書いてあり、知識のない私でも理解しやすかったです。
    このような素晴らしいブログを書いてくださり本当にありがとうございます。

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

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

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

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

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

  10. みか より:

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

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

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

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

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

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

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

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

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

  11. みか より:

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

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

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

  12. Arisa より:

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

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