トップページにカテゴリーごとにブログを表示させ、見てくださる方がわかりやすいようにカスタマイズしようと思います！
「コクーン設定→インデックス」でもブログ記事をカテゴリーごとに並べることはできなんですが、思うようなデザインにならなかったので、TOPページ用にあらたに固定ページを作成することにしました。
TOPページ用固定ページを作成
「固定ページ→固定ページを追加」から作成します。とりあえずタイトルにTOPと入れてください。
（TOPでなくてもわかりやすいものならOK！！）
ページのタイトルや目次はない方がいいので、右の「ページ設定」で非表示にしましょう♪
固定ページをTOPページとして使用する
デフォルトでは新着記事がTOPページとして使用されていますが、指定したページを簡単にTOPページとすることができます。
設定→表示設定→ホームページの表示
デフォルトでは「最新の投稿」にチェックが入っていますが、「固定ページ」にチェックを入れ、先ほど作成したTOPを選択しましょう。
これで、新規作成した固定ページがトップページとして表示されるようになりました。
（パソコンや環境にもよりますが、変更されるまでに少し時間がかかりました。表示が切り替わらなくても、焦らず次の作業をして待ちましょう♪）
新着記事を表示させる
左上の青の+マークからショートコードを選び、新着ブログを表示させるショートコードを書きます。
[～new_list count=6 type=large_thumb～ ]
※両サイドの「～」を削除してください。
これで表示完了♪
ショートコードオプション
count
countは、表示数です。
例：count=10（10記事表示）
type
typeは、表示形式です。
- default：通常のリスト
- border_partition(or 1)：カードの上下に区切り線を入れる
- border_square(or 2)：カードに枠線を表示する
- large_thumb：大きなサムネイル表示
- large_thumb_on：大きなサムネイルにタイトルを重ねる
いろいろ試してみて、お気に入りの表示形式を見つけてください。
表示することが出来たら、今度はデザインを整えていきます！！
完成イメージ
このような感じで横３つ２段に並べようと思います。
変更前
アイキャッチ画像を大きく表示させても縦に並んでしまっていました💦
デザイン変更はｃｓｓで簡単
「外観→テーマファイルエディタ―」からstyle.cssを選び、以下のコードをコピペするだけです♪
ＣＳＳ
/* 新着横３つ表示 */
.new-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}
.new-entry-cards.large-thumb a {
width: 33.333%;
}
/768px以下/
@media screen and (max-width: 768px){
.new-entry-cards.large-thumb a {
width: 50%;
}
}
/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a {
width: 100%;
}
}
記事一覧ページを作成
6記事以上見えるように「もっと見る」ボタンを設置します。
TOPページを作成した時と同様の手順で「記事一覧」というタイトルの固定ページを作成。このとき、タイトルと目次を非表示にしたい場合はTOＰページと同様にページ設定でチェックを入れてください。
設定→表示設定→ホームページの表示
で「投稿ページ」を作成した記事一覧にする。
これだけで記事一覧ページの完成♪
あとはページURLをコピペしてリンクを作成すれば、全記事リストが完成します！
簡単にできるので、是非チャレンジしてみてくださいね😊
