【必見】おすすめワードプレステーマCocoonでサイト型トップページにカスタマイズ手順公開！

【無料】おすすめ厳選ワードプレスのテーマ、cocoon！

ワードプレスのテーマ多すぎて悩んでませんか？ どのようなことに注意して選べば良いかポイントを絞って説明しています。 さらに最強のテーマも教えちゃいます。

goodgame.tokyo

2019.05.31

ワードプレスのテーマで以前紹介させていただきましたCocoonですが、どの無料テーマもトップページがワンパターンでつまらないと思っている方は少なくありません。

そこで、トップページをサイト型のトップページにしたら面白いと思い変更方法を紹介します。

やり方は簡単です。

コピペをするだけで、再現可能です。

サイト型にするメリット

一般的なワードプレスの無料テーマを選ぶと、最新記事が順番に表示されるものが多いです。

特化型のブログであればそれでも良いのですが、雑記のブログになるとせっかく見に来てくれた読者様が、目的の記事を見つける事ができずに、諦めてしまう事態が発生します。

そのような事態を避けるためにトップページをサイト型に仕様変更することをお勧めします。

では実際に見てみましょう。

よくあるトップページ

サイト型に変更したトップページ

比較

上記のページを比較してみるとわかるのですが、よくあるトップページにおいては、カテゴリーが固定されている特化型であれば特に気にならないのですが、カテゴリーが複数ある場合、記事が混在して見にくくなってしまいます。

その点サイト型にすると、カテゴリー別にそれぞれの人気記事や新着記事を表示する事ができます。

実際どちらの方が見やすいと思いますか？

僕は後者の方が圧倒的に見やすいと考えるので変更しました。

注意点として、この変更をする事ができるのはcocoonだからです。

他のテーマを使っているのであれば、少し大変かもしれないですがテーマの変更からはじめてください。

どうしてもcocoonは使いたくないという方のためにPage Builder by SiteOriginというプラグインがあるので、こちらを使うと変更ができなくはありません。

しかし、cocoonには元々実装されているのでこちらのプラグインを入れる必要はありません。

cocoonって優秀だと思いませんか？

トップページの変更方法

では実際にどうすば変更する事ができるのかが重要なポイントです。

僕が参考にしたサイトがこちらです。

【Cocoon】脱ブログ！固定ページでサイト型トップページにカスタマイズする方法

『これからはCocoonが天に立つ』こう言い放ちWordPressテーマ界に殴り込みをかけたCocoon（コクーン）。ブロガーにとっても衝撃で、無料のワードプレステーマとしては圧倒的な存在感を示しました。もちろん、僕も機能とデザインに惚れ込

wakuwaku-keigo.com

正直僕ならここまで公開する勇気はありませんが、本当に全て公開しています！

ポイントだけ説明すると、まず

赤枠の固定ページから新規追加を行い

テキストにクリック後下記コードをそのまま貼り付けてください。

<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”>このカテゴリをもっと読む</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”>このカテゴリをもっと読む</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”>このカテゴリをもっと読む</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”>このカテゴリをもっと読む</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”>このカテゴリをもっと読む</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”>このカテゴリをもっと読む</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>

最後にあなたのサイトに合うように多少の変更を加えるだけで一気にトップページが整理できます。

めちゃくちゃ簡単だと思いませんか？

このコード普通に有料級だと思いました。