せいかつブログ

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

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

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

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

 

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

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

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

まちゃりさ
まちゃりさ

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

それでは、どうぞ!

スポンサーリンク

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

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

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

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

 

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

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

↑目次に戻る

ブログ型トップページ

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

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

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

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

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

設定方法

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

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

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

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

↑目次に戻る

サイト型トップページ

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

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

 

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

 

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

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

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

↑目次に戻る

サイト型のメリット

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

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

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

 

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

  • 最短で適切な情報にアクセスしやすい
まちゃりさ
まちゃりさ

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

↑目次に戻る

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

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

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

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

 

ざっとこれだけ!

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

まちゃりさ
まちゃりさ

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

 

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

 

STEP1 固定ページ作成

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

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

 

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

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

 

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

 

⑥ ナビカード

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

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

 

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

 

作成手順
サイト型固定ページの作成手順
  • 手順1
    新規固定ページを作成します

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

    固定ページ→「新規追加」をクリック
    固定ページ→「新規追加」をクリック
  • 手順2
    固定ページのタイトルをつけます
    まちゃりさ
    まちゃりさ

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

    固定ページのタイトルをつける
    固定ページのタイトルをつける
  • 手順3
    以下①~⑥の項目を追加していきます
    1. 見出しタイトル(h2)
    2. 吹き出し
    3. 2カラム表示(新着記事、人気記事)
    4. 2カラム表示(カテゴリ)
    5. 「もっと見る」ボタン
    6. ナビカード
    まちゃりさ
    まちゃりさ

    ①~⑥の設定手順は、次の見出しから解説します。

 

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

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

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

 

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

② 吹き出し
② 吹き出し

 

ブロックエディタの場合、「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カラム」を使用して表示します。

 

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

 

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

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

 

作成手順

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

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

 

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

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

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

 

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

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

 

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

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

  

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

カテゴリページの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の「固定ページ」を使用し、「サイト型トップページ」を作成する方法をご紹介しました。

 

手順を振り返ります。

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

 

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

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

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

 

 

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

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

おわり。

 

コメント

  1. SaYaKa より:

    はじめまして。SaYaKaと申します。
    まちゃりささんの記事を拝見しまして、Cocoonでサイト型のページにすることが出来ました。ありがとうございます。すごくわかりやすかったです!

    一点お伺いなのですが、トップページにする固定ページに吹き出しを入れると、吹き出し画像がページの一番上にアイキャッチのように表示されてしまいます。
    この対処法はおわかりになりますでしょうか…?

    まちゃりさんも固定ページ作成の際に吹き出しを利用されていますが、特にそのような現象は起きていないようでしたので、もし対処法をご存じでしたら教えていただけますと幸いです。

    どうぞよろしくお願いいたします。

    • macharisamacharisa より:

      SaYaKaさん

      はじめまして、まちゃりさです。

      記事を読んでいただき、ありがとうございました。
      また、お役に立てたようで嬉しく思います!

      >一点お伺いなのですが、トップページにする固定ページに吹き出しを入れると、吹き出し画像がページの一番上にアイキャッチのように表示されてしまいます。
      >この対処法はおわかりになりますでしょうか…?

      実は、私のサイトでは、トップページにアイキャッチ画像を設定しています。
      そのため、SaYaKaさんのような現象は起きておりません。

      もし、解決したい場合は、以下①②のいずれかを試してみてください。

      ①アイキャッチ画像を設定する
      ②アイキャッチ画像を表示させないよう設定する(カスタムCSSを記入)

      固定ページの下部にある、「カスタムCSS」欄に以下のコードを入力すると消すことができます。
      .eye-catch {
      display: none;
      }
      (▶参考記事:https://osaifull.com/eyecatch-2142.html)

      私も試してみたら、問題なく消すことができました。

      ご参考になれば、幸いです。

      • SaYaKa より:

        まちゃりささん

        突然のお伺いにも関らず、ご丁寧に教えていただきありがとうございます。
        教えていただいたカスタムCSSを追加して、無事アイキャッチ画像が表示されなくなりました!

        まちゃりささんのトップページにアイキャッチを設定する形も素敵ですね。
        私も色々とカスタムしてみようと思います!

        この度はありがとうございました。

        • macharisamacharisa より:

          SaYaKaさん

          うまく表示設定がいったようで、良かったです。

          Cocoonでは、様々カスタマイズができますので、ぜひ楽しんでカスタマイズしてみてください。
          そして、また、当サイトに遊びに来ていただければ嬉しい限りです。

  2. MAX より:

    cocoonの 外観の カスタマイズで 
    {ホームページの設定}がありません。
    削除してしまったのか?
    他の設定で隠れてしまったのか?
    見つけるにはどうすればいいですか?

    • macharisamacharisa より:

      MAXさん

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

      Cocoonのバージョンとも、関係がなさそうですね。。。

      Cocoonの仕様については、フォーラム(下記URL)に問い合わせることで解決できるかと思います。
      https://wp-cocoon.com/community/

      申し訳ございませんが、そちらで対応してみてください。
      よろしくお願いします。

  3. MAX より:

    追伸)
    ウィジェットの下は追加CSSとなっています。

  4. MAX より:

    ありがとう
    作業中ということで最初に入っていた表題が変わったのだと思います
    お礼が遅くなりました。

SNS

最近の投稿

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