せいかつブログ

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

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

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

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

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

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

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

まちゃりさ
まちゃりさ

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

それでは、どうぞ!

スポンサーリンク

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

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

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

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

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

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

ブログ型トップページ

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

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

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

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

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

サイト型トップページ

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

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

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

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

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

 

サイト型のメリット

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

 

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

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

 

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

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

こんな感じです!

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

Cocoonでトップページをサイト型に変更する手順は、大まかにこんな感じです。

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

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

 

ざっとこれだけです!

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

まちゃりさ
まちゃりさ

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

 

STEP1 固定ページ作成

私が作成した固定ページのポイントは、こんな感じです。

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

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

③ 2カラム表示(新着記事、人気記事)
③ 2カラム表示(新着記事、人気記事)
  • ④ 2カラム表示(カテゴリ)
  • ⑤ 「もっと見る」ボタン
④ 2カラム表示(カテゴリ)・⑤ 「もっと見る」ボタン
④ 2カラム表示(カテゴリ)・⑤ 「もっと見る」ボタン

⑥ ナビカード

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

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

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

 

▼ここから手順

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

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

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

 

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

まちゃりさ
まちゃりさ

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

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

 

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

① 見出しタイトル(h2)

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

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

② 吹き出し

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

② 吹き出し
② 吹き出し

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

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

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

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

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

見出し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

 

表示したいカテゴリを指定することができます。

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

カテゴリIDの調べ方

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

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

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

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

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

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

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

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

(記入例:tags=”52″)

 

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をコピー

 

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

「外観」→「カスタマイズ」→「追加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の固定ページを使って、サイト型トップページを作成する方法をご紹介しました。

手順を振り返ります。

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

サイト型トップページは、①見せたい記事がある場合や、②記事以外の情報を掲載したい場合に便利です。

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

 

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

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

コメント

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