せいかつブログ

【Cocoon】簡単!サイト型トップページの作り方(図解付き)

この記事は約12分で読めます。

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

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

 

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

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

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

まちゃりさ
まちゃりさ

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

それでは、どうぞ!

スポンサーリンク

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

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

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

ブログ型のトップページ
ブログ型のトップページ

 

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

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

ブログ型トップページ

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

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

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

ブログ型のトップページ
ブログ型のトップページ

 

▼設定方法

表示は、Cocoon設定→「インデックス」で自由に変更できます。

Cocoon設定→「インデックス」
まちゃりさ
まちゃりさ

色々試してみてください!

サイト型トップページ

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

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

 

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

 

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

これを避けるため、記事数がある程度増えた段階で作成する人が多いです。

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

 

サイト型のメリット

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

 

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

  • 見せたい記事を見せておくことができる
  • お知らせ欄などの記事以外の情報も追加で掲載できる

 

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

  • 最短で適切な情報にアクセスしやすい

 

まちゃりさ
まちゃりさ

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

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

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

トップページをサイト型に変更する手順

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

 

ざっとこれだけ!

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

まちゃりさ
まちゃりさ

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

 

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

 

STEP1 固定ページ作成

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

  • ① タイトル(h2)
  • ② 吹き出し
①②
① タイトル(h2)・② 吹き出し

 

③ 2カラム表示(新着記事、人気記事)

③ 2カラム表示(新着記事、人気記事)
③ 2カラム表示(新着記事、人気記事)

 

  • ④ 2カラム表示(カテゴリ)
  • ⑤ 「もっと見る」ボタン
④ 2カラム表示(カテゴリ)・⑤ 「もっと見る」ボタン
④ 2カラム表示(カテゴリ)・⑤ 「もっと見る」ボタン

 

⑥ ナビカード

⑥ ナビカード
⑥ ナビカード

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

 

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

 

▼ここから手順

1.新規固定ページを作成します。

固定ページ→「新規追加」をクリックします。

固定ページ→「新規追加」をクリック
固定ページ→「新規追加」をクリック

 

2.固定ページのタイトルをつけます。

まちゃりさ
まちゃりさ

わかりやすく「トップページ」としました!

固定ページのタイトルをつける
固定ページのタイトルをつける

 

3.以下①~⑥の項目を追加していきます。

① 見出しタイトル(h2)

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

① 見出しタイトル(h2)
① 見出しタイトル(h2)

 

② 吹き出し

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

② 吹き出し
② 吹き出し

 

③ 2カラム表示(新着記事、人気記事)

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

「2カラム」を検索
「2カラム」を検索

見つからない場合は、「Cocoonレイアウト」-「2カラム」を選択します。

 

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

「ブロックの追加」で「見出し(h3)」を追加する
「ブロックの追加」で「見出し(h3)」を追加する

見出し3(h3)を使用しました。

 

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

新着記事と人気記事を出力するイメージ
新着記事と人気記事を出力するイメージ

 

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

「段落」をクリック
「段落」をクリック

 

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

ショートコード → 新着記事(人気記事)一覧
ショートコード → 新着記事(人気記事)一覧
まちゃりさ
まちゃりさ

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

 

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

コードが自動で表示される
コードが自動で表示される

 

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

 

▼次から、コード変更のやり方です。

count

 

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

count
count

 

type

 

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

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

 

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

 

cats

 

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

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

cats
cats

 

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

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

 

カテゴリIDの調べ方

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

「投稿」→「カテゴリー」
「投稿」→「カテゴリー」

 

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

ID=数字が表示される
ID=数字が表示される

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

まちゃりさ
まちゃりさ

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

 

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

カテゴリでなく、タグを表示したい場合

catsの代わりにtags=””を記入します。

(記入例:tags=”52″,”53″,”54″)

 

children

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

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

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

children

 

post_type

 

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

post_type
post_type

 

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

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

 

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

 

④ 2カラム表示(カテゴリ)

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

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

 

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

 

 

⑤ 「もっと見る」ボタン

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

 

「もっと見る」ボタン
「もっと見る」ボタン

 

▼手順

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

COCOONブロック→「ボタン」
COCOONブロック→「ボタン」

 

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

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

レイアウトで「中央揃え」にすると見栄えGOOD
レイアウトで「中央揃え」にすると見栄えGOOD

 

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

「ブロック」→「ボタン設定」
「ブロック」→「ボタン設定」

 

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

  • 1.URL →カテゴリページのURLを指定します(下部のカテゴリページのURLの調べ方を参照)
  • 2.リンクの開き方 →「現在のタブ」か「新しいタブ」を指定します
  • 3.サイズ →「中」か「大」がおすすめです
  • 4.円形にする →クリックすると、ONになります
  • 5.光らせる →クリックすると、ONになります

  

カテゴリページのURLの調べ方

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

「投稿」→「カテゴリー」
「投稿」→「カテゴリー」

 

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

「表示」をクリック
「表示」をクリック

 

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

URLをコピー
URLをコピー
まちゃりさ
まちゃりさ

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

 

ボタンの位置がずれる場合には・・

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

「外観」→「カスタマイズ」
「外観」→「カスタマイズ」→「追加CSS」
「追加CSS」
「追加CSS」

 

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

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

 

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

右上の「公開」をクリック
右上の「公開」をクリック

 

⑥ ナビカード

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

ナビカード
ナビカード

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

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

 

目次と広告を除外する

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

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

 

▼手順

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

右側の「固定ページ」をクリック
右側の「固定ページ」をクリック

 

  • 「広告」から、「広告を除外する」にチェックを入れます。
  • 「ページ設定」から、「目次を表示しない」にチェックを入れます。
「広告」→「広告を除外する」、「ページ設定」→「目次を表示しない」
「広告」→「広告を除外する」、「ページ設定」→「目次を表示しない
まちゃりさ
まちゃりさ

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

 

タイトルを削除する

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

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

※CSSコードを追加します

 

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

「外観」→「カスタマイズ」
「外観」→「カスタマイズ」

 

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

「追加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; }
一番下にコードを貼り付ける
一番下にコードを貼り付ける

 

ちょっとしたポイント!!

「/*」と「*/」の間にコメントを残すことができます。

コードを記入した日付などを入れておくと、後で見返したときに便利です。

 

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

右上の「公開」をクリック
右上の「公開」をクリック

 

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

 

STEP2 記事を公開

固定ページに戻ります。

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

記事を「公開」
記事を「公開」
まちゃりさ
まちゃりさ

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

 

STEP3 トップページを固定ページに設定

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

 

▼手順

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

「設定」→「表示設定」
「設定」→「表示設定」

 

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

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

表示設定の「ホームページの表示」
表示設定の「ホームページの表示」
まちゃりさ
まちゃりさ

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

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

 

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

いかがでしたか?

 

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

 

手順を振り返ります。

トップページをサイト型に変更する手順

 

サイト型トップページは、

  • ①見せたい記事がある場合
  • ②記事以外の情報を掲載したい場合

に使用すると、便利です。

 

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

 

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

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

おわり。

 

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

 

【Cocoon】スキンどれ選ぶ?特徴と評判(詳細1)
【Cocoon】スキンどれ選ぶ?特徴と評判をまとめてみた!
【Cocoon】簡単!サイト型トップページの作り方(図解付き)
【Cocoon】モバイル(スマホ)用のグローバルナビメニューを設定する方法
【Cocoon】簡単!吹き出しの基本的な使い方

 

コメント

SNS

最近の投稿

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