Cocoonの「タイムライン」ブロックは、手順解説や申し込みフローの表示にぴったり。
しかし、デフォルトのままだと「見た目がシンプルすぎる」「ブロックごとに変えられない」「CSSカスタムでうまく調整できない」と感じることもあります。
そこでこの記事では、デザインで差をつけたい方に向けてタイムラインスタイルをクリックで切り替えできるカスタマイズを紹介します。
- 最大6種類のデザインをページ内で自由に使い分け
- サイドバーでワンリックで切り替え
- ポイント色・STEPラベル色も簡単設定
- 導入はコードを2か所に貼るだけ、作業目安は約5分
実装手順は記事後半で公開しています。標準のタイムラインをそのまま使うのではなく、用途別に使い分けられるようになります。
ひとつひとつ、細かい部分まで丁寧に調整しました。
About meこの記事を書いた人
ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。
- ドメインパワー : 40
- 2023年より有料記事公開
累計520件（月間約20件）のご購入実績
（2025年11月現在） - カスタマイズを丁寧にサポート
選べるデザイン一覧｜Cocoonタイムラインのカスタマイズ例
Cocoonのタイムラインは、用途に合わせて 標準＋カスタム5種（計6スタイル）を用意しました。
- 標準：シンプルで使いやすい
- シンプル：ミニマルで落ち着いた印象
- ステップ式（番号）：シンプルに番号で手順を表現
- ステップ式（丸型）：STEP番号で手順が直感的
- ステップ式（縦型）：縦方向に流れを強調
- ステップ（枠線）：視覚的に区切りが明確
サイドバーの「スタイル」からワンクリックで切り替え可能。色やSTEPラベルの色も簡単に変更できます。
以下は各スタイルの要点・用途例・表示サンプルです。気になるスタイルをクリックして試してください。
ひとつでも「これいいかも！」と思えるスタイルがあれば、気軽にお試しください。
Before：標準
- Cocoonデフォルト
2025年1月ブログ開設Cocoonテーマを使ってブログをスタート！最初の記事を投稿しました。
2025年6月初の収益化アフィリエイト広告を導入し、初の収益を達成。記事数は50本に到達。
2025年12月月間10万PVSEO対策を強化し、月間10万ページビューを突破！
シンプル（ミニマル）
- 装飾最小、どんな記事にも馴染む
- 視認性が高く汎用性あり
- 10週間前目的地の決定
旅行先をリサーチし、家族でハワイ旅行を決定。航空券を予約しました。
- 8週間前宿泊先の手配
オーシャンビューのホテルを予約。観光スポットのリストアップを開始。
- 1日前荷造りと最終確認
スーツケースに荷物を詰め、パスポートや予約確認書をチェック。
ステップ式（番号）
- 数字のみでシンプルに順序を示す
- 普通の箇条書きリストでは使えない「ブロック」が追加できる
- ラベル起床
6:30にアラームで起床。軽くストレッチをして体を目覚めさせます。
- ラベル朝食
栄養バランスを意識した朝食をとる。パン、卵、フルーツ、コーヒー。
- ラベル通勤
余裕を持って家を出発。電車の中では読書やポッドキャストを楽しみます。
ステップ式（丸型）
- 丸型ラベルで視線誘導
- 手順解説に最適
- ラベルWordPressインストール
サーバーにWordPressをインストール。公式サイトから最新バージョンをダウンロードし、セットアップを完了します。
- ラベルテーマ選択
Cocoonテーマをインストールして有効化。カスタマイズ性を活かしてサイトのデザインを整えます。
- ラベルプラグイン設定
SEOやバックアップ用のプラグインを導入。サイトの機能強化とセキュリティ対策を施します。
ステップ式（縦型）
- 中央線＋矢印で縦の流れを強調
- インパクト大
- ラベル開会式
9:00-9:30 開会挨拶と講師紹介。参加者同士のアイスブレイクで親睦を深めます。
- ラベルワークショップ
10:00-12:00 実践的なグループワークで、マーケティングの最新トレンドを学びます。
- ラベルネットワーキング
13:00-15:00 ランチを兼ねた交流タイム。名刺交換やディスカッションで人脈を広げます。
ステップ式（枠線付）
- 各項目を枠線で囲み、情報を整理して見せる
- ラベル材料準備
必要な材料（例：鶏肉、野菜、調味料）を揃え、調理器具を準備。レシピに合わせて正確に計量します。
- ラベル調理
材料をレシピ通りに調理。火加減や時間を守り、美味しく仕上げます。オーブンを180℃に予熱。
- ラベル盛り付け
料理を美しく盛り付け、彩りにハーブを添える。写真を撮ってSNSでシェア！
Cocoonタイムラインの基本操作（はじめての方向け）
この記事ではカスタマイズ方法を中心に解説していますが、初めて使う方向けに基本操作だけ簡単にまとめます。
- Step1タイムラインを追加する
投稿・固定ページの編集画面で＋ →「タイムライン」で検索 → 追加
- Step2内容を入力する
追加すると以下のフィールドが表示されます。
- ラベル：年月・手順番号など
- タイトル：項目名（任意）
- 本文：説明や補足
本文には 画像 や リスト を入れて見やすくできます。
- Step3スタイルを選択する
- サイドバー「ブロック」タブ →「スタイル」
- この記事のカスタマイズで追加したザインから選択可能
- Step4色を設定する
サイドバーの「色設定」で変更可能。
- 背景色
- ポイント色（番号・ドット等）
- 文字色
※ このカスタマイズではボーダー色は使用しません。
Cocoonタイムラインブロック｜カスタマイズの注意点と特徴
このカスタマイズは基本的に コピペで安全に導入でき、Cocoon標準環境で動作確認済み です。ただし、利用しているスキンやサーバー設定によっては挙動が変わる場合があります。作業前に以下のポイントを押さえておくと安心して進められます。
この記事のカスタマイズはスキン「なし」で検証しています。スキン独自のCSSが優先される場合、表示が崩れることがありますが、優先度調整（CSSの追加）でほぼ解決できます。（スキンと併用できるかはお問い合わせください）
CSS・PHP は必ず子テーマへ記述してください。親テーマへ書くとアップデート時に上書きされ、カスタマイズが消えてしまう可能性があります。
特にPHPを編集する場合、記述ミスで画面が一時的に真っ白になることがあります。バックアップがあればすぐに復元できるので作業前にひとつ取っておくと安心です。
関連記事：バックアップ＆復元方法
WAF（セキュリティ設定）が有効だと保存エラーが出る場合があります。その場合は作業中だけWAFを一時的に OFFにし、完了後に ON に戻してください。
Cocoonタイムラインブロックの実装手順｜完成コードのご案内
ここから先は、紹介してきたデザインをそのまま使える 「完成版コード」 をまとめた有料パートです。
「設定に迷わず、確実に動く形で導入したい」方向けに、動作確認済み・コピペで使えるコードを整理して公開しています。
PHPの設定
目的：「スタイル切り替え機能」を追加
記述場所：子テーマの functions.php
CSSの設定
目的：「各スタイルのデザイン」を定義
記述場所：子テーマのスタイルシート (style.css)
- WordPress管理画面で 「外観」→「テーマファイルエディター」 を開く
- 子テーマ（Cocoon Child） が選択されているか確認
- ファイル一覧から 「Cocoon Child: テーマのための関数 (functions.php)」 を開く
- 既存のコードは消さず、//以下に子テーマ用の関数を書く の下の行に追記
- WordPress管理画面で 「外観」→「テーマファイルエディター」 を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から 「Cocoon Child: スタイルシート (style.css)」 を開く
- 既存のコードは消さず、/* 子テーマ用のスタイルを書く */ の下の行に追加
functions.phpに PHP コードを貼り付けstyle.cssに CSS を貼り付け- サイドバーで希望のスタイルを選択
- プレビューで表示を確認 → 完成！
最短で導入したい方はぜひご活用ください。
■ サイト名
Turicco
■ サイトURL
https://turicco.com/
■ 運営者情報
運営責任者：はるみ
お問い合わせ先：https://turicco.com/contact/
■ 購入方法
コンテンツ販売サービス「codoc（コードク）」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。
■ 納品方法
購入完了後、対象の記事が閲覧可能になります。
■ お支払い方法
・クレジットカード
・デビットカード
・プリペイド型クレジットカード
・Apple Pay
・Google Pay
・コンビニ決済
※クレジットカード情報はSSLで暗号化され、決済サービス「Stripe」に直接送信されます。管理人がカード情報を取得・保管することはありません。
■ 返金・キャンセルについて
codoc株式会社の利用規約第10条（返金）に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。
■ 販売価格
500円（税込）
Comment 記事の感想を書き込んでいただけると幸いです