【Cocoon簡単設定】ブログのサイト型トップページの作り方

【Cocoon簡単設定】ブログのサイト型トップページの作り方ブログ

ブログの無料テーマCocoonでのサイト型トップページ作り方図解ご紹介します。

  

従来のブログ型トップページでは、トップページに新着記事が1列に並ぶだけです。

そのような表示では過去の記事が埋もれることになります。

ユーザーの回遊率が下がる大きな要因になります。

  

サイト型トップページにすることにより、ブログの特徴をアピールすることができます。

また、ユーザーにとって、知りたい情報が調べやすいという特徴があります。

  

サイト型トップページのメリット

★ブログの特徴がアピールできる

★知りたい情報が調べやすい

★回遊率が上がる

★過去の記事が埋もれない

  

サイト型トップページとは、例えばこのような配置のトップページのことです。

  

  

こような雰囲気のサイト型トップページの作り方をご紹介します。

慣れてくればご自身でカスタムできます。

初めての方は、手順通りに一度作ってみてください。

  

また、当サイトは無料テーマCocoonを使用しています。

ご紹介はCocoonでの設定方法になります。

  

【Cocoon設定】サイト型トップページのブログ配置例

今回ご紹介するサイト型ブログのトップページ配置は以下です。

この記事ではメインの配置をご紹介します。

  

  

トップ読んで欲しい記事を持ってきています。

この場所には、単体記事だけではなく、カテゴリーを持ってきてもいいかもしれません。

  

次にアイキャッチ画像です。

ここはブログの紹介など、ブログの全体像が分かるものがいいと思います。

キャッチコピーや簡単な紹介文でもいいと思います。

  

次に広告です。

人によっては、トップページの上位に広告を貼らないほうがいいという人もいます。

しかし、広告は必ず目に留まる位置になければ意味がありません。

  

大事な収入源になりますので、私はこの位置に置いています。

実際に収益は上がっており、訪問者数も増えています。

間違いない配置だと思います。

  

その下に最新の更新情報です。

さらに画像付きの新着情報と人気記事を配置しました。

2カラムと言って、横2列で表示しています。

  

その下に、「トグルボックス」を使って記事一覧を配置しました。

記事一覧は長くなるため、「トグルボックス」を使って隠すことをお勧めします。

  

更にその下に、3カラムカテゴリーを表示しました。

その下に、再度帯付きのおすすめ記事プロフィールを設置しました。

  

最後にタグ検索です。

慣れれば、この配置も簡単に変更できるようになります。

まずは順番通りにやってみてください。

  

【Cocoon手順1】サイト型トップページで更新情報を表示

更新情報を「NEW」などの表記と共に表示するには、プラグインを使用します。

What’s New Generator」というプラグインを使用します。

  

検索画面に「What’s New Generator」を入力して検索します。

今すぐインストール」を押して、有効化してください。

  

  

インストールして有効化すると、設定に「What’s New設定」と出ると思います。

  

  

ショートコードを後ほど使用しますが、覚えていなくても大丈夫です。

タイトルはお好きなものにしてください。

私は「更新情報」にしました。

  

タイトルタグ必ずh2を選んでください。

表示するコンテンツは「投稿」、表示順序は「公開日順」を選びます。

  

表示件数はお好みでどうぞ。

私はすぐ下に新着情報を出す予定ですので、3件にしました。

  

NEWマークの表示期間もお好きなものをどうぞ。

毎日更新など、更新頻度が高い人は期間を短くした方がいいと思います。

NEWマークをつけるに✅を入れると、表示されます。

  

  

一番下のプレビュー画面から確認ができます。

問題なければ「変更を保存」を押します。

  

以上で、プレビューのような更新情報が表示されるようになりました。

  

  

【Cocoon手順2】固定ページ(新着記事一覧・人気記事一覧)の作成

  

固定ページ新規作成を押してください。

  

  

タイトルは分かりやすく「新着記事」にします。

他には何もせず、「公開」ボタンを押してください。

  

この固定ページは、後ほど新着記事一覧を表示するときに使います。

この時点では何も表示されない固定ページです。

同じ要領で人気記事の固定ページも作成します。

  

  

人気記事にはショートコードを入力します。

下記をコピーして貼り付けてください。

  

そのままコピーして貼り付け

[popular_list days="all" rank="1" pv="0" count="20" bold="1" type="default" cats="all"]

  

ショートコードの意味は以下です。

  

CSSの意味

✅popular_list

人気記事

✅days=”all”

ランキングの範囲(全ての日)

直近1週間を指定する場合は”7″

✅rank=”1″

ランキングの数字表示(無しの場合”0″)

✅pv=”0″

PV数表示無し(有りの場合”1″)

✅count=”20″

ランキング表示数(20位まで)

✅bold=”1″

タイトル太文字(細文字は”0″)

✅type=”default”

表示タイプ

✅cats=”all”

表示する記事の範囲(全ての記事)

カテゴリーごとに指定して表示も可能

  

人気記事も作成が終わったら「公開」してください。

  

【Cocoon手順3】固定ページ(トップページ)の作成

更新情報の作成

  

先ほど同様、固定ページ新規作成を押してください。

  

  

タイトルは分かりやすく「トップページ」とします。

アイキャッチ画像と広告設定は後ほどします。

  

まずは「更新情報」の設定です。

最初にh2見出しで「更新情報」と入れてください。

  

次に「+」ボタンを押します。

さらに「すべて表示」を選びます。

  

  

ブロック」の「ウィジェット」から「ショートコード」を選びます。

  

  

ここで先ほどのショートコードを使用します。

  

そのままコピーして貼り付け

[[showwhatsnew]]

  

そのままコピーして貼り付けてください。

これで更新情報が表示されます。

  

新着記事・人気記事の作成(2カラム作成)

  

さらに追加していきます。

再度「+」ボタンを押してください。

  

  

すべて表示」から「デザイン」にある「カラム」を選びます。

  

  

ここでは、2列表示にしたいので「50/50」を選びます。

  

  

2列になったのを確認したら、「+」ボタンを押し、「段落」を選びます。

  

  

新着記事」と入力し、「見出し」ボタンを選択します。

  

  

H2見出し」になっているのを確認して、下の行へカーソルを移動します。

  

  

そこへショートコードを貼り付けます。

そのまま貼り付ければCocoonがショートコードと認識します。

  

そのままコピーして貼り付け

[new_list count="5" type="default" cats="all" bold="1" children="0" post_type="post"]

  

ショートコードの意味は下記です。

  

CSSの意味

✅new_list

新着記事

✅count=”5″

表示数(5記事)

✅type=”default”

記事の表示タイプ(デフォルト)

✅cats=”all”

表示する記事の範囲(全ての記事)

✅bold=”1″

タイトル太文字(細文字は”0″)

✅children=”0″

子カテゴリーを含めない(含める場合”1″)

✅post_type=”post”

時系列で投稿を並べる

  

  

次にショートコードの枠にカーソルを当てます。

すると「+」ボタンが現れるので、クリックします。

下の「+」ボタンは改行されてしまうので、間違えないでください。

  

  

cocoonブロック」から「ボタン」を選びます。

  

  

もしボタンが上に設定されてしまったら、↓へ下げてください

きちんと「ボタン」マークが下に表示されていたら何もしなくていいです。

  

  

「ボタン」にカーソルを合わせると編集できます。

新着記事をもっと見る」などに変更してください。

  

  

配置を変更」で「中央揃え」を選択します。

  

  

追加設定を表示」を押すと、右に設定画面が開きます。

ボタン表示カラー変更することができます。

  

お好みで変更してください。

今回は「円形にする」を設定しました。

  

  

こちらの画面だと色が変わっていませんが、プレビューで見ると変わっています

ご自身のブログに合うカラーを選んでください。

  

  

作業中のページの他にもう1ページ開きます。

WordPressのロゴ部分右クリックし、「新しいタブで開く」をクリックしてください。

  

  

新しく開いたページで作業します。

固定ページ一覧から先ほど作成した「新着記事」を選びます。

  

一番右の「表示」にカーソルを合わせて右クリックします。

リンクのアドレスをコピーしてください。

  

  

コピーが済んだら、先ほどの画面に戻ります。

URL部分に貼り付けてください。

  

以上で新着記事の完成です。

念のためプレビュー画面で確認してください。

  

新着記事のボタンをクリックしてもまだ表示されません

これは後から設定しますので、問題ありません。

  

次に右側の人気記事を作成します。

流れは新着記事と全く同じです。

  

  

右側「+」ボタンからスタートしてください。

  

人気記事ショートコードは以下です。

  

そのままコピーして貼り付け

[popular_list days="all" rank="1" pv="0" count="5" bold="1" type="default" cats="all"]

  

ボタンのURLの入力も先ほどの新着記事と同様です。

【手順2】で作った人気記事のURLを貼り付けてください。

  

完成したらプレビューで確認してください。

  

記事一覧の作成

続いて記事一覧を作成します。

  

  

「+」ボタンを押し、「cocoonブロック」の「トグルボックス」を選択します。

  

  

タイトルを「記事一覧」に変更し、ショートコードを貼り付けます。

  

そのままコピーして貼り付け

[sitemap page=0]

  

記事一覧は以上で完成です。

プレビューで確認してください。

  

3列表示(3カラム)のカテゴリー作成

次に3カラムカテゴリーを表示します。

Cocoon3カラム作成するのは先ほどの2カラム同様に簡単です。

  

  

先ほどの2カラムでは「50/50」を選びましたが、3カラムでは「33/33/33」を選びます。

  

  

それぞれ「+」ボタンからスタートします。

要領は2カラムの時と全く同じです。

  

段落⇒カテゴリータイトル入力⇒見出し

見出しの入力が終わったら、下記ショートコードを入力します。

  

コピーして貼り付け○○の部分にカテゴリーIDを挿入

[new_list count="5" type="default" cats="〇〇" bold="1" children="1" post_type="post"]

  

〇〇部分には、カテゴリーのIDが入ります。

  

IDの検索方法をご説明します。

先ほど同様、別ページを開いて作業してください。

  

  

投稿」の「カテゴリー」から自分が表示させたいカテゴリーを選びます。

そのカテゴリー名にカーソルを合わせます

  

すると、下にURLが出てきます。

ID=数字

この部分が〇〇に入る数字です。

  

  

さらに各カテゴリーのURLをコピーしてボタン内に設置してください。

URLのコピーは「表示」にカーソルを合わせて右クリックして「リンクのアドレスをコピー」を押します。

  

  

ここまで来れば、もう一息です。

頑張りましょう。

  

おすすめ記事の作成

続いておすすめ記事を作成します。

先ほど同様、別ページを開いて作業してください。

  

  

外観」⇒「メニュー」から「新しいメニューを作成しましょう」を押します。

  

  

投稿」から自分が表示させたい記事を選びます。

✅を入れてメニューに追加」を押します。

すると右側に表示されます。

  

  

ナビゲーションラベルタイトルを入れるのが一般的です。

CSSクラスは以下の5種類あります。

おすすめ記事に付ける帯を指定できます。

  

CSSクラスの番号と種類

1:おすすめ

2:新着

3:注目

4:必見

5:お得

  

最後に簡単な説明文を記入します。

説明文はタイトルと共に表示されます。

全て記入出来たら、「メニューを保存」を押します。

  

  

次におすすめカードに設定していきます。

Cocoon設定から「おすすめカード」を選択します。

  

  

それぞれ設定していきます。

おすすめカードの表示」は、「フロントページのみで表示」がおすすめです。

メニュー選択」は、先ほど作成した「おすすめ記事」を選択してください。

  

表示スタイル」はお好みのものをお選びください。

絵のマークにカーソルを合わせると表示例が出ます。

  

私の場合は、キャッチ画像に文字が入っているため、「画像のみ」を選んでいます。

キャッチ画像に文字がない場合は、画像内にタイトルを表示させることが可能です。

  

カード余白」と「カードエリア左右余白」は✅を入れておいた方が良いです。

見栄えが良くなります。

  

全て設定出来たら、「変更をまとめて保存」を押します。

  

Cocoon設定が保存できない場合の対処法

  

Cocoon設定が保存できない場合があります。

閲覧できません(Forbidden access)」と表示された場合は、サーバー会社の「WAF(Web Application Firewall)」というセキュリティ対策が原因です。

  

このセキュリティ対策を解除しなければ保存できません

各社WAFを設定していると思いますので、各社のコントロールパネルから解除できます。

  

一旦解除して保存してみてください。

保存できたら、再度、WAFを有効にします。

  

詳しくは別記事でご紹介しています。

>>Cocoon設定が保存でできない場合の対処法

  

以上でトップページ上のおすすめ記事は表示されます。

  

続いて固定ページ(トップページ)でも表示します。

編集中の固定ページ(トップページ)に戻ってください

  

  

見出しを追加してショートコードを入力します。

  

そのままコピーして貼り付け

[navi_list name="おすすめ記事" type="default" bold="1" arrow="1"]

  

CSSの意味

✅arrow=”1″

カードの右横に矢印表示(表示無し”0″)

  

プロフィールの作成

最後にプロフィールの表示です。

  

  

ショートコードをそのまま入力します。

  

そのままコピーして貼り付け

[author_box label=プロフィール]

  

おすすめ記事とプロフィールの設置が終わったら、最後にアイキャッチを設定します。

さらに下へ降りていって「目次を表示しない」に✅を入れます

  

  

最後にCSSを追加していきます。

  

編集中の画面を下までスクロールすると出てきます。

下記をコピーして貼り付けてください。

  

そのままコピーして貼り付け

.entry-title {display: none;}

.page .sns-share, .page .sns-follow {display: none;}

.page .date-tags,.page .author-info {display: none;}

  

それぞれ上から説明します。

  

CSSの意味

✅.entry-title {display: none;}

タイトルを非表示にする

✅.page .sns-share, .page .sns-follow {display: none;}

SNSボタンを非表示にする

✅.page .date-tags,.page .author-info {display: none;}

公開日、更新日、作者情報を非表示にする

  

以上の設定が終わったら、「公開」ボタンを押します。

  

表示設定

最後に表示設定をします。

これをすると新着記事一覧が表示されるようになります。

  

  

設定」から「表示設定」を選びます。

ホームページの表示」を「固定ページ」に変更します。

  

ホームページ」は、先ほど固定ページで作成したトップページ」を選択します。

投稿ページ」は、同じく固定ページで作成した新着記事」を選択します。

その他は特に変更する必要はありません。

  

最後に「変更を保存」を押します。

これで、「新着記事をもっと見る」ボタンのリンク先が表示されるはずです。

プレビューで確認してください。

  

【Cocoon設定】サイト型トップページでタグ一覧を表示

キーワードで探す場合、タグを設定していると便利です。

タグの設定がまだの方は別記事をご参照ください。

  

タグの設定が済んだら、またこちらにお戻りください。

>>タグの設定方法

  

今回は固定ページの本文下に設置する方法をご紹介します。

  

  

外観」の「ウィジェット」から「タグクラウド」を選びます。

  

  

タグクラウド」をクリックすると表示一覧が出ます。

表示したい場所を選びます。

  

今回は「固定ページ本文下」を選んでください。

選んだら「ウィジェットを追加」を押します。

  

  

右上に戻ると「固定ページ本文下」の中に「タグクラウド」が作成されていると思います。

クリックしてタイトルを編集します。

  

今回は「キーワードで探す」にしました。

お好きなタイトルを付けてください。

  

タグの数を表示したい場合はを入れてください。

私は表示しなくてもいいと思います。

  

その他、表示設定は任意で変更してください。

私は特に変更していません。

  

最後に「保存」を押して「完了」します。

  

【Cocoon設定】サイト型トップページの広告設定

最後に広告設定です。

この記事を出した4月14日時点の配置です。

今後、変更する可能性があります

  

しかし、4月に入ってから今日まで、毎日収益が発生しています。

色々と試した結果、現時点最良の配置だと考えています。

  

各ブログで最良は違うと思いますので、ご自身でも検証してください。

一例として当ブログの配置をご紹介しておきます。

  

  

Cocoon設定」の「広告」タブを開きます。

広告表示位置をお好きな場所に設定してください。

  

画像は現在(2021年4月)の当ブログの配置です。

2021年4月現在の広告配置

✅ボトム

レスポンシブレクタングル

✅サイドバートップ

レクタングル

✅本文上

ダブルレクタングル

✅関連記事下

レスポンシブレクタングル

  

これ以外に、投稿記事内の任意の位置に広告を出しています。

広告の種類や詳しい貼り方は以下の記事をご参照ください。

>>広告の種類や詳しい貼り方

  

設定は以上です。

お疲れさまでした。

  

【Cocoon設定まとめ】サイト型トップページはSEO対策に有効

サイト型トップページSEO対策に有効だと言われています。

少し時間がかかるかもしれませんが、やるだけの価値があると思います。

  

SEO対策結果が出るのに時間がかかると言われています。

なるべく早く取り組むことをおすすめします。

  

サイト型トップページ以外にもSEO対策の方法はいくつもあります。

初心者ブログドメインパワーが弱く上位表示を狙うのが難しいです。

あらゆる方法でSEO対策をしなければなりません。

  

SEO対策として良質な被リンクを獲得するすることでドメインパワーが上がりやすくなります。

簡単無料で登録できるペライチがおすすめです。

>>良質な被リンクが獲得できるペライチの無料登録方法

  

また、SEO対策重要なのがキーワード選定です。

初心者のうちは、このキーワード選定が難しいと思います。

  

しっかりとキーワード選定しなければ上位表示させることはできません。

キーワード選定のコツと方法を知っておきましょう。

>>キーワード選定の流れと書き方

  

さらに、SEO対策で有効なもので忘れがちなのがalt属性の設定です。

alt属性とは代替テキストのことです。

  

ネットワーク回線が遅いときなどに、画像の代わりに表示されるテキストです。

アイキャッチ画像に設定することでSEO対策になります。

  

Cocoonでは簡単に設定できるのでしっかりと設定しておいてください。

>>alt属性の書き方と設定方法

  

※※※※※

フリーランスという働き方にご興味がある方は別記事をご覧ください。

人気の職種や収入についても解説しています。

副業としても人気がある働き方です。

>>【フリーランスとは】職種と仕事内容と年収を紹介

  

タイトルとURLをコピーしました