Cocoonタイムライン（ステップブロック）をおしゃれにカスタマイズ｜選べる5種類のデザイン

「タイムライン便利だけど、ちょっと地味かも…」

今回紹介するのは、Cocoonタイムラインを実用レベルでおしゃれにするカスタマイズ集です。

実は少し見せ方を整えるだけで、

• 手順の流れが見やすくなる
• サイト全体の完成度がワンランク上がる
• 記事を最後まで追いやすくなる

など、同じ内容でも印象はぐっと変わります。「なんとなく素人っぽい」を減らしたい時にも、タイムラインは意外と効果が大きい部分です。

すぐに実装したい方は、以下から手順へ進んでください。

Cocoonタイムラインのデザイン一覧

ここでは実際のデザイン例を先に紹介します。

「こんなタイムラインにしたかった」があれば、そのままコピペで導入できます。

デザイン	特徴	向いている用途
デフォルト	シンプルな標準型	基本的な時系列・お知らせ
シンプル	装飾を抑えたミニマル系	手順解説・情報整理
ステップ（番号）	番号付きで流れを追いやすい	初期設定・作業手順
ステップ（丸型）	やわらかく視線誘導しやすい	導線・フロー説明
ステップ（縦型）	縦方向の流れを強調	スケジュール・工程管理
ステップ（枠線）	情報を区切って整理しやすい	マニュアル・比較解説

編集画面からデザインをワンクリック切り替えできるので、ブロックごとに使い分けできます。

デフォルト（比較用）

Before

まずはCocoon標準のタイムラインです。

After

ここからは追加するデザインサンプルです。カスタマイズ後の変化を比較してみてください。

シンプル（ミニマル）

• こんな用途におすすめ
  • 手順解説
  • 情報整理
  • 時系列まとめ

余計な装飾を入れず、自然に流れを見せたい時に向いています。

ステップ（番号）

• こんな用途におすすめ
  • 初期設定
  • 会員登録手順
  • 作業マニュアル

番号付きなので、読者が「今どこまで進んだか」を把握しやすくなります。

画像・リスト・ボタンなども入れやすく、実用性が高いタイプです。

ステップ（丸型）

• こんな用途におすすめ
  • 申し込み導線
  • サービス紹介
  • 案内ページ

丸型ラベルで視線を誘導しやすく、「順番に読ませたい時」に相性が良いデザインです。

ステップ（縦型）

• こんな用途におすすめ
  • スケジュール
  • ロードマップ
  • イベント進行

縦方向の流れを強調できるので、「進行感」を見せたい時に向いています。

ステップ（枠線）

• こんな用途におすすめ
  • マニュアル
  • 詳細解説
  • ノウハウ記事

カード風に区切れるので、内容を整理しながら見せたい時に便利です。

カスタマイズ前に｜タイムラインブロックの基本操作（使い方）

カスタマイズを入れる前に、まずはCocoon標準のタイムライン操作を軽く確認しておきます。基本的な流れはシンプルなので普段ブロックエディタを使っている方ならすぐ扱えます。

Cocoonには、タイムライン以外にもタブ・FAQ・ボックス・CTAなど便利な装飾ブロックがあります。全体を知りたい方は、Cocoonブロックまとめ記事も参考にしてみてください。

Cocoonタイムラインブロック｜カスタマイズ前の注意点

基本的にはコードをコピペするだけで導入でき、Cocoon標準環境で動作確認済みです。

Cocoonタイムラインブロックの実装手順｜完成コード

タイムライン系カスタマイズは見た目以上に調整箇所が多く、

• スマホで崩れる
• STEP番号がズレる
• 既存CSSと干渉する

などで時間を使いやすい部分です。

今回はそのあたりも含め、「スマホで見やすい余白感」や「長文タイトルでも崩れにくいバランス」など実際に運用しやすい形に細かく調整しています。

コード量は多めですが、することは「コピペ」が中心。CSSが読めなくてもそのまま導入できます。

カスタマイズ全体の流れ

1. 登録：codocコードクへ会員登録（初回のみお願いします）
2. 入力：有料エリアの内容をご自身で入力してください
3. 確認：プレビューで表示確認して完了です

販売者情報は 「特定商取引法に基づく表記」をご確認ください。