Cocoonサイト型トップページの作成手順1

こんにちは、ハナです。

ブログでも、サイト型トップページを作りたいと思うことがあります。

このブログも、色々カスタマイズしています。

以前はこのようなサイト型トップページにしていた時もありました。

サイト型トップページの作り方の手順を書いてみたいと思います。

固定ページ作成
トップページに使用する固定ページをトップに表示させるには

固定ページ作成

サイト型トップページを作成するには、トップページに使用する固定ページを作成します。

Cocoonでは、固定ページ作成時にも投稿日、更新日、投稿者名などが表示されるので CSSで非表示にする必要があります。

非表示にするCSSはこちら。子テーマのstyle.cssに貼り付けて必要なものだけ利用してください。
Cocoon公式サイト

/*フロント固定ページのタイトルを非表示*/
.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はこんな感じです。

/*全てをまとめて非表示*/
.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}

トップページに使用する固定ページをトップに表示させるには

作成した固定ページが、トップページとして表示されるようにします。

管理画面　⇒　設定　⇒　表示設定　を開きます。
最新の投稿にチエックがはいっているのを固定ページにします。
ホームページで、作成した固定ページを選択して変更を保存をクリックします。
これで固定ページがトップページとして表示されます。