ヒビラボでは、Cocoonをカスタマイズする方法やCSSコード（コピペ可）をまとめています。
WordPressのCocoonテーマで、トップページ（フロントページ）をサイト型にする方法を紹介します。
このブログのサイト型トップページは以下のとおりです。
どうやって作っているのかをまとめました。
Cocoonでサイト型トップページをつくるには多少のCSSカスタマイズが必須となりますが頑張りましょう！
ポチップ作成前にトップページの完成図を書き出す
いきなり作成するとデザインがぐちゃぐちゃになる可能性が高いです。
まず、そのへんにあるメモ用紙でいいのでトップページの完成図を書き出してから作業しましょう。
完成図を作成するときのポイントは以下のとおりです。
- モバイル表示（スマホ・タブレットなど）のイメージも同時に考える
- 表示画像は偶数になるようにする
- 横幅が大きい場合はコンテンツを縦表示に分割できるようにする
- カラムでわけられるようにデザインする
- 複雑にしない
そんな、いきなり色々言われても……。
完成図を書き出す前にこの記事を全部読んでみて、カスタマイズできそうなデザインをイメージしてみよう！
固定ページを作成し、不要要素を非表示にする
イメージが固まったら、固定ページを作成します。
固定ページを作成できたら、以下の設定をおこないます。
- 記事タイトル名……ブログ名を入力する
- 固定ページ→ページ設定→ページタイプを「１カラム（広い）」に設定する
- 「タイトルを表示しない」「読む時間を表示しない」「目次を表示しない」にチェック
- 固定ページ→ページ設定→広告で「広告を除外する」「PR表記を除外する」にチェック
トップページに広告を表示する場合は「広告を除外する」「PR表記を除外する」にチェックしないでください。
さらに不要要素をCSSで非表示にする
固定ページの不要要素を非表示にするため、下記のコードを記事の中のカスタムCSSに入力してください。
記事の中のカスタムCSSは、記事を下にスクロールしていくとSEO設定があると思いますが、それのさらに下にあります。
/* パンくずリストの非表示 */
#breadcrumb{
display:none;
}
/* 投稿日付の非表示 */
.date-tags{
display:none;
}
記事の中のカスタムCSSに入力すれば、記事内にしか反映されないのでブログ全体のデザインに影響がありません。
メインカラムと背景の色をそろえる
次に、メインカラムと背景の色をそろえてフルワイドな見た目に変更します。
カスタムCSSに下記のコードを追加で入力します。
/* 背景色を変更する */
.container {
background: #fff; /* 白色にしたい場合 */
}
/* メインカラムを透明にする */
#main{
background: transparent;
}上部に「おすすめカード」を表示する
上部には「おすすめカード」を表示します。
おすすめカードの数は４記事がおすすめだよ！
- 「外観」→「メニュー」でおすすめカード用のメニューを作成する
- メニュー名に「おすすめカード」と入力
- おすすめカードに追加したい記事を４つ選んでドラッグする
- 最後は「メニューを保存」をクリックする
- 「Cocoon設定」→「おすすめカード」タブをクリック
- 「おすすめカードの表示」を自由に設定（全ページで表示かフロントページのみで表示がおすすめ）
- メニュー選択で作成したメニュー「おすすめカード」を選択して保存する
おすすめカードの画像はアイキャッチ画像が表示されます。
おすすめカードの上のヘッダーカスタマイズもデザインの重要ポイント！
ヘッダーカスタマイズについては「【Cocoon】ヘッダーカスタマイズ｜メニューのレイアウト、ロゴの位置、背景色」にまとめています。
見出しを画像で作成する
見出しはCanvaで作成しました。
Canvaの使い方は「【Cocoon】ヘッダーロゴをCanvaで作成する方法｜画像サイズや背景透過について」にまとめています。
画像は大きめに作成するときれいに表示されますが、大きすぎるとサイズが大きくなって表示が重くなります。
表示する1.5～2倍で作成するのがおすすめ！
画像を配置したら以下の設定をおこないます。
- 配置を中央揃えにする（※しなくても大丈夫かもしれない）
- 画像設定の「幅」「高さ」で大きさを調整する
トップページ用のバナー画像を作成する
同じように、Canvaでトップページに使用する画像を作成します。
画像を配置したらリンク機能で記事やカテゴリー、タグへのリンクをおこないます。
- 画像を貼りつけて選択する。
- リンク機能で記事、カテゴリー、タグへリンクする
カラムを多用する
モバイルフレンドリーなトップページにするには、ここが一番大事！
カラムを多用して画面分割します。
「モバイルでは縦に並べる」のON・OFFを駆使しましょう！
カラムは複数ありますが、画像のカラムを使用します。
ちなみに、このブログのカラム使用例はこんな感じ。
作成するときは、さまざまな表示方法を比べながらバランスをとるのが重要です。
スマホで見る人が多いから重要！
新着記事一覧と「もっとみる」ボタンを作成する
新着記事一覧は、シンプルに通常のリストがおすすめです。
左上の＋ボタン（ブロック挿入）で新着記事を挿入→基本設定の表示タイプを「通常のリスト」にする
サムネイルにすると、横表示のカスタマイズや大きさ調整のカスタマイズが必要になります。
新着記事のもっと見るボタンは、以下の方法で作成します。
- 固定ページを作成する
- 記事名：新着記事、パーマリンク：newpost
- 何も書かないで公開
- ワードプレスの設定→表示設定→ホームページの表示→投稿ページのプルダウンメニューで新着記事を選択して保存
- もっとみるボタンを作成し、固定ページへのリンクを貼る
- もっみるボタンを押して新着記事一覧になっているか確認する
フルワイドデザインでカテゴリーを区切る
フルワイドの区切りデザインについては、Cocoonテーマ「grayishスキン」のカスタマイズを参考にさせていただきました。本当にありがとうございます。
ブロックとブロックの間隔は、ブロックをクリックしたとき右に出る設定の「ブロック下余白」で調整しよう！
固定ページをトップページ（フロントページ）に設定する
最後に、サイト型トップページが完成したら、トップページ（フロントページ）に設定します。
まとめ：Cocoonをサイト型にカスタマイズして見やすくおしゃれにしよう！
この記事で紹介したカスタマイズの流れは以下のとおりです。
- 作成前にトップページの完成図を書き出す
- 固定ページを作成する
- 固定ページの不要要素を非表示にする
- メインカラムと背景色の色をそろえる
- 上部に「おすすめカード」を表示する
- 見出しを画像で作成する
- トップページ用のバナー画像を作成する
- カラムを多用する
- 新着記事一覧と「もっとみる」ボタンを作成する
- フルワイドデザインでカテゴリーを区切る
- 固定ページをトップページ（フロントページ）に設定する
トップページが見やすくおしゃれになると、ブログをもっと楽しめそうですよね。
最後の「トップページ（フロントページ）に設定する」作業を元に戻せばいつでも元のブログ型に戻せるので、ぜひ一度サイト型トップページの作成に挑戦してみましょう！
