Cocoonのトップページをサイト型に変える方法【初心者にも簡単】

今回は、Cocoonのトップページをサイト型に変える方法について話します

この記事はこのような人に向けた内容になっています。

Cocoonを使ってブログを運営してるけど、トップページのデザインを変えたいな。簡単に変える方法を知りたい。

ブログを運営している人にかなり利用されている無料テーマのCocoon。デザインがシンプルで非常に素晴らしいテーマです。

しかし、トップページが新着記事を順番に見せているだけなので、初めて見る人にとってはなんだかわかりづらいものがあります。

この記事では、Cocoonのトップページの変更方法、そして記事の最後に細かいカスタマイズの方法を紹介します。

トップページをサイト風にしたい、トップページのカスタマイズする方法を知りたいという人は、この記事を読む価値があるのでぜひ最後までご覧ください。

Cocoonのトップページの変更方法
トップページをサイト型にする手順

Cocoonのトップページの変更方法

まず最初にこの記事は、はまちゃん様の【Cocoon】脱ブログ！固定ページでサイト型トップページにカスタマイズする方法という記事をもとに作成しています。

なので、ぶっちゃけ言えばその記事を見てしまえばすべてわかります。

ですが僕の記事も読んでほしい！ということで、はまちゃん様の記事とは違いシンプルに説明していきます。

実際にトップページを作成したからこそわかる意見も書いてありますので、その点を知りたいという方は当記事を読んでみてください。

また、この記事は、専門的ではなくてもある程度の記事のカスタマイズ方法が分かっている方に向けて発信しています。

HTMLの張り付けって何？という人には、向いていないかもしれないです。

トップページをサイト型にする手順

固定ページにHTMLを張り付けて編集する

次にトップページ用の固定ページを作る必要があります。

流れとしては、固定ページにHTMLを張り付けてサイト型にした後、その固定ページをトップページに設定するという感じです。

まず、固定ページのデザインをサイト型にしましょう。

一からデザインを考えるというのは、なかなかめんどくさいものなので、今回ははまちゃん様の記事にあるHTMLをお借りすることにしましょう。

以下にあるのがはまちゃん様の記事の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”>このカテゴリをもっと読む</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>

これをそのまま固定ページのテキストエディタに張り付けると、ある程度のデザインがすでにできます。

このまま使ってもいいですが、実際に使った立場としてはもう少し簡略化してもいいと思いました。

なので、僕が独自にアレンジしたHTMLを張り付けてもいいと思います。

以下のものが僕がアレンジしたHTMLです。

<h2 style=”text-align: center;”>（ブログタイトルを記入）とは</h2>
ブログの説明～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
<div class=”column-wrap column-2″>
<div class=”column-left”>
<h3 style=”text-align: center;”>新着記事</h3>
<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;”>人気ランキング</h3>
<p style=”text-align: center;”><a class=”btn btn-light-blue btn-m”>ランキングをもっと見る</a></p>

</div>
</div>
<h2 style=”text-align: center;”>カテゴリ別の最新記事</h2>
<div class=”column-wrap column-2″>
<div class=”column-left”>
<h3 style=”text-align: center;”>カテゴリ①</h3>
<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;”>カテゴリ②</h3>
<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;”>カテゴリ③</h3>
<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;”>カテゴリ④</h3>
<p style=”text-align: center;”><a class=”btn btn-light-blue btn-m”><strong>このカテゴリをもっと見る</strong></a></p>

</div>
</div>
<h2>（追加で何か書きたいものがあれば書く）</h2>

どちらを使っても構いません。わかりやすいほうを使ってください。

固定ページのテキストエディタにHTMLを張り付けることができたら、細かなカスタマイズをします。

重要な部分は次のところです。

・新着記事のショートコード
・このカテゴリをもっと見るボタン

このカテゴリをもっと見るボタン

次にこのカテゴリをもっと見るボタンの設定です。

こちらに関しては、ボタンにカテゴリごとのページURLを張り付けるだけでいいので、簡単だと思います。

新着記事を一覧で見たい見せたい場合は、先ほど作った投稿ページ用の固定ページのURLをボタンに張り付けてください。

現時点ではそのボタンをクリックしても、投稿ページは表示されませんが、のちの設定で表示されるようになります。

これで大事な部分の設定はできました。あとは個人で気になるなというデザインを自由に変えていってください。

ビジュアルエディターを使って設定すると、わかりやすいですよ。

ボタンを増やしたり、カテゴリを増やしたりと、自由に変更してくださいね。

トップページにいらないものを非表示にする

ここまで来たらトップページのデザインがある程度サイト風になったはずです。

つぎに、トップページにいらないものを非表示にする設定をします。

トップページにいらないものとは、次のようなものです。

・パンくずリスト
・固定ページのタイトル
・記事上のシェアボタン
・記事の投稿日・更新日
・記事下シェアボタン
・投稿者名

これらを消すには、CSSというものを追加しなくてはいけません。CSSってなに！？という人がいると思いますが、超簡単なので安心してくださいね。

追加するべきCSSも、はまちゃん様の記事から引用させてもらいます。マジありがたいですね。

/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
display: none;
}
/*フロント固定ページのシェアボタンを非表示*/
.home.page .sns-share{
display: none;
}
/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{
display: none;
}
/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
display: none;
}
/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
display: none;
}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
display: none;
}
/*モバイルグローバルメニュー非表示*/
.home.page #navi {
 display: none
}