当サイト採用!!Cocoonテーマの詳細はコチラ

【Cocoon】コピペで簡単にできる!サイト型トップページの作り方

Cocoonテーマ

無料テーマ「Cocoon」を使っていてこのようなお悩みありませんか?

  1. 過去の記事が埋もれてしまう
  2. カテゴリーごとに表示されていないので見にくい
  3. できる限り初期投資を抑えたい

実はこんなお悩み「サイト型トップページ」にすることで簡単に解決できます!

クマさん
クマさん

でも難しいんでしょ・・・?

キラ
キラ

安心して!

プログラミング知識なくても大丈夫

知識がない初心者さんでも作れるように「コピペOK!作り方徹底解説!」です。

この記事でわかること
  1. サイト型トップページのメリット
  2. 標準機能を使用しない理由
  3. サイト型トップページの作り方

では、早速見ていきましょう。

スポンサーリンク

サイト型トップページの魅力

まずサイト型トップページってどんなもの?という方もいらっしゃると思うので解説していきます。

一般的なブログ型トップページ

何も設定していない場合、カテゴリー関係なく公開順に記事が並べられる形です。

  1. 記事数が増えると何ページにもわたって見にくい
  2. ユーザーの利便性に欠けている

トップページへアクセスした際に、記事を探しにくいと感じてしまうのがブログ型になります。

サイト型トップページ

一方、サイト型トップページはカテゴリーごとに表示することができます。

  1. ユーザーの読みたい記事へのアクセスを簡潔化できる
  2. カテゴリー表示できるので、過去の記事が埋もれにくい

さらに「もっと見る」ボタンでカテゴリー記事を表示することができるので、読みたいカテゴリーへ簡単に閲覧可能です。

そういった意味では、サイト型トップページはユーザーにとって見やすいトップページと言えるでしょう。

ユーザーを意識した記事作成に必要な「SEO」を知りたい方は以下をご覧ください。

 

Cocoonの標準設定でもできる

実は標準設定でもカテゴリーごとに表示することができるようになりました。

クマさん
クマさん

なんでキラはこれを使わないの?

キラ
キラ

気になる?

ならメリットを紹介するね

メリット
  1. 画像や紹介文などが挿入できるので、カスタマイズが豊富になる
  2. 完全にオリジナルなトップページをつくることができる
  3. カテゴリー表示の位置やボタンの装飾を選ぶことができる

標準設定ではフォーマットでのサイト型トップページになるため、自由度が低くなってしまいます。

ですので、固定ページを使用した形にすることで、自由度が高くなりオリジナルのトップページを作ることができます。

固定ページとは

カテゴリーに属さない独立したページ
機能は普段記事を書く「投稿」と同じ

投稿と同じ機能が使えるメリットを使用して、画像を挿入してサイトを紹介したり・・・

プラグインを使用した更新情報を載せることが可能です。

更新情報を載せる方法は以下で解説しておりますので、興味のある方はご覧ください。

自分の好きなカスタマイズをすることができるのが、固定ページを使う強みと言えます。

 

記事を横並び表示にする

サイト型トップページを作るにあたって、記事を横並びにする方法があります。

先程、紹介した画像は1記事ごと縦表示されているものですが、上記のように変更することも可能です。

その場合、CSSの記述が必要になります。

クマさん
クマさん

えっ、CSSなんてわからないよ

キラ
キラ

大丈夫!

下のCSSをまるっとコピペするだけ

追加CSSまたは子テーマのスタイルシートへコピペしてください。

CSS
/* 横並び新着記事順用 */
.new-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}

.new-entry-cards.large-thumb a {
width: 50%;
}

/768px以下/
@media screen and (max-width: 768px){
.new-entry-cards.large-thumb a {
width: 50%;
}
}

/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a {
width: 100%;
}
}

人気記事も同様に横並びで表示する場合は、別途CSSが必要です。

以下のCSSをコピペしてください。

CSS
/* 横並び人気記事順用 */
.popular-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}

.popular-entry-cards.large-thumb a {
width: 50%;
}

/768px以下/
@media screen and (max-width: 768px){
.popular-entry-cards.large-thumb a {
width: 50%;
}
}

/480px以下/
@media screen and (max-width: 480px){
.popular-entry-cards.large-thumb a {
width: 100%;
}
}

お使いのテーマによって、うまく横並びにならない場合もあります。

その場合は、「width: 50%」と記述されている部分の数値を小さくしてみてください。

 

サイト型トップページ型の作り方

「ブロックエディタ」を使う方法と「クラシックエディタ」を使う方法の2通りあります。

ご自身の作業しやすい方をお選びください。

ブロックエディタで作る手順

大まかな流れは以下の通りです。

簡単な作り方の手順
  1. 2つの固定ページ作成
  2. 2カラムの設定
  3. 新着or人気記事作成
  4. カテゴリー記事作成
  5. トップページへ表示設定

クラシックエディタを使用している場合でも、ブロックエディタで作成できます。

上記画像を参考に一度、無効化してください。

  • STEP1 2つの固定ページ作成
    1.新着記事リンク用

    新着記事一覧を表示するリンク先として空白の固定ページを使用します。

    新規作成からタイトルのみ入力して「公開」してください。

    タイトルは「新着記事」にしておくとわかりやすいでしょう。

    キラ
    キラ

    作ったページのURLはコピーしてメモ帳などに張り付けておいてね

    2.トップページ用

    このページで実際に作業し、トップページになるものになります。

    以下の作り方をご覧ください。

  • STEP2 2カラムの設定
    1.タイトル設定

    何のページなのかわかりやすくするために、まずはタイトルを設定しましょう。

    「トップページ」にしておくと、後々わかりやすいです。

    2.カラム選択

    赤丸で囲った「ブロック追加」ボタンを押すと、追加できる項目がたくさん表示されます。

    「カラム」というボタンがあるのでクリックしましょう。

    ない場合は「すべて表示」をクリックすると「デザイン」のカテゴリー内にあります。

    カラムを選択すると以下の画面になります。

    左から2つ目の「50/50」を使用しますので、クリックしましょう。

    すると左右にブロックが表示されますので、これで2カラムの設定は完了です。

  • STEP3 新着or人気記事作成
    1.見出しタイトルの設定

    見出しを使用して、記事上に表示されるタイトルを設定します。

    四角内をクリックすると、追加できる項目が表示されますので「見出し」を選択しましょう。

    ない場合は「すべて表示」をクリックすると「デザイン」のカテゴリー内にあります。

    左側に表示するのは「新着記事」または「人気記事」がおすすめです。

    2.記事表示のコード入力

    記事を表示するためのコードを入力します。

    見出しブロックの下に新たなブロックが自動で追加されています。

    四角内をクリックして「カスタムHTML」を選択しましょう。

    ない場合は「すべて表示」をクリックすると「ウィジェット」のカテゴリー内にあります。

    以下のコードを張り付けてください。

    新着記事
    new_list count="4" type="large_thumb"
    人気記事
    popular_list days="all" rank="0" pv="0" count="4" type="large_thumb" cats="all"

    ※両サイドに[]の括弧を追加してください

    記事を横並びにしない場合は、マーカーの部分は不要!

    このように貼り付けることができましたら、コード入力は完了です。

    補足

    「new_list count=4」の数字は表示したい記事の数を表しており、横並びする場合は偶数で設定してください

    3.リンク先ボタンの作成

    トップページに表示されない過去の記事へのリンク先ボタンを作成します。

    追加ブロックから「ボタン」を選択しましょう。

    2種類のボタンのうち、黒いアイコンがCocoonテーマのボタンなのでこちらを使用します。

    ない場合は「すべて表示」をクリックすると「Cocoonブロック」のカテゴリー内にあります。

    黒枠で「ボタン」と記載されているものが追加されますので、お好きなボタン名を入力してください。

    「配置を変更」から中央寄せにしたほうが見栄え良いです。

    リンク先のURLを入力する項目を表示するため、一番右の「詳細設定」→「設定を表示」をクリックします。

    画面右側に設定画面が表示され、URL入力する欄がありますので、ここに予め作成した「新着記事のURL」を入力しましょう。

    注意

    人気記事の場合はリンク先がないので、人気記事タグ作成が必要(後述参照)

    ボタンを丸くする場合は、●ボタンをクリックすると丸くなります。

    さらに下いくとカラーパレットが表示されますので、お好みの色にボタン色を変更することが可能です。

    デフォルトカラー以外を使用したい場合は、以下を参照してください。

    これで左側の部分は完成になります。

  • STEP4 カテゴリー記事作成
    1.見出しタイトルの設定

    見出しを使用して、記事上に表示されるタイトルを設定します。

    シンプルにカテゴリー名を設定すると良いでしょう。

    2.記事表示のコード入力

    記事を表示するためのコードを入力します。

    カスタムHTMLを挿入し、以下のコードを貼り付けてください。

    カテゴリー記事
    new_list count="4" cats="XX" type=large_thumb children="0"

    ※両サイドに[]の括弧を追加してください

    記事を横並びにしない場合は、マーカーの部分は不要!
    カテゴリーIDの確認方法

    「cats=XX」のXX部分にはカテゴリーIDを入力します。

    カテゴリー一覧を開き、カーソルをカテゴリータイトルへ合わせると、下にURLが表示されます。

    赤丸で囲った部分にID=○○と数字が記載されているので、XXの部分に数字を入力してください。

    「children」は、子カテゴリーを含めて表示するかを意味しています。

    子カテゴリーを含める場合は「1」、含めない場合は「0」と入力します。

    タグで表示する場合

    選んだ記事やおすすめ記事を表示したい場合、あらかじめタグを作成しておくと便利です。

    その際、ショートコードの「cats」の部分は「tags」に変更し、カテゴリー同様IDを入力することで作成できます。

    タグは「投稿」の中にあり、ここから作成します。

    人気記事のリンクを作る際は、ここでご自身で人気記事を選んでタグを作って、そのURLをボタンに入力することで可能です。

    3.リンク先ボタンの作成

    カテゴリーページへのリンク先ボタンを作成しましょう。


    右側のURL入力する欄にカテゴリーURLを入力してください。

    カテゴリーURLの確認方法

    カテゴリー一覧を開き、カテゴリーにカーソルを合わせると4項目表示されます。

    「表示」をクリックしてページを表示し、上部のURLバーからコピーすることができます。

    4.一段目はこれで完成!

    以下のように表示されていたら完成となります。

    ●記事縦1列表示

    ●記事横並び表示

    クマさん
    クマさん

    どっちの表示もいいね〜

    キラ
    キラ

    できたときは嬉しくなるよ

    2段目以降作る場合は、「STEP2」の手順から同様に進めてみてください。

  • STEP5 トップページへ表示設定

    左下の「設定」から「表示設定」をクリックします。

    通常は「ホームページの表示」が「最新の投稿」にチェックがついてますので、下の「固定ページ」にチェックを入れてください。

    すると、作成済固定ページがプルダウン内に表示されますので「トップページ」を選択します。

    注意

    先程作成したページを公開」してないとプルダウンに表示されません

    投稿ページも同様に設定しましょう。

    先程作成した「新着記事」をプルダウンから選択してください。

    最後に「変更を保存」をクリックすると、作成したページがトップページになっています。

    キラ
    キラ

    ここまでがブロックエディタで作る手順だよ

クラシックエディタで作る手順

普段クラシックエディタを使用している方は、こちらのほうがやりやすいかもしれません。

必要なコードなどは先程と一緒なので、割愛して簡単に説明していきます。

  • STEP1 カラムの設定

    「タグ」と記載されたプルダウンを表示します。

    一番上にある「2カラム(1:1)」を選択してください。

    このような画面になりましたら、タイトル・ショートコード・ボタンを作成していきます。

  • STEP2 見出しタイトルの設定

    新着記事または人気記事と入力します。

    段落プルダウンからお好きな見出しを選択しましょう。

  • STEP3 ショートコード入力

    PCの「enter」を押すと改行されます。

    先程紹介したショートコードを貼り付けましょう。

    3種類のコードを紹介したので間違えないようにください。

  • STEP4 ボタン作成

    スタイルプルダウンからお好きなボタンを選択します。

    ボタンが表示されたらボタン名を入力し、中央寄せにしましょう。

    右上にある「リンク挿入/編集」ボタンをクリックして、リンク先入力バーを表示させます。

    ブロックエディタ同様、指定したいリンク先のURLを入力してください。

    クラシックエディタを使用する場合は、このような手順になります。

    注意

    ブロックエディタでできたボタンカスタマイズは、クラシックエディタではできません。

まとめ

自分で作ることによっていろんなカスタマイズができるのが、この固定ページを使った方法の何よりのメリットです。

クマさん
クマさん

やっぱり独自性出すなら大変だけどこの作り方だね

キラ
キラ

途中で紹介したプラグインや画像の挿入もできるのが、固定ページを使ったやり方の最大のメリット!

慣れないうちは手順や操作方法がわからず難しいかもしれませんが、手順さえ抑えることができれば誰でもできます。

もし文章と画像ではわかりにくいという方は、この記事を元に作成した動画もありますので、よかったらご覧ください。

 

なお、ここから少し手間ですが、記載したタイトルを消す作業などがあります。

詳しくは以下の記事に紹介しておりますので、ぜひ参考にしてください。

皆さんもお好みのトップページを作成して、独自性を出してみてはいかがでしょうか。

 

偏頭痛に悩んでいる方へ
おすすめ商品の紹介

パソコン作業を続けていると、眼精疲労によって偏頭痛になることありませんか?

そんな方におすすめな商品はコチラ!

スマホ同様に画面に貼るタイプで、画面保護にもなる一石二鳥の商品です!

偏頭痛持ちの私が、このフィルム一枚で偏頭痛が激減!

ぜひ試してみてください!!

 

ブログを始めたい方へ
お得なキャンペーン情報

当サイトで使用しているレンタルサーバー「エックスサーバー(Xserver)」で

2021年9月30日までの限定!

18周年ありがとうキャンペーン開催しており、iPadやApple Watchなどの豪華商品が当たるチャンス!

また「利用料金20%OFF」や「.comなどの人気ドメインが永久無料」というお得なキャンペーンも実施中です!

キャンペーンの詳細などは、公式サイトをご確認ください。

Cocoonテーマお役立ち情報
スポンサーリンク
キラをフォローする
キラ

2匹のペットと暮らしております。ペットを飼育する上での必要なものや情報などを発信していきます。またサイトカスタマイズにも挑戦しており、作成方法なども公開しております。
「まずは自分から動いてみる!」そして「自分で調べて身につける!」私のモットーです。

キラをフォローする
キラペット.com
タイトルとURLをコピーしました