Cocoonユーザー向け│Topページをサイト型に変える方法解説！永久保存版

ブログの記事が増えてきたので、

最新記事一覧表示からサイト型にTopページを変えてわかりやすくしたい！

こんなニーズにお答えします！

私自身、2020年3月29日にブログ記事50件をきっかけに、
Topページをサイト型に変更したので、その操作方法を交えながら解説したいと思います💡

この記事を参考にすると、

こんな構成のページが作れるようになります！😄

Amazonアソシエイトに中々合格できない人におすすめ👇

では早速いってみましょう💨

cocoonでサイト型のトップページを作るには

大まかな手順は下記の通り

1. 固定ページを作成する
2. 作成した固定ページをトップページに設定する
3. 気になるレイアウトなどを調整する

私のサイトの構成をまとめると大体こんな感じです👇

構成はこれが絶対ではないので自分の作りたい形を作ってみてくださいね！👍

今回の記事では、カテゴリー別表示を行う部分を重点的に取り上げます。

固定ページを作ってみよう

固定ページの新規追加

固定ページを新規作成する場所がわかりません！！

💡左側にある固定ページにカーソルを合わせて新規追加を選びましょう👍

いつもブログの記事を書く時に出てくる画面と同じものが開きました！

このページで作ったものをTopページに乗せていくので、
自分が作りたい完成形のサイト構成を頭の中に思い描いておきましょう👍

どこか、参考になるサイトが有ればそれに近づくように作成すると良いと思います🎵

固定ページに構成を描いていく

私の場合はこのような構成でTopページを作っています(再掲)。

この中で、＜h2＞カテゴリー別記事一覧より下の<h3>タグのところが、
通常のブログを書くときと大きく異る部分だと思います。

このような手順で説明をしていきます👍

カラムの分け方

記事編集画面で、各段落に➕の丸ボタンが左側に出ると思います。

ここをクリックして、一番下の”Cocoonレイアウト”-”2カラム”をクリックしてください。

すると、このような画面が出てくると思います👇

今まで一つの段落だったものが、左右2つに分割されたのが確認できると思います💡

左右それぞれに、自分の作りたいカテゴリーを表示していきましょう！

試しにh3見出しタグでそれぞれを書いてみるとこんな感じです👇

私はこの後に画像を挟んでいますが割愛します。

新着記事タグを使って常に最新の記事が更新されるようにしていきましょう👍

最新記事一覧表示を入れる

最新記事一覧はショートコードの中から選択してください😄

ショートコードの場所は👇

ここをクリックして、最新記事一覧を選択しましょう👇

すると、このようなコードが自動で入力されます😄

あー！！もう横文字とか出てきて無理ぃぃぃ！！

と、嘆きたくなると思いますが、安心してください。

いじるのは2箇所だけですのでこの際、覚えてしまいましょう👍

まず初めに

• new_list count="5"

から説明します。

これは、新着記事を何記事分リストとして表示させますか？という内容です。

つまりこのままのタグでプレビューすると【5件分の記事】が表示されます👇

自分が表示させたい数に合わせてタグの数字を半角数字で入力しましょう😄

カテゴリー別に最新記事を表示する

次にコードをいじるのは

• cats="all"

の部分です😄

ここは、どのカテゴリーの最新記事を取ってきますか？というコードの部分になっているので、
”all”のままになっていると、すべてのカテゴリーで最新のものを拾ってしまいます。

全部のカテゴリーから記事を選ぶから、
最新記事一覧のリストになっているんですね！

前置きが長くなりましたが、この"all"の部分を該当するカテゴリーのID No.にしてあげると、
そのカテゴリーの中から最新記事を取ってきてくれます😄

ID No.って何ーーー！！！？
わーっ！わけわからーん！

カテゴリーのID No.を調べる方法を説明します💡

左側の画面からカテゴリーを選ぶ👇

カテゴリーの画面で、表示させたいカテゴリーの名前にカーソルを合わせると、
下にURLがポップアップされると思います。
(Google Chromeの場合)

こちらのID＝の後ろに数字が書いてあると思います。
この数字をメモしておきましょう💡

ID＝ の後ろの部分に注目！👇

ここでメモした数字を先程の

• cats="all"

のall部分に書き込んでください😄

例えば、

• cats="101"

の用な感じです👍

これをプレビューするとこうなります👇

右半分の記事は料理関係の記事だけになっているのがわかりますでしょうか？

表示件数を変更してボタンを追加する

右半分は各カテゴリー別の記事表示になっているので、
その他の記事もまとめて読んでもらえるように、
”もっと見る >> ”ボタンを追加したいと思います。

この辺は、好みが分かれるので参考程度に御覧ください。

料理タグの表示件数を1件減らして、5件目の枠の部分にボタンを追加したいと思います。

表示件数を5→4に変えるとこうなります👇

このままプレビューをすると…👇

この空いたところにボタンを入れてリンクを設定します👍

➕の丸ボタンから”Cocoonブロック” - "ボタン"を押して、
サイズは中、中央表示にするといい感じに収まると思います。

エディター画面のキャプチャーはこんな感じです👇

この状態でプレビューすると…👇

2カラムに分ける部分の作成は以上になります。

その他の部分も自由に作成してみてください👍

固定ページを公開する

一通り作成が終わったら、右上の

を押してください。

固定ページの新規追加で書いていれば、公開するを押しても、
新規の記事として投稿されたりしませんので心配しないでくださいね！😄

これでTop用の固定ページ作成の手順は終了です！

続いて、固定ページをトップページに設定していきましょう！👍

作成した固定ページをトップページに設定する手順は非常にシンプルです。

左側のツールバーから、

”設定” - ”表示設定”をクリックします。

続いて、固定ページの左側の丸をクリックして、
"ホームページ"のタブから先ほど作成した固定ページを選択してください👇

選び終わったら左下の

を押せば、Topページが晴れて先ほど作成した固定ページに切り替わります！👍

/*トップページのカテゴリ別最新記事の幅固定*/
.widget-entry-cards .widget-entry-card-content{
padding-top:0.5em;
height:100px; 
}
/*ここまで*/

カスタムCSSに上記タグを貼り付けたらこうなります👇

ここまでやれば、

自分の気に入ったサイト型のTopページがある程度完成しているはず！✨

最後に

Cocoonユーザー向け、サイト型Topページの作り方はいかがでしたでしょうか？

手順の振り返りになりますが、

• 固定ページを作る
• 作った固定ページを"設定" - "表示設定"から
  ホームページに設定する

のシンプル２Stepで設定可能です。

また、2カラムを使った分割表示や、最新記事一覧から、
各カテゴリー別の最新記事を表示する方法まで紹介しました💡

ちょっとだけ、ややこしかったかもしれませんが、
これでサイト型のページをあなたも作れます！✨
ぜひ、参考にしてみてください！👍

<今回の一言>

そうだ！サイト型のTopページにしよう！

Amazonアソシエイトに合格できない人向けのPick UP記事👇

＼ その他ブログ関連記事はコチラからどうぞ👇 ／

ブログ関連記事を見る

Topに戻る