その他

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

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

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

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

 

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

注意ポイント

2020年4月5日現在

テーマをCocoonからAFFINGER に変更したため、
本サイトのTopページはこの記事の構成と異なりますm(_ _)m

 

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

たなぱぱブログトップページ

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

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

Amazonアソシエイト合格法
【2020年最新】Amazonアソシエイト審査合格方法は「裏技が楽」

ブログ始めたから広告貼りたいけど、Amazonアソシエイトに合格できない!!審査に何度も落ちる!! こんな悩みにお答えします。 結論から申し上げると、正攻法のAmazon公式から審査申し込みをせず、も ...

続きを見る

記事の内容

  • サイト型トップページの大まかな作り方手順紹介
  • 各手順の詳細説明
  • ボタン配置がずれる場合の対処法説明

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

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

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

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

 

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

参考

  • あいさつ-プロフィール
    • <h2>人気記事
    • <h2>カテゴリー別記事一覧
      • <h3>新着記事
      • <h3>料理
      • <h3>ビジネス
      • <h3>生活関係
      • <h3>子育て
      • <h3>その他
    • <h2>Pick UP記事
    • <h2>お知らせ

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

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

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

固定ページの新規追加

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

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

固定ページから新規追加を選ぶ
いつもブログの記事を書く時に出てくる画面と同じものが開きました!

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

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

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

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

(再掲)

  • あいさつ-プロフィール
    • <h2>人気記事
    • <h2>カテゴリー別記事一覧
      • <h3>新着記事
      • <h3>料理
      • <h3>ビジネス
      • <h3>生活関係
      • <h3>子育て
      • <h3>その他
    • <h2>Pick UP記事
    • <h2>お知らせ

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

手順の大まかな流れ

  1. カラムの分け方の説明
  2. 最新記事一覧表示を入れる
  3. カテゴリー別の表示にする
  4. 表示件数を変更する

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

カラムの分け方

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

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

Cocoonレイアウトから2カラムを選ぶ

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

2カラムを選択した時の表示

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

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

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

2カラムにh3タグを記載するとこうなる

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

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

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

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

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

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

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

ショートコードの中に新着記事一覧のコードが入っている

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

新着記事一覧のコード概要図

 

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

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

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

まず初めに

  • new_list count="5"

から説明します。

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

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

デフォルトのまま新着記事一覧を使うと高表示される

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

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

次にコードをいじるのは

  • cats="all"

の部分です😄

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

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

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

ID No.って何ーーー!!!?
わーっ!わけわからーん!

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

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

カテゴリーの場所

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

カテゴリーIDの見かた

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

ID= の後ろの部分に注目!👇

カテゴリーIDの見かた2

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

  • cats="all"

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

例えば、

  • cats="101"

の用な感じです👍

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

カテゴリーを絞った新着記事一覧を使うとこうなる

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

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

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

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

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

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

表示件数を減らす場合のコードはこの様になる

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

表示が1件減りました

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

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

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

ボタンを追加します

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

もっと見るが追加できました

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

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

固定ページを公開する

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

公開する

を押してください。

ポイント

目次と読む時間の表示は非表示にしておく事を強くおすすめします!

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

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

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

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

左側のツールバーから、

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

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

固定ページの選び方

選び終わったら左下の

変更を保存

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

参考

もしサムネイルのサイズが異る関係で、
2カラムの【もっと見る >> 】ボタンの高さがずれる場合は、
下記に示す、CSSを固定ページのカスタムCSSにコピペしてみてください。
(※雑に言うと行間を調整するCSSです)

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

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

カスタムCSS貼り付け

 

ここまでやれば、

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

 

最後に

Summary

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

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

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

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

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

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

<今回の一言>

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

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

Amazonアソシエイト合格法
【2020年最新】Amazonアソシエイト審査合格方法は「裏技が楽」

ブログ始めたから広告貼りたいけど、Amazonアソシエイトに合格できない!!審査に何度も落ちる!! こんな悩みにお答えします。 結論から申し上げると、正攻法のAmazon公式から審査申し込みをせず、も ...

続きを見る

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

ブログ関連記事を見る


Topに戻る

\この記事はいかがでしたか?/

-その他
-, , , ,

© 2021 たなぱぱブログ(たなちゅーぱぱBlog) Powered by AFFINGER5