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