Cocoon通知エリアのカスタマイズ方法｜流れる文字（スライド表示）とボタン追加

Cocoon通知エリアをカスタマイズすると、視線導線を活かしてクリック率を底上げできます。

• 重要なお知らせを確実に見せたい
• キャンペーン導線を強化したい
• デザインをワンランク上げたい

通知エリアは、これらを同時に改善できるパーツです。

この記事では、

• 流れるスライド表示
• ボタン付きCTA化

の2つを、コピペだけで実装できる方法をご紹介します。

当サイトでも実際に使っている、収益導線に直結するカスタマイズ例です。

Cocoon通知エリアとは？機能と使い方の基本

Cocoon通知エリアは、WordPressテーマ「Cocoon」標準機能のお知らせパーツです。ヘッダーのすぐ下に表示されるのでページを開いた瞬間に目に入ります。

大事なお知らせやCTA（Call To Action）を置くのにピッタリの場所で、クリック率を上げやすいのが特徴です。

主な機能

• サイト全体に通知を表示
  全ページ共通でメッセージを届けられます。
• 色分けによる重要度表示
  通知（緑）・注意（黄）・警告（赤）など、視覚的に優先度を伝えられます。
• リンク・ボタン設置
  商品ページや予約フォームなど、収益につながる導線に直接誘導できます。

なぜ通知エリアはクリック率が上がるのか？

• ファーストビュー直下にある
  本文より先に目に入るので、大事な情報が埋もれません。
• 動きで注意を引ける
  静止したものより、動くものに人は反応します。スライド表示を加えると、更新情報やキャンペーンが自然に目に入ります。
  
  ※文章は短く、長くなりすぎないようにしましょう。

活用シーン

• 新着情報やキャンペーン告知
• 商品ページ・予約フォームへのCTA誘導

通知エリアを上手に使うと、サイトの回遊率とクリック率を同時にアップできます。

Cocoon通知エリアの基本設定方法（テーマ機能でONにする）

CSSで作る｜スライドアニメーション付き通知エリア

Cocoonの通知エリアを、右から左へ流れるスライドアニメーションに変更する方法です。

ファーストビュー直下に「動き」を加えることで、更新情報やキャンペーン導線が自然と目に入る設計になります。

実装イメージ

実際の動きはこちら。

ページを開いた瞬間に視線を引きつける導線になります。

See the Pen 通知エリア｜スライドアニメーション by Turicco (@Turicco) on CodePen.

▶ このカスタマイズでできること

• CSSだけで実装（JavaScript不要）
• 通知メッセージを自動でスライド表示
• PC／スマホで速度を切り替え可能

コピペでできる実装手順

以下のCSSを子テーマの style.css に追加します。

/* 通知エリアの流れるテキスト */
.notice-area {
  overflow: hidden; /* はみ出しを隠す */
  white-space: nowrap; /* 1行固定 */
}

/* 流れるメッセージ */
.notice-area-message {
  display: inline-block;
  padding-left: 100%; /* 画面外（右）から開始 */
  animation: slideMessage 12s linear infinite;
}

/* アニメーション定義 */
@keyframes slideMessage {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* PCのみ速度変更 */
@media screen and (min-width: 1024px) {
  .notice-area-message {
    animation-duration: 20s;
  }
}

コードの仕組み（重要ポイントだけ）

• padding-left:100% で画面外から登場させる
• translateX(-100%) でテキスト幅ぶん左へ移動
• PCは表示領域が広いため、ゆっくり流す設計

カスタマイズ方法

• 流れる速度を変えたい
  animation-duration の秒数を変更します。
  例：8s（速い）／20s（ゆっくり）
• 1回だけ流したい
  infinite を削除
• 逆方向に流したい
  translateX の値を逆にします。

from { transform: translateX(-100%); }
to { transform: translateX(0); }

CSSアニメーションの基本解説はこちら。

Cocoon通知エリアにボタンを追加する方法

通知エリアに「Check」などのボタンを追加し、特定ページへ直接誘導する方法です。

テキスト＋CTAを組み合わせることで、通知のクリック率をさらに高められます。

完成イメージ

See the Pen 通知エリア｜スライドアニメーション（ボタン付） by Turicco (@Turicco) on CodePen.

実装手順

通知エリアにボタンを追加するには、以下の2ステップです。

1. functions.php にコードを追加
2. CSS でボタンデザインを調整

デザイン崩れを防ぐ完全コードと、リンク付きボタンの安全な実装方法を公開しています。

• 作業は2ステップだけで完了
• 通知エリアのテキストを保持したままボタンを追加可能
• デザインも自由にカスタマイズ

HTMLやPHPが初めての方でも手順通りに進めれば実装できます。

作業時間はわずか約5分。通知エリアでぐんとアピールしたい方はぜひご活用ください。

以下は有料コンテンツのご案内および特定商取引法に基づく表記です。