作り方

ウェブサイトを作る(83):てがきノート活用記、ラベル色とカルーセルでサイトに動きを

ブログサイト成功の鍵 - コクーンの設定 作り方
ブログサイト運用を成功させる鍵の一つがコクーンの設定をしっかり行うことです
この記事は約2分で読めます。

前回、スキンをチョコっと変更して印象刷新!ラベル色の活用を行い、カテゴリー毎にラベルの色を変えました。その作業中に気づいたのですが、スキンを選ぶ画面には、そのスキンを紹介している公式サイトへのリンクがあるんですね:

「てがきノート」のサイトを開いてみると、トップ画面上部にアピールエリアがあり、アイキャッチ付きの記事カードが左右に流れる仕掛けが。これがとても印象的で、さっそく試してみることにしました:

「流れるように表示されるアイキャッチ付きカード」は、Cocoonの「カルーセル」機能(スライダー)か、固定位置に並べる「おすすめカード」のどちらかです。やりたい表示に合わせて、下の手順で設定できます。

1) スライドで“流れる”表示にする(カルーセル)

  1. WordPress管理画面 → Cocoon設定カルーセルを開く。
  2. カルーセルの表示で「フロントページ(トップ)」にチェック。必要なら「スマホで表示」にもチェック。
  3. 表示内容で「人気記事/カテゴリー/タグ/固定ページ」など、流したい記事の種類や並び順、件数を設定。
  4. 右上(または下部)の変更をまとめて保存
    ※ 各記事(またはカテゴリ/タグ)にはアイキャッチ画像を設定しておくと見栄えが整います。

2) 固定で“並べて見せる”カード(おすすめカード)

  1. 外観 → メニューで「おすすめカード」用メニューを新規作成し、見せたい投稿/固定ページ/カテゴリ/タグを追加して保存。
  2. Cocoon設定 → おすすめカードで、表示場所(フロントページなど)、デザイン、余白、そして①で作ったメニューを選択して保存。
    ※ リンク先ページやカテゴリ/タグにもアイキャッチ画像があるとカードに反映されます(未設定だと「NO IMAGE」表示)。

3) 通常の投稿一覧カードの体裁を整える(任意)

トップのカルーセル/おすすめカードの下に出る記事一覧カードの列数や表示情報は、Cocoon設定 → インデックスで調整できます(例:縦型カード2列、スニペット表示など)。

ChatGPT-5 2025.8.27

早速、Cocoon設定の[カルーセル]タブから必要な項目を選び、いくつか設定を選択。

表示内容は選択しないと何も出ないので要注意ですが、前回設定したカテゴリーごとのラベル色もしっかり反映されていました:

こんなに簡単に動きのあるサイトが作れるとは驚きです。しかも画面最下部ではインターバルの秒数まで設定できるので、自分好みに調整できるのも楽しいポイントでした。

タイトルとURLをコピーしました