Cocoonのタイムラインは、「＋」からブロックを追加し、アイテム数を決めて中身を入れ、色を整えれば完成します。
CSSやプラグインを足さなくても、標準機能だけで「STEP1→STEP2」のような手順や時系列を見やすく並べられます。
検索すると、古いショートコード中心の解説や、すでに修正された不具合の話も出てきます。
そのため、今の画面と違って戸惑うこともあるかもしれません。
ラベル・タイトル・本文の入れ方や、設定欄が見つからないときの選び方を押さえておけば、初めてでも迷わず作れます。
ブロックでの作り方を軸に、ショートコードとの使い分けや、うまく表示されないときの対処まで順に解説します。
Cocoonのタイムラインの使い方はブロックを追加して4ステップで完成する
Cocoonのタイムラインは、ブロックエディターでタイムラインブロックを追加し、次の4ステップで作れます。
- STEP1：投稿画面の「＋」からタイムラインブロックを追加する
- STEP2：タイムライン全体を選択してアイテム数を決める
- STEP3：各アイテムにラベル・タイトル・本文を入力する
- STEP4：ポイント色・背景色・文字色・ボーダー色を整える
Cocoonの標準機能だけで作れるため、CSSやプラグインを追加する必要はありません。
基本操作は、ブロックの追加と右側の設定サイドバーで完結します。
Cocoonのタイムラインで作れる表示と向いている記事
タイムラインは、手順や時系列を縦に並べて見せるための機能です。
各アイテムは、左側のラベル、右側のタイトル、その下の本文という形で並びます。
たとえばラベルに「STEP1」、タイトルに「申し込み」、本文に「フォームに必要事項を入力する」と入れると、1つ目の工程ができあがります。
同じ形でSTEP2、STEP3と続けていけば、丸いポイントでつながった流れの図になります。
順番が大事な情報ほど、ただの箇条書きよりタイムラインのほうが前後関係が伝わりやすくなります。
向いているのは、会員登録や予約の申込手順、旅行の1日目から3日目までの日程、WordPressの設定方法、経歴、作業フローなどです。
ラベルには「STEP1」のほかに年月や時刻も入れられるので、経歴や1日のスケジュールを紹介する記事にも使えます。
工程を1つのタイムラインに詰め込みすぎると、スクロールが長くなり目的のSTEPを探しにくくなります。
工程が多いときは、大きな区切りごとに見出しを分け、タイムラインも流れごとに分けて置くと読みやすくなります。
ブロックとショートコードの違いと書き方
Cocoonのタイムラインには、ブロックで作る方法とショートコードで作る方法の2つがあります。
公式サイトの更新情報によると、タイムラインはまず2018年9月のCocoon 1.1.9でショートコード機能として追加されました。
その後、2019年3月のCocoon 1.7.4.1でブロックエディター向けのタイムラインブロックが加わり、より手軽に使えるようになっています。
| 比較項目 | タイムラインブロック | ショートコード |
|---|---|---|
| 向いている環境 | ブロックエディター（Gutenberg） | クラシックエディター・過去記事 |
| 操作のしやすさ | 「＋」から追加して画面上で入力 | タグを手入力する |
| 色の調整 | 設定サイドバーで4種類の色を選べる | ブロック方式ほど視覚的には調整しにくい |
| 主な用途 | これから新しく作る手順・時系列 | 既存記事の修正・リライト |
表のとおり、これから新しく作るならブロックが向いており、ショートコードは過去の記事を直すときに役立ちます。
ブロックエディターを使っているなら、タイムラインブロックを使うのがいちばん手軽です。
一方で、公式マニュアルには今もタイムラインショートコードの利用方法が載っているため、使えなくなった機能と考える必要はありません。
ショートコードは、外枠の[timeline]と、アイテム用の[ti]を入れ子にして書きます。
基本の形は、[timeline]と[/timeline]の間に、[ti label=”STEP1″ title=”申し込み”]本文[/ti]を必要な数だけ並べる書き方です。
[ti]や[timeline]の閉じタグを書き忘れると、表示が崩れたり意図しない構造になったりします。
手入力するときは公式の作例を雛形にし、開始タグと閉じタグの数がそろっているかを見てから保存しましょう。
タイムラインと合わせて、サイトのバナーも整えたい人はこちら WordPressのバナー編集はどこから？種類別の編集場所と画像・リンクの変え方
Cocoonのタイムラインブロックの使い方（追加から入力まで）
タイムラインブロックは、投稿・固定ページのどちらでも同じ手順で使えます。
「＋」からタイムラインを追加してアイテム数を決める
公式FAQによると、Cocoonの専用ブロックはブロック挿入ツールの「＋」から追加できます。
探し方は2通りあります。
1つ目は、「＋」を押して検索欄に「タイムライン」または「Cocoon」と入力する方法です。
2つ目は、ブロック一覧の「Cocoonブロック」カテゴリを開き、その中からタイムラインを選ぶ方法です。
名前が分かっているなら検索、ほかのCocoonブロックもあわせて見たいならカテゴリから、と使い分けるとスムーズです。
本文の行で「/timeline」と入力して呼び出す方法を紹介する記事もあります。
追加できたら、最初にアイテム数を決めます。
アイテム数は、タイムライン全体を選択したときに右側に出るブロック設定から変更できます。
必要なSTEP数を先に決めておけば、後から項目を足したり減らしたりする手間が減ります。
内側のタイトルや本文を選んだ状態では、右側にアイテム数や色の設定が表示されません。
設定が見つからないときは、タイムライン全体の外枠をクリックして選択し直すのが近道です。
外枠を選んだら、右側の「ブロック」設定を開いて、アイテム数の欄を見てください。
ラベル・タイトル・本文を入力する（リスト・画像も入れられる）
アイテム数が決まったら、各アイテムの中身を入力していきます。
入力する欄と、それぞれに書く内容の例は次のとおりです。
- タイムライン全体のタイトル：何の流れかを示す見出し（例：会員登録の流れ）
- ラベル：順番や時点を示す短い言葉（例：STEP1、2026年4月、10:00）
- タイトル：その工程の名前（例：申し込み、本人確認、ログイン）
- 本文：工程の具体的な操作や説明（例：フォームに必要事項を入力して送信する）
ラベルは順番や時点、タイトルは工程名、本文は具体的な操作、と役割を分けると流れがひと目で伝わります。
本文は1行の説明だけで終わらせる必要はありません。
公式のデモには、タイムラインの本文にリストを置いた例があります。
1つの工程で確認することが複数あるときは、本文にリストを入れて項目を分けると読みやすくなります。
また、各アイテムの本文に文章だけでなく画像を入れた利用例も紹介されています。
手順ごとにスクリーンショットを置けるので、WordPressやアプリの操作説明のように画面を見せたい記事と相性のよい使い方です。
どのブロックでも自由に入れられるとは限らないため、使いたいブロックが挿入できるかは実際のエディターで確かめてください。
Cocoonタイムラインの色の変え方とカスタマイズの使い分け
見た目はまず標準の色設定で整え、それで足りない場合だけCSSに進むのが安全な順番です。
標準設定で変えられる4つの色
公式サイトによると、タイムラインの色設定は2019年11月のCocoon 2.0で強化され、4種類の色を変えられるようになりました。
色は、タイムライン全体を選択したときの右側のブロック設定から変更します。
| 設定項目 | 変わる場所 | 使い方の目安 |
|---|---|---|
| ポイント色 | 各アイテムをつなぐ丸いポイント | サイトのメインカラーに合わせてアクセントにする |
| 背景色 | タイムラインの背景 | 本文の背景になじむ色にする |
| 文字色 | タイムライン内の文字 | 背景との差がはっきり出る色にする |
| ボーダー色 | タイムラインの外枠 | ポイント色と同系色か、控えめな色にする |
表の4色をすべて変える必要はありません。
迷ったら本文の配色はそのままにして、ポイント色だけをサイトのアクセントカラーに変えるのがおすすめです。
背景・文字・ポイントをすべて派手な色にすると、文字が読みにくくなりサイト全体の統一感も落ちます。
背景色を変えたときは、文字色との組み合わせがスマホの画面でも読みやすいかを見ておきましょう。
CSSを書く前に、標準の4色設定でどこまで整うかを試してください。
CSSでカスタマイズするなら子テーマを使う
標準設定で調整できるのは、主に4つの色です。
ポイントや線の形など、デザインそのものを変えたい場合はCSSでのカスタマイズが必要になります。
標準の色設定を土台にし、追加CSSで複数のデザインに発展させた例を紹介する記事もあります。
初心者のうちは標準設定で作り、物足りなくなってからCSSを取り入れる段階的な使い方が向いています。
親テーマのファイルを直接編集すると、Cocoonを更新したときに変更した部分が上書きされて消えてしまいます。
テーマファイルを編集する場合は、公式GitHubでも推奨されているとおり子テーマを使いましょう。
また、CSSを入れても、スキンやCocoon・WordPressのバージョンによって表示に差が出ることがあります。
公開前にはPCとスマホの両方でプレビューし、ポイントや文字の位置が崩れていないかを確かめてください。
Cocoonタイムラインの使い方がうまくいかないときの対処
タイムラインが思いどおりに表示されないときは、操作ミスなのか、過去の不具合に似た現象なのかを切り分けるところから始めます。
設定欄が出ない・項目やドットが表示されないとき
よくある症状と対処は、次の表のとおりです。
| 症状 | 考えられる原因 | 対処 |
|---|---|---|
| 右側にアイテム数や色の設定が出ない | 内側の文章だけを選択している | タイムライン全体の外枠を選択し直す |
| 配置してもアイテムが表示されない | 2024年3月に報告された挿入時の不具合（修正済み） | Cocoonの更新状況を確認する |
| 丸いポイント（ドット）が表示されない | 2024年4月に報告されたCSS側の不具合（修正確認済み） | 色設定より先にバージョンを確認する |
表の2つ目と3つ目は、どちらも2024年に公式フォーラムで報告され、その後修正されています。
古い不具合と同じ症状に見えても、まずCocoonが最新版になっているかを確認するのが先です。
次の順番で進めると、原因を絞り込みやすくなります。
最初に、サイトのバックアップを取ってからCocoonを更新します。
次に、タイムラインの外枠を選択し、設定が表示されるかを確かめます。
そのうえで、最新版でも同じ症状が再現するかを見ます。
それでも直らなければ、Cocoonの公式フォーラムに同じ報告がないかを調べます。
バックアップを取らずにテーマを更新すると、万一表示が崩れたときに元へ戻せなくなります。
2026年10月の調査時点では、公式アップデート一覧上の最新公開版はCocoon 2.9.6です。
ただし、最新版でも環境によって挙動が異なる場合があります。
2026年4月公開の2.9.2.6でも、タイムラインなどのブロック内でボタンの文字色が親要素の色を引き継いでしまう問題が直されており、表示まわりの修正は今も続いています。
項目を削除できない・削除した項目が戻るとき
項目の削除は、古い記事と現在の状況が食い違っている点に注意が必要です。
2022年ごろの解説記事には、余ったポイントは削除できないと説明しているものがあります。
一方で2024年2月には、7項目のうち1項目を削除して保存したのに、再編集すると空の項目が戻ってくるという報告が公式フォーラムに寄せられました。
この現象はアイテム数と内部のブロック数のずれが原因とされ、その後修正されています。
古い記事にある「削除できない」という説明が、現在のCocoonにもそのまま当てはまるとは限りません。
項目を減らしたいときは、現行版でタイムライン全体を選択し、アイテム数の設定から操作してみてください。
うまく減らせない場合も、自分の操作ミスと決めつけず、テーマが最新版かどうかを確かめると切り分けやすくなります。
Cocoonのタイムラインの使い方まとめ
Cocoonのタイムラインは、「＋」からブロックを追加し、アイテム数を決め、ラベル・タイトル・本文を入れて色を整えれば完成します。
新しく作るならブロック、過去記事の修正ならショートコードと使い分けると迷いません。
表示や削除で困ったときは、古い記事の説明より先にCocoonの更新状況を見直しましょう。
Q. タイムラインの中に画像は入れられますか？
A. 各アイテムの本文に画像を入れた利用例があります。
挿入できるブロックは実際のエディターで確認してください。
Q. ブロックとショートコードはどちらを使えばいいですか？
A. ブロックエディターならタイムラインブロックが手軽です。
クラシックエディターの記事や過去記事の修正ではショートコードも使えます。
Q. CSSでデザインを変えるときの注意点は？
A. テーマファイルを編集するなら子テーマを使いましょう。
公開前にPCとスマホの両方で表示を確かめると安心です。