【Cocoon】簡単！サイト型トップページの作り方（図解付き）

こんにちは、まちゃりさです。

今回は、ワードプレステーマ「Cocoon」でサイト型トップページを作るやり方について解説していきます。

サイト型トップページは、好きな記事やお知らせを表示させたカスタマイズ型トップページのことです。

トップページはサイトのイメージを決める大事な顔の部分。

見せたい記事がある場合には、今回ご紹介する方法でサイト型トップページを作成してみましょう！

まちゃりさ

最後まで一緒に頑張りましょう！！

それでは、どうぞ！

ブログ型とサイト型の違い

トップページには、ブログ型とサイト型の2種類があります。

こちらが、ブログ型のトップページで、

こちらが、サイト型のトップページです。

↑目次に戻る

ブログ型トップページ

まずは、「ブログ型トップページ」についてです。

ブログ型のトップページとは、新しい記事から順に上からずらっと並ぶようなイメージです。

Cocoonでは、標準搭載されているデザインです。

設定は、「Cocoon設定」から簡単に行うことができます。

「Cocoon設定」→「インデックス」

「フロントページタイプ」から、自由に変更できます。

まちゃりさ

色々と表示を試してみてください！

↑目次に戻る

サイト型トップページ

続いて、「サイト型トップページ」です。

サイト型のトップページとは、前述のとおりカスタマイズしたトップページのことです。

「ブログ型のトップページ」だと、過去記事がどんどん埋もれていってしまいます。

これを避けるため、記事数がある程度増えた段階で、サイト型のトップページを作成する人が多いです。

Cocoonでは、固定ページを使用すれば、簡単に作成できます。

↑目次に戻る

サイト型のメリット

トップページをサイト型にすることのメリットは、次のような感じです。

サイト運営者にとっては・・

サイト訪問者にとっては・・

まちゃりさ

運営者、訪問者の双方にとって、メリットがあります！

↑目次に戻る

【Cocoon】トップページをサイト型に変更する方法

Cocoonでトップページをサイト型に変更する手順は、次の3つです。

※部分的な手順が気になる場合は、リンクからジャンプしてください。

ざっとこれだけ！

ただし、トップページのデザインは、こだわりだすと止まらなくなるので注意してください(笑)

まちゃりさ

今回ご紹介するシンプルなデザインであれば、1時間ほどで作成できます！

次から、具体的な作成手順をご紹介します。

STEP１　固定ページ作成

私が作成した固定ページのポイントは、次の①～⑥です。

（※Cocoonのスキンは、「イノセンス」を使用しています。）

今回は、これと同様に作成する方法について、解説していきます。

次からは、上記の手順３の①～⑥の設定方法です。

①　見出しタイトル（h2）

h2見出しを使用して、サイトタイトルを記入しました。

②　吹き出し

「吹き出し」ブロックを追加して、挨拶文を入れました。

③　2カラム表示（新着記事、人気記事）

ブロックエディタの場合、「2カラム」を検索します。

「2カラム」を追加した後、見出しブロックを追加します。

続いて、「新着記事」と「人気記事」を出力していきます。

ブロックの追加→「段落」をクリックします。

「ショートコード」→「新着記事（人気記事）一覧」を選択します。

まちゃりさ

人気記事を出したい場合は、「人気記事一覧」を選択してください。

コードが以下のように、自動で表示されます。

ここから、中のコード記述をお好みで変更していきます。　

count

count=”5″の「5」を表示させたい記事数に変更します。

type　

type=”default”の「default」を表示させたいイメージに合わせて変更します。

• default：通常のリスト
• border_partition(or 1)：カードの上下に区切り線を入れる
• border_square(or 2)：カードに枠線を表示する
• large_thumb：大きなサムネイル表示
• large_thumb_on：大きなサムネイルにタイトルを重ねる

表示イメージは、以下を参考にしてください。

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

新着記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。

wp-cocoon.com

cats

catsは、「カテゴリ」のことです。

cats=”all”の状態だと、すべてのカテゴリが表示されます。

“all”部分を変更することで、表示したいカテゴリを指定することができます。

やり方は、カテゴリIDをカンマ区切りで指定します。

ワードプレス管理画面から、「投稿」→「カテゴリー」をクリックします。

表示させたいカテゴリにカーソルを当てると、下の方にID＝数字が表示されます。

この数字をメモして、cats=”all”の「all」の中に貼り付けます。

まちゃりさ

複数を指定する場合は、カンマ区切りで指定しましょう。（例：cats=“52”,”53″,”54″など)

例えば、cats=”52″と記載すると、当ブログのカテゴリ「かたづけ」のみの記事が表示されるようになります。

children

childrenは、子カテゴリの内容を含めて表示するかを指定します。

デフォルトでは「0」になっています。

「1」にすると、子カテゴリの内容を含めて表示します。

post_type　

post_typeは、表示する投稿タイプを選択します。

postが「投稿」、pageが「固定ページ」を意味します。

• post_type=“post,page”（投稿と固定ページを表示）
• post_type=“page”（投稿）

右ブロック「人気記事」も「新着記事」と同様、お好みで設定していきます。

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

新着記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。

wp-cocoon.com

④　2カラム表示（カテゴリ）

続いて、カテゴリごとの記事を表示していきます。

新着記事、人気記事と同様に「2カラム」を使用して表示します。

当ブログでは、「見出し」の代わりに「画像」を使用しています。

⑤　「もっと見る」ボタン

「もっと見る」ボタンを付けることもできます。　

ブロックエディタで、COCOONブロック→「ボタン」を選択します。

「もっとみる」など、表示したい文字を入力します。

レイアウトで「中央揃え」にすると見栄えがよくなります。

右側に表示される「ブロック」タブ→「ボタン設定」の項目を設定していきます。

以下の5項目をお好みで設定していきます。

カテゴリページのURLを調べる

「投稿」→「カテゴリー」を開きます。

URLを調べたいカテゴリにカーソルを当てて「表示」をクリックします。

上部に表示されるURLをコピーします。

まちゃりさ

これがカテゴリページのURLです。ボタンリンクに指定してみましょう。

ボタンの位置がずれる場合の対処法

「外観」→「カスタマイズ」→「追加CSS」と進みます。

下記のコードを入力します。

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

追加後、右上の「公開」をクリックします。

⑥　ナビカード

意図した記事一覧を作成することもできます。

「外観」→「メニュー」から、新規メニューを作成します。

詳しい作成方法は、以下を参考にしてください。

意図した記事一覧を作成できる「ナビカード」ショートコードの使い方

サイト訪問者を的確に誘導するために、意図したリンクリストを作成するショートコードの使い方です。

wp-cocoon.com

目次と広告を除外する

トップページに目次と広告が表示されていると不自然です。

これらを表示しないように設定していきます。

右側の「固定ページ」をクリックし、下の方に進みます。

まちゃりさ

これで、目次と広告が表示されなくなります。

タイトルを削除する

目次と広告と同様に、トップページに「タイトル」が表示されていると不自然です。

これらを表示しないように設定していきます。

（※CSSコードを追加します）

「外観」→「カスタマイズ」に進みます。

「追加CSS」をクリックし、一番下にコードを貼り付けます。

以下のコードをコピーして、貼り付けます。

/*固定ページ（トップページカスタマイズ）*/
/*フロント固定ページのタイトルを非表示*/ .home.page .entry-title{ display: none; } /*フロント固定ページのシェアボタンを非表示*/ .home.page .sns-share{ display: none; } /*フロント固定ページのフォローボタンを非表示*/ .home.page .sns-follow{ display: none; } /*フロント固定ページの投稿日を非表示*/ .home.page .post-date{ display: none; } /*フロント固定ページの更新日を非表示*/ .home.page .post-update{ display: none; } /*フロント固定ページの投稿者名を非表示*/ .home.page .author-info{ display: none; }

追加後、右上の「公開」をクリックします。

参考記事は、こちらです。

トップページを固定ページにした際にタイトル、シェア・フォローボタン、投稿日、更新日、投稿者名の表示を切り替えるCSS例

フロント固定ページで、「非表示にしたいGOが需要が高そうなHTML要素」をCSSで見えなくする方法です。

wp-cocoon.com

↑目次に戻る

STEP２　記事を公開

固定ページに戻ります。

プレビューで確認し、問題なければ記事を「公開」します。

まちゃりさ

固定ページの作成ができました！あとは、記事をトップページに差し替えるだけです！あと少し！

STEP３　トップページを固定ページに設定

最後に、作成した固定ページをトップページに表示すれば完了です。

ワードプレス管理画面→「設定」→「表示設定」と進みます。

表示設定の「ホームページの表示」から「固定ページ」を選択します。

「ホームページ」の右側のドロップボックスから、先ほど作成した固定ページのタイトル（トップページ）を選択します。

まちゃりさ

これでサイト型トップページの作り方はおわりです！

表示を確認してみてください。

まとめ：Cocoonサイト型トップページの作り方！

いかがでしたか？　

今回は、Cocoonの「固定ページ」を使用し、「サイト型トップページ」を作成する方法をご紹介しました。

手順を振り返ります。

復習したい場合、リンクをクリックすると戻ることができます

サイト型トップページは、次の場合に使用すると、便利です。

記事数がある程度揃ったら、ぜひ挑戦してみましょう！

「Cocoon」についてのおすすめ記事

【Cocoon】スキンどれ選ぶ？特徴と評判をまとめてみた！

Cocoonのスキン、たくさんあってどれを選べばいいか迷うことがあります。そこで、Twitterのフォロワーさんのご協力のもと、スキンの評判を集めてみましたので、ぜひ参考にしてください。（随時更新予定です）スキンは、一度変更すると改めて変更が難しくなる場合もあります。良い点、悪い点をぜひ参考にしてみてください。

macharisa.com

参考：【Cocoon】タグの使い方とチェックボックス設定方法（ブログ初心者向け）

参考：【Cocoon】グローバルメニューのカスタマイズ方法

それでは、今回はこの辺で終わります。

最後までお読みいただきありがとうございました！

おわり。