【Cocoonカスタマイズ】TOPページをコピペカスタマイズでおしゃれにしよう！

この記事は 約10 分で読めます。

「TOPページからの離脱率が多すぎる。」
「見たい記事を探すのが大変だ。」

そういったお悩みを抱えている方はまず、
TOPページをカスタマイズすることを検討してみてください。

サイト内の情報が整理されていれば、
ユーザーは興味のある記事を見つけやすくなります。

せんちゃん

せっかく良質な記事を作成しても読まれないともったいない！

今回は、プラグインなしで
トップページのカスタマイズ手順を解説していきます。
必要に応じてカスタマイズしてみてください！

TOPページの作り方
まとめ

TOPページの作り方

まず、作り方の解説から。

TOPページをカスタマイズするなら
固定ページをTOPページとして表示させる方法が簡単です。

カスタマイズ手順は、

新規固定ページを作成
CSSをコピー＆ペースト
微調整
TOPページに表示

です。

手順を解説する前に、
何を表示すればいいか解説していきます。

TOPページに表示したいコンテンツ

まず、トップページに表示させるコンテンツを考える必要があります。

一般的には、

サイト情報：どんなサイトか説明
運営者情報：サイトの運営者
コンテンツ：最新、新着、人気記事などサイト内の記事紹介
サービス内容：提供するサービスの情報
SNS情報：Twitter、Instagramなどのアカウント情報

を表示しておけば問題ないでしょう。

STEP1:新規固定ページを作成

新たな固定ページを追加します。
ダッシュボード→固定ページ→新規追加

追加できたら、

STEP2:HTMLをコピー＆ペースト

下記、コードを固定ページのコードエディタに張り付けてください。

<h2 style="text-align: center;">『ブログタイトル』とは</h2>
<p style="text-align: center;"><strong><span class="red">（ブログに合った画像）</span></strong></p>
ブログの説明欄〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
<p style="text-align: center;"><a class="btn btn-light-blue btn-m">●●をチェック</a></p>
<br>
<h2 style="text-align: center;">カテゴリ別の最新記事</h2>
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ①</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
ショートコード
<p style="text-align: center;"><a class="btn btn-light-blue btn-m" href="ボタンのリンク先">このカテゴリをもっと読む</a></p>
</div>
<div class="column-right">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ②</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
ショートコード
<p style="text-align: center;"><a class="btn btn-light-blue btn-m" href="ボタンのリンク先">このカテゴリをもっと読む</a></p>
</div>
</div>
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ③</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
ショートコード
<p style="text-align: center;"><a class="btn btn-light-blue btn-m" href="ボタンのリンク先">このカテゴリをもっと読む</a></p>
</div>
<div class="column-right">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ④</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
ショートコード
<p style="text-align: center;"><a class="btn btn-light-blue btn-m" href="ボタンのリンク先">このカテゴリをもっと読む</a></p>
</div>
</div>
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ⑤</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
ショートコード
<p style="text-align: center;"><a class="btn btn-light-blue btn-m" href="ボタンのリンク先">このカテゴリをもっと読む</a></p>
</div>
<div class="column-right">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ⑥</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
ショートコード
<p style="text-align: center;"><a class="btn btn-light-blue btn-m" href="ボタンのリンク先">このカテゴリをもっと読む</a></p>
</div>
</div>
<h2 style="text-align: center;"><strong><span style="font-size: 24px;">お知らせ</span></strong></h2>
<div class="column-wrap column-2">
<div class="column-left">プロフィール</div>
<div class="column-right">
<h3 style="text-align: center;">お知らせ①</h3>
内容〜〜〜〜
</div>
</div>
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;">お知らせ②</h3>
内容〜〜〜〜〜
</div>
<div class="column-right">
<h3 style="text-align: center;">お知らせ③</h3>
内容〜〜〜〜〜
</div>
</div>