Cocoonタイムラインブロック｜SWELL風カスタマイズ３つのデザインで汎用性アップ！

Cocoonのタイムラインブロックについて。

タイムラインはテーマ独自のブロック機能の一つで、手順や流れを視覚的に表すために便利です。

• 「Cocoonをもっと使いこなしたい」
• 「SWELLの洗練されたデザインに憧れるけど、テーマを変えるのはハードルが高い…」

そんな方におすすめのカスタマイズをご紹介します。

この記事では、有料テーマ「SWELL」風のシンプル＆おしゃれなタイムラインデザインをCocoonで手軽に再現する方法をまとめました。

このサイトでも愛用中のカスタマイズなので、使い心地はお墨付きです♪

手軽におしゃれをプラスしたい方は、ぜひ試してみてくださいね。

実装イメージ｜Cocoonタイムラインブロック

デザインは全3種＋標準の4パターン

それぞれのデザインは、Cocoonの「タイムラインブロック」でサイドバーから選ぶだけで切り替え可能。
ページ内でも、異なるデザインを自由に組み合わせて使うことができます。

見た目のバリエーションが増えるだけで、タイムラインの表現力は格段にアップ。デザインや配色も柔軟にカスタマイズできるので、サイト全体の雰囲気に合わせて自由に調整してみてくださいね。

以下は、今回紹介するカスタマイズを適用したタイムラインの表示イメージです。

• デフォルト
• シンプルスタイル
• ステップ式（丸型デザイン）
• ステップ式（縦型デザイン）

デフォルト（Cocoon標準）

Cocoonテーマに最初から備わっているベーシックなタイムライン。シンプルで使いやすいですが、少し物足りなさを感じる方もいるかもしれません。

シンプルスタイル

余計な装飾を省いたミニマルなスタイル。

ブログ記事の進行や履歴表示などにも使いやすく、落ち着いた印象に仕上がります。

• サイドバーの色設定で「ポイント色」の色が変更可能
• デザインを邪魔せず、どんなテーマ配色にもなじみやすいのが魅力です

ステップ式（丸型デザイン）

タイムラインに「ステップ感」や「順番」を持たせたいときに便利なデザイン。丸型ラベルで手順や流れを視覚的にわかりやすく表現できます。

• 吹き出しのような丸型の「STEPラベル」が付いた可視性の高いレイアウト
• モバイルでは左の線は表示されず、コンテンツが全幅表示されます
• サービス説明、申し込みの流れ、マニュアル記事などにおすすめ

カラーカスタマイズ（STEP部分）

.timeline {
  --my-custom-color: #efbf75; /* STEPラベルや矢印の色設定はここ */
}

※ --my-custom-color の値を変更するだけで、サイト全体のSTEPカラーが一括反映されます。

ステップ式（縦型デザイン）

縦のラインでしっかりと流れを見せるダイナミックなタイムラインスタイル。見た目にもインパクトがあり、コンテンツの印象をぐっと引き締めてくれます。

• 中央にラインを通し、上から下へ進む流れが直感的に伝わる構造
• セミナーやイベントのスケジュール、ストーリーテリング型の構成に最適

カラー設定は共通

.timeline {
  --my-custom-color: #efbf75; /* カラー名やカラーコードで指定 */
}

ステップ式（丸型デザイン）と共通設定です。この変数を使えば、２スタイルのラベルや矢印のカラーを自由に調整できます。

Cocoonタイムラインブロックの使い方

Cocoonでは標準で「タイムラインブロック」が搭載されており、手順通りに進めるだけで簡単にタイムラインを作成できます。

ここでは、基本的な使い方を4ステップでご紹介します。

カスタマイズの注意点と特徴

カスタマイズはスキンやサーバー環境の影響を受けることがあるため、以下の注意点を確認しながら進めてください。

• スキンによる影響
  • このカスタマイズはスキン「なし」で検証しています。お使いのスキンによっては、CSSの重複等で意図しないスタイルになる場合があります。
• 子テーマを利用
  • 必要なコードは必ず子テーマに記述してください。
• バックアップの重要性
  • 編集前に必ずバックアップをおこなってください。
  • バックアップ＆復元方法
  • 特にPHPに記述ミスがあるとサイトが表示されなくなる可能性があるため、FTPソフト等で元に戻せるようにしておくと安心です。
• PHPエラーが発生した場合の対処

実装手順

実装手順は以下の２ステップ。

それぞれのコードを子テーマに貼り付けるだけでOKです。

ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。