トップページは、
簡単に変えられます。
今回はこの設定を使わないで、自分でカスタマイズしてみたいと思います。
このブログのように、カテゴリー画像を使った3カラム（3段組み）表示にカスタマイズしてみたいと思います。
さらに、トップページのみ、右サイドバーを非表示にして消したいと思います。
もちろん、下のような2カラム（2段組み）にもできます。
※モバイルでは1カラム表示になります。
ちょっと長いですが、手順を説明します。
目次
最初にカテゴリー画像を準備する
pixabay や O-DANといった、無料で使用できる画像素材サイトで好きな画像を探し、下のようなカテゴリー画像を作ります。
3カラム（カテゴリーが３つ）なので、3枚（サイズ567×220）用意しました。
サイズは好みで調整してください。
Step１ 記事のグループ分け
次に、各カラム（段組み）に入れる記事のグループ分けをします。
１グループに５記事ずつ入れて、３グループ作りたいと思います。
記事５つをメニューで編成する
「外観」>「メニュー」を開きます。
下の画面になります。
次に、新しいメニュー（グループ）に入れる記事を５つ選びます。
すると、記事が下のように追加されます。
⑤ ドラッグして好きな順番に入れ替える
⑥ 最後にメニューを保存 ボタンを押す
１グループ目が完成です！
上の手順を繰り返す
上の手順を繰り返して、新しいメニューをもう２つ作ります。
メニュー作成の手順
３つのメニューが保存されました。
Step２ 固定ページでトップページを作る
次に、トップページ本体を作成します。
「固定ページ」>「新規作成」を開きます。
新規記事の編集画面になります。
ブロックを3カラムにする
まず、好きなタイトル（例：トップページ）を付けます。
① ブロックの [ ⊕ ] を押して展開し、からをクリックします。
カテゴリー画像とメニューを呼び出すコードを入れる
下のように、３ブロックにそれぞれ最初に作成した画像を１枚ずつ貼り付けます。
そして、各３つの画像の下に、先ほど作ったメニューを呼び出す下のショートコードをそれぞれを入れます。
- [navi name="トップカテゴリー1" arrow="0"]
- [navi name="トップカテゴリー2" arrow="0"]
- [navi name="トップカテゴリー3" arrow="0"]
上のように右にアロー「>」を入れたい場合は、ショートコードのarrow=「0」を「1」に変えます。
トップページの編集は、これで完了です。
新着記事を表示させるには？
新着記事を自動的に表示させるには、カテゴリー画像の下に以下のコードを貼り付けます。
- /*新着記事を呼び出すショートコード*/
- [new_list count="5" type="default" cats="all" children="0" post_type="post"]
- /*ここまで*/
新着５記事を表示する設定になっています。countの「5」 の数字を変えて記事数を変更できます。
タイトルを消したい｜手順３
このまま公開すると、下のようにタイトルが入ってしまいます。
これを消したいと思います。
「外観」＞「テーマエディター」を開きます。
コクーンの「子テーマ」＞「スタイルシート」を開きます。
トップページのみタイトルを非表示にする下のコードを貼り付けます。
- /* トップページのタイトル非表示 */
- post-●●●● h1.entry-title {
- display: none;
- }
※コードの「post-●●●●」には、トップページの編集画面URLにある番号を入れます。
いよいよ、「固定ページでトップページを作る」手順２で作成したページを表示させます。
「設定」＞「表示設定」を開きます。
「ホームページの表示」の設定を変えます。
- ①「固定ページ」にチェックを入れる
- ② 固定ページ（手順２）で作成したページを選ぶ
- ③ 「変更を保存」ボタンを押す
公開されました！
サイドバーも消しておく｜手順４
最後に、トップページのみ、サイドバーを非表示にして消したいと思います。
「Cocoon設定」＞「全体」タブを開きます。
下方の「サイドバーの表示状態」で、フロントページで非表示に変更して保存します。
これでサイドバーが非表示になりました！
以上で作業完了です！お疲れ様でした。
