サイト型トップページの作り方を公開しています！Check

Cocoonタイムラインを有料テーマ級にカスタマイズ！SWELL風デザインを簡単に実現

アイキャッチ｜Cocoonタイムラインブロック Cocoon
2025年07月25日
Cocoon
デザイン切り替え
記事内に広告が含まれています

WordPressテーマ「Cocoon」には、標準でタイムラインブロックが用意されています。

手順や流れをわかりやすく伝えるのに便利ですが、デフォルトの見た目はシンプルすぎて、物足りなさを感じる方もいるでしょう。

  • 「もっとおしゃれに見せたい」
  • 「ページごとに複数のデザインを使い分けたい」
  • 「有料テーマSWELLのような洗練デザインに憧れる」

そんな方に向けて、テーマ移行なしでSWELLテイストの雰囲気に近づけるカスタマイズをご紹介します。

このカスタマイズでできること
  • サイドバーからスタイルをクリックで切り替え
  • 最大5種類のデザインをページ内で自由に使い分け
  • ポイント色・STEPラベル色もサイドバー操作で簡単に変更
  • 導入はコードを2か所に貼るだけ、作業目安は約5分

実装手順は記事後半で有料公開しています。。

Cocoonのタイムラインは、少しのCSS＋PHPで「見やすい・伝わる・運用がラク」なブロックに進化。このサイトでも愛用しているカスタマイズです。

＼先に完成コードを見たい方／
すぐに実装手順を見る
スポンサーリンク

About meこの記事を書いた人

はるみです
吹き出し／女性

ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。

  • ドメインパワー : 40（2025年8月時点）
  • 2023年より有料記事公開
    累計460件（月間約20件）のご購入実績
  • カスタマイズを丁寧にサポート

こんなデザインが可能に！Cocoonタイムラインのカスタマイズ例

Cocoonテーマの「タイムライン」ブロックをカスタマイズすると、視覚的におしゃれで使いやすいタイムラインを簡単に作れます。

デザインは 標準＋カスタム4種類＝全5スタイル を用意しました。

  1. 標準：シンプルで使いやすい
  2. シンプル：ミニマルで落ち着いた印象
  3. ステップ式（丸型）：STEP番号で手順が直感的
  4. ステップ式（縦型）：縦方向に流れを強調
  5. ステップ（枠線）：視覚的に区切りが明確

サイドバーからスタイルを選択するだけで切り替え可能。ポイント色やSTEPラベル色もサイドバー操作で簡単に変更できます。サイト全体の雰囲気や記事内容に合わせて最適なスタイルを選んでみてください。

以下、各スタイルの特徴、使用例、実際の表示サンプルを掲載しますので導入の参考にしてください。

ひとつでも「これいいかも！」と思ったスタイルがあれば、ぜひ試してみてください。

標準

Cocoonテーマにデフォルトで備わっているベーシックなタイムライン。シンプルで使いやすい反面、やや単調に感じる場合もあります。

特徴

  • 左に細いライン＋丸アイコンで区切る
  • ラベルと本文が左揃えのシンプル設計
  • 履歴・年表・軽いリスト表示に最適
例：ブログ運営の経過
  • 2025年1月
    ブログ開設

    Cocoonテーマを使ってブログをスタート！最初の記事を投稿しました。

  • 2025年6月
    初の収益化

    アフィリエイト広告を導入し、初の収益を達成。記事数は50本に到達。

  • 2025年12月
    月間10万PV

    SEO対策を強化し、月間10万ページビューを突破！

シンプル

余計な装飾を省いたミニマルなタイムライン。落ち着いた印象で、どんなテーマにも自然になじみます。

特徴

  • シンプルで上品、汎用性が高い
  • 履歴・進行状況・軽めの手順解説に◎
例：旅行プランの準備手順
  • 1ヶ月前
    目的地の決定

    旅行先をリサーチし、家族でハワイ旅行を決定。航空券を予約しました。

  • 2週間前
    宿泊先の手配

    オーシャンビューのホテルを予約。観光スポットのリストアップを開始。

  • 1日前
    荷造りと最終確認

    スーツケースに荷物を詰め、パスポートや予約確認書をチェック。

ステップ式（丸型）

丸型の「STEPラベル」で順番が直感的に伝わるスタイル。手順を強調したいときに最適。

特徴

  • 丸いSTEP番号で流れがわかりやすい
  • PCは左ライン、スマホは下破線で区切り
  • サービス説明・マニュアル記事に最適
例：WordPressの初期設定手順
  • ラベル
    WordPressインストール

    サーバーにWordPressをインストール。公式サイトから最新バージョンをダウンロードし、セットアップを完了します。

  • ラベル
    テーマ選択

    Cocoonテーマをインストールして有効化。カスタマイズ性を活かしてサイトのデザインを整えます。

  • ラベル
    プラグイン設定

    SEOやバックアップ用のプラグインを導入。サイトの機能強化とセキュリティ対策を施します。

ステップ式（縦型）

縦のラインで流れをしっかり表現するダイナミックなスタイル。インパクトを出したいときに便利。

特徴

  • 中央に破線と矢印で上から下へ流れを表現
  • STEP番号を大きく強調
  • イベント進行表やストーリーテリング記事に最適
例：セミナーの1日スケジュール
  • ラベル
    開会式

    9:00-9:30 開会挨拶と講師紹介。参加者同士のアイスブレイクで親睦を深めます。

  • ラベル
    ワークショップ

    10:00-12:00 実践的なグループワークで、マーケティングの最新トレンドを学びます。

  • ラベル
    ネットワーキング

    13:00-15:00 ランチを兼ねた交流タイム。名刺交換やディスカッションで人脈を広げます。

ステップ式（枠線付）

各項目を枠線で囲み、区切りを明確にしたスタイル。情報をきれいに整理したいときに便利。

特徴

  • 各アイテムを枠線で囲んでスタイリッシュに
  • STEP番号＋ラベルを横並びで省スペース
  • 製品紹介・レシピ・操作チュートリアルに最適
例：料理レシピの手順
  • ラベル
    材料準備

    必要な材料（例：鶏肉、野菜、調味料）を揃え、調理器具を準備。レシピに合わせて正確に計量します。

  • ラベル
    調理

    材料をレシピ通りに調理。火加減や時間を守り、美味しく仕上げます。オーブンを180℃に予熱。

  • ラベル
    盛り付け

    料理を美しく盛り付け、彩りにハーブを添える。写真を撮ってSNSでシェア！

これらのカスタムデザインは、記事後半でPHP＋CSSの実装方法を有料公開しています。

＼この記事のデザインを5分で導入／
完成コードを購入する
スポンサーリンク
目次に戻る

Cocoonタイムラインブロックの使い方と設定方法

Cocoonには標準で「タイムライン」ブロックが搭載されており、手順通りに進めるだけで簡単にタイムラインを作成できます。ここでは基本的な使い方を 4ステップ でご紹介します。

  • Step1
    タイムラインを追加

    投稿や固定ページの編集画面で、ブロック追加（＋）をクリック。検索バーに「タイムライン」と入力し、タイムラインブロックを選択します。

  • Step2
    内容を入力

    ブロックが追加されると、「ラベル」「タイトル」「本文」といったフィールドが表示されます。流れに合わせて文章や見出しを入力してください。

    • 内容は後から編集できます
    • 画像・リスト・アイコンを組み合わせるとより分かりやすくなります
  • Step3
    スタイルを選択

    サイドバーの「ブロック」タブから「スタイル」を切り替えると、外観をリアルタイムでプレビューできます。

    • デフォルト（Cocoon標準）
    • シンプル
    • ステップ式（丸型ラベル／縦型）
  • Step4
    完成

    記事をプレビューで確認し、問題なければ完了です。

スポンサーリンク
目次に戻る

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

イメージ画像／ポイント

カスタマイズは基本的にコードを貼り付けるだけで安全に導入できますが、利用しているスキンやサーバー環境によっては影響がでる場合があります。安心して作業を進めるために次の点を確認しておくとスムーズです。

  • スキンによる影響
    この記事のカスタマイズはスキン「なし」で検証済みです。お使いのスキンによってはCSSが重複し表示が崩れることがありますが調整は可能です。（スキンと併用できるかはお問い合わせください）
  • 子テーマを利用
    コードは必ず子テーマに記述してください。親テーマに書くとアップデートで上書きされる可能性があります。
  • バックアップの推奨
    念のため、編集前にバックアップを取っておくと安心です。特にPHP編集時にミスがあるとサイトが一時的に表示されなくなることがありますが、FTPソフトなどで復元できればすぐに解決できます。
  • サーバー設定の影響
    WAF（セキュリティ設定）が有効だと保存エラーが出る場合があります。一時的にOFFにして作業し、終わったら元に戻してください。ベーシック認証を有効にしている場合も同様です。
スポンサーリンク
目次に戻る

Cocoonタイムラインブロックの実装手順｜完成コードのご案内（有料）

ここから先は有料記事での公開となります。すぐに導入できる「完成版コード」をご用意しました。

PHPの設定

目的：「スタイル切り替え機能」を追加

記述場所：子テーマの functions.php

CSSの設定

目的：「各スタイルのデザイン」を定義

記述場所：子テーマのスタイルシート (style.css)

  1. WordPress管理画面で 「外観」→「テーマファイルエディター」 を開きます。
  2. 子テーマ（Cocoon Child） が選択されていることを確認します。
  3. 右側のファイル一覧から 「Cocoon Child: テーマのための関数 (functions.php)」 をクリックします。
  4. 既存のコードは消さず、//以下に子テーマ用の関数を書く の下の行に追記します。
phpの記述について
  1. WordPress管理画面で 「外観」→「テーマファイルエディター」 を開きます。
  2. 子テーマ（Cocoon Child）が選択されていること を確認します。
  3. ファイル一覧から 「Cocoon Child: スタイルシート (style.css)」 を開きます。
  4. 既存のコードは消さず、/* 子テーマ用のスタイルを書く */ の下の行に追加します。
CSS編集／スタイルシート

参考記事 Cocoonカスタマイズ｜HTML・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 記事の感想を書き込んでいただけると幸いです

タイトルとURLをコピーしました