Cocoonのスキン紹介サイトが参考になる！
前回、スキンを少し変更してカテゴリー毎のラベル色を変えたことで、ブログの印象が一気に刷新されました。
その作業中にふと気づいたことがありました。
スキン選択画面には「そのスキンを紹介している公式サイト」へのリンクが用意されているんですね：
アピールエリアの演出を真似してみる
試しに「てがきノート」の公式サイトを開いてみると、トップ画面の上部に“アピールエリア”があり、アイキャッチ付きの記事カードが左右に流れていく演出が採用されていました：
これがとても印象的で、
これ、うちのサイトでも試してみたい…！
と思い、そのまま導入してみることに。
「流れるように表示されるアイキャッチ付きカード」は、Cocoonの「カルーセル」機能（スライダー）か、固定位置に並べる「おすすめカード」のどちらかです。やりたい表示に合わせて、下の手順で設定できます。
1) スライドで“流れる”表示にする（カルーセル）
- WordPress管理画面 → Cocoon設定 → カルーセルを開く。
- カルーセルの表示で「フロントページ（トップ）」にチェック。必要なら「スマホで表示」にもチェック。
- 表示内容で「人気記事／カテゴリー／タグ／固定ページ」など、流したい記事の種類や並び順、件数を設定。
- 右上（または下部）の変更をまとめて保存。
※ 各記事（またはカテゴリ/タグ）にはアイキャッチ画像を設定しておくと見栄えが整います。2) 固定で“並べて見せる”カード（おすすめカード）
- 外観 → メニューで「おすすめカード」用メニューを新規作成し、見せたい投稿／固定ページ／カテゴリ／タグを追加して保存。
- Cocoon設定 → おすすめカードで、表示場所（フロントページなど）、デザイン、余白、そして①で作ったメニューを選択して保存。
※ リンク先ページやカテゴリ/タグにもアイキャッチ画像があるとカードに反映されます（未設定だと「NO IMAGE」表示）。3) 通常の投稿一覧カードの体裁を整える（任意）
トップのカルーセル／おすすめカードの下に出る記事一覧カードの列数や表示情報は、Cocoon設定 → インデックスで調整できます（例：縦型カード2列、スニペット表示など）。
ChatGPT-5 2025.8.27
設定は「Cocoon設定 → カルーセル」で簡単
Cocoon設定 → ［カルーセル］タブから必要な項目を選ぶだけ：
- 表示するカテゴリーを選択
- 表示タイプを決める
- インターバル秒数も好みで調整可能！
前回設定した“カテゴリー別ラベル色”もこのカルーセルに反映されていました。
これだけで、サイトに自然な動きと奥行きが出た感じです。
まとめ：小さな仕掛けで「動き」は作れる
正直、こんなに簡単に動きのある表現が付けられるとは思いませんでした。
色を変えただけではなく、動きまで取り入れることで、ページの第一印象にメリハリが付きます。
そして、インターバル秒数まで好きに調整できるのもポイント高い！
引き続き、少しずつ“見せ方”を楽しく改善していこうと思います。
