【cocoon】初心者向けサイト型トップページのカスタマイズ方法

cocoonを使っているけど、サイト型にカスタマイズしてみたい

こんな悩みを解決します。

ブログを始めて約2か月の初心者による、初心者のためのトップページの作り方を公開します！

※変更前後10日間比較したところ、滞在率が約2.4倍あがりました

cocoonはデフォルトのまま記事更新しても、前の記事が埋もれていき、前の記事は読まれにくくなってしまいます。

せっかくカテゴリを設定していても、結局一覧に埋まってしまうのではあまり意味をなさないですよね。

そこで今回はカテゴリ毎に分けて表示されるサイト型の作り方を解説していきます。

デザインも丸パクリしたい！って方は本当にコピペでいいですし、少し変えたいという方なら色や文言を変えたりしてみてください。

おそらく自分で作ってると仕組みがなんとなくわかってきて、自分でアレンジを加えたくなると思います(笑)

それではトップページの作り方を解説いきたいと思います！

【追記】現在当サイトはaffingerというテーマに切り替わっています。そのため当ブログのデザインとは異なりますが、cocoonのサイト型は作れますのでご安心ください。

cocoonでトップページをサイト型に変えるメリット
cocoonでサイト型へカスタマイズする下準備
cocoonでサイト型にカスタマイズする方法
cocoonをサイト型にカスタマイズする際の参考記事

cocoonでトップページをサイト型に変えるメリット

トップページをサイト型に変えるメリットとして以下のことがあげられます。

滞在率が上がる
サイトの見栄えが良くなる
読んでほしい記事が見逃されにくくなる

冒頭でも述べましたが、初心者でテーマをcocoonにしてブログ始めたばかりという方は、記事が一覧で並んでいる状態だと思います。

記事一覧が並んでいるだけの状態にしておくと、良い記事を以前に書いていたとしても見逃されている可能性があります。

そこで記事一覧の状態から、今回紹介するカテゴリごとに分けたりするサイト型にしたり、ヘッダー下に画像付き記事を表示させたりすることで、自分の読んでほしい記事を気づかれやすくすることができます。

ヘッダー下に画像付き記事を表示させる方法は以下の記事をご参照ください。

: 【cocoon】ヘッダー下にアイキャッチ画像付き記事を表示する方法

続きを見る

トップページをサイト型にしたことで滞在率が約2.4倍に上がりました。

トップページを変更前後10日間を比較したデータは以下の通りです。

cocoonでサイト型へカスタマイズする下準備

準備というほどのことではないのですが、cocoon使用者によっては編集画面が異なる可能性があるので、まずはそちらから説明します。

まず記事編集画面を開いてみて下さい。

以下のような画面の方はそのままで大丈夫ですので、この説明は飛ばして「トップページ作成」に進んでください。

以下のような画面の方は少し設定を変更します。

変更は簡単に元に戻せるので、この作る時だけでも変更してみてください。

まずダッシュボードの「cocoon設定」を選択し、「エディター」をクリックしてください。

「Gutenbergエディターを有効にする」のチェックを外し、「変更をまとめて保存」をクリックしてください。

以上で準備は完成です。

記事編集画面に戻ると編集画面が変わっているかと思います。

ではそのままトップページの変更作業をしていきましょう！

cocoonでサイト型にカスタマイズする方法

トップページを作るざっくりとした手順は以下の通りです。

（※単語の意味がわからなくてもこのサイトで説明する通りやっていただければとりあえず作れますので安心してください！）

固定ページの作成
HTMLコードをコピペ
コードの書き換え
ボタンのリンクにURLを挿入
固定ページをトップページに設定する

※もしかしたら設定しているスキンによってデザインが筆者のデザインと多少変わってくる可能性もあります。筆者は『モダンブラック／作者：アオイ』のスキンを使っています。※現在さらにアレンジを加えているためスキンは変わっています。お好みのスキンを試してみてください。

固定ページの作成

ダッシュボードの「固定ページ」を選択し、「新規追加」をクリック。

「ビジュアル」から「テキスト」に切り替える。

固定ページのタイトルにはトップページと入力しておきます。

HTMLコードをコピペ

以下のHTMLコードを「テキスト」に貼り付ける。

画像下部にコピペ用HTMLコードがあります。

下記コード内にある★★★を消してから「テキスト」に貼り付けてください！

<h3 class="sticky st-red" style="text-align: center;">ー 新着記事 ー</h3>
<p style="text-align: center;"> <span class="marker-under"><strong>【全記事が新しい順位並んでます】</strong></span></p>
<strong>[★★★new_list count=3 type=border_square cats=all children=0 post_type=post]</strong>
<p style="text-align: center;"><span class="btn-wrap btn-wrap-orange btn-wrap-m"><a href="http://全記事のURL" target="_blank">もっと読む</a></span></p>

<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;">ー ① ー</h3>
<p style="text-align: center;"> <span class="marker-under"><strong>【①は○○なカテゴリーです】</strong></span></p>
<strong>[★★★new_list count=5 type=border_square cats=■ children=0 post_type=post]</strong>
<p style="text-align: center;"><span class="btn-wrap btn-wrap-orange btn-wrap-m"><a href="http://カテゴリー①のURL" target="_blank">もっと読む</a></span></p>

</div>
<div class="column-right">
<h3 style="text-align: center;">ー ② ー</h3>
<p style="text-align: center;"> <span class="marker-under"><strong>【②は○○なカテゴリーです】</strong></span></p>
<strong>[★★★new_list count=5 type=border_square cats=■ children=0 post_type=post]</strong>
<p style="text-align: center;"><span class="btn-wrap btn-wrap-orange btn-wrap-m"><a href="http://カテゴリー②のURL" target="_blank">もっと読む</a></span></p>

</div>
</div>
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;">ー ③ ー</h3>
<p style="text-align: center;"><span class="marker-under"><strong>【③は○○なカテゴリーです】</strong></span></p>
<strong>[★★★new_list count=5 type=border_square cats=■ children=0 post_type=post]</strong>
<p style="text-align: center;"><span class="btn-wrap btn-wrap-orange btn-wrap-m"><a href="http://カテゴリー③のURL" target="_blank">もっと読む</a></span></p>

</div>
<div class="column-right">
<h3 style="text-align: center;">ー ④ ー</h3>
<p style="text-align: center;"><span class="marker-under"><strong>【④は○○なカテゴリーです】</strong></span></p>
<strong>[★★★new_list count=5 type=border_square cats=■ children=0 post_type=post]</strong>
<p style="text-align: center;"><span class="btn-wrap btn-wrap-orange btn-wrap-m"><a href="http://カテゴリー④のURL" target="_blank">もっと読む</a></span></p>

</div>
</div>

「テキスト」から「ビジュアル」に戻すと以下のような画面になっているかと思います。

今回の配置は上に見出しとして一つ、下に連結したカラムが二つとなっています。

合計5つのカテゴリーに分けられています。

~~筆者のトップページを参考にしていただくのが分かりやすいかと思います。~~（※現在affingerに代わっているため参考にできません）

もしも上の見出しはいらなく、４つのカテゴリー配置がいいという場合は、青丸で囲ったHTMLコード（1~4行目）を切り取ってから貼り付けてください。

ビジュアル画面のままで構いませんので、カテゴリ名やカテゴリ説明など日本語のところを入力していきます。

入力した参考画面がこちら。

コードの書き換え

次に謎の英語のコードのところを入力していきます。

それぞれのカテゴリーに以下のように赤枠で囲んだ中に英語が並んでいるのが分かると思います。

この英語のコードは、記事を何件表示させるか、どのカテゴリーの記事を抜粋して表示するか、記事を表示するデザインはどうするかなどを決めるコードです。

なのでそれぞれに意味があるコードで、黄色と青の下線で分けられるようそれぞれ単語になっています。

それぞれの単語の＝のあとの○に該当する数値を入力します。

コードの単語と実際に筆者が○に入れてる数値やワードを簡単に解説します。

○に入れる数値やワードによりカスタマイズ可能なので、詳しくはcocoon作成者わいひらさんの記事をご参照ください。

count=○は、表示する記事数を決めるコードで、○に表示させたい数値を入力すると、入力した数値分の記事が表示されます。

筆者は新着記事はcount=3、カテゴリごとの記事はcount=5と入力しています。

type=○は、記事を表示する際の枠線の種類を決めるコードで、わいひらさんの記事に色々種類があるのでお好みで選んでください。。

筆者はtype=border_squareと入力しています。

cats=○は、カテゴリを抜粋するコードで、○にカテゴリの数値を入力すると、抜粋されたカテゴリの全記事が表示されます。

○にallと入力すると全カテゴリ抜粋=全記事になります。

筆者は新着記事はcats=all、カテゴリ分けのものはカテゴリに合った数値を見つけて入力しています。

※わかりにくいかと思うので、下記に数値の見つけ方を記載しています。

cats=○に関して、筆者がカスタマイズ時に少しわかりづらかった点があったのでここで書いておきます。

わかりづらかった点は、catsのカテゴリ分けの数値はどこにあるのかというところ。

カテゴリ分けの数値の見つけ方を紹介しますが、知ってるよという方は飛ばしていただいて構いません。

先ほどのcocoonの記事の記事には以下のような説明があります。

カテゴリIDは、カテゴリ設定画面のURL（tag_ID）から取得してください。

引用：新着記事一覧を表示するショートコードの利用方法

このtag_ID=3がどこにあるのかを説明していきます。

まずダッシュボードから「投稿」を選択し、「カテゴリー」をクリック。

カテゴリー分けしたいカテゴリーにカーソルを合わせると、画面左下にURLが浮かび上がってきます。

そこにtag_ID=○がでてきます（下の画面の場合、カテゴリー1にカーソルを合わせるとtag_ID=2と浮かび上がっています）。

この数値を先ほどのcats=○に入力します。

入力した画面がこちら。

引き続き、コードの説明に戻ります。

children=○は、子カテゴリの内容を含めて表示するかを決めるコードです。

筆者はchildren=０と入力しています。

post_type=○は、表示する投稿タイプを選択するコードです。

筆者はpost_type=0と入力しています。

詳しい内容はわいひらさんの記事に載っています。

自分なりにアレンジを加えたいと思ったらわいひらさんの記事を参考にしてみてください。

~~とりあえず筆者と同じにしてやるよ！って方はまずは真似してみてください(笑)~~

以上でひとまずトップページの見た目は完成しました。

一度「プレビュー」で見てみてください。

以下の画像のようになっているのではないでしょうか？

これで見た目は完成しましたが、まだ「もっと読む」のボタンのリンクにURLが挿入できていません。

URLを挿入したら見た目は完成ですので、頑張りましょう！

ボタンのリンクにURLを挿入

次にボタンのリンクにURLを挿入していきます。

ボタンとは、オレンジ色の「もっと読む」のところです。

一番上に配置している全記事のURLと、下の４つのカテゴリごとのURLは探し方が違うので別々に説明します。

まずは一番上の全記事のURLを見つける方から説明します。

もし記事一覧は載せないからいいよという方は飛ばしてください。

全記事のURLの探し方

まず固定ページを新しく追加します。

タイトルは何も入力しなくていいですが、ここではわかりやすいように記事一覧と入力します。

タイトル入力したら「公開」をクリックします。

次に作成した固定ページに記事一覧を表示する設定をします。

「設定」にカーソルを合わせ、「表示設定」をクリックします。

「固定ページ」に黒ぽちを合わせ、「投稿ページ」にカーソルを合わせ、さきほど作成した記事一覧を選択します。

選択したら「変更を保存」をクリックします。

以上で記事一覧URLが完成しました。

次に記事一覧URLをコピペするために「固定ページ一覧」の「記事一覧ー投稿ページ」にカーソルを合わせ、「表示」をクリックします。

「表示」をクリックしたら記事一覧のページに飛んだかと思います。

とんだページのURLをコピーします。

コピーしたURLをボタンに挿入していきます。

「もっと読む」にカーソルを合わせ、「鉛筆マーク」をクリック。

クリックしたらコピーしたURLを貼り付け、「矢印」をクリックして完了。

これで記事一覧のリンク完成です。

カテゴリー毎のURLの探し方

次はカテゴリーごとのリンクにURLを挿入してきます。

まずは「投稿」にカーソルを合わせ、「カテゴリー」をクリックしてください。

選びたいカテゴリーにカーソルを合わせ、「表示」をクリックします。

そうすると選んだカテゴリーのページにとんでいるかと思います。

とんだページのURLをコピーします。

コピーしたURLをボタンに挿入していきます。

「もっと読む」にカーソルを合わせ、「鉛筆マーク」をクリック。

クリックしたらコピーしたURLを貼り付け、「矢印」をクリックして完了。

この作業を４つのカテゴリごとに繰り返してください。

これで完成！

といいたいところですが、この固定ページをトップページへと反映させなければなりません。

あと少し、頑張りましょう！

固定ページに必要ないものをの除く

トップページに固定ページのタイトル名や目次が表示されてしまっていたら台無しになってしまいますよね。

（おそらく見出しのh2を使用しなければ目次は表示されない？ですが、自分でアレンジしたときなどに困らないよう書いておきます。）

台無しにならないよう、固定ページに必要ないものをの除く作業を解説していきます。

画像下部にあるHTMLコードをコピーし「カスタムCSS」に貼り付けます。

（※カスタムCSSとは、今作成している固定ページ編集画面を下の方にスクロールしていくと見つかります。）

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

上記のコードに除きたい項目毎に日本語で解説が書いてありますが、反映されて欲しくないものだけを選ぶといいかと思います。

例としてフロント固定ページの「タイトル」「シェアボタン」「登校日」をコピペした際のビフォーアフターをプレビュー画面でお見せします。

before（カスタムCSS未入力）