Cocoon通知エリア｜スライド表示（流れる文字）＆ボタン追加でアピールする方法

Cocoonの「通知エリア」は、サイト全体にメッセージを表示したり特定のページへ誘導したりできる便利な機能です。

ただし、デフォルトデザインはとてもシンプル。

• キャンペーンやお知らせを目立たせたい
• 動きのあるデザインにしたい

そんな方に向けて、この記事では通知エリアの設定方法と、コピペで使えるカスタマイズ例を紹介します。

完成コード（ボタン追加）は記事後半で有料公開中。

どちらもコードをコピペするだけ、作業時間は5分以内と初心者でも簡単実装。当サイトでも実際に導入している実用的なカスタマイズです。

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

Cocoon通知エリアは、WordPressテーマ「Cocoon」の標準機能で、サイトの目立つ場所にメッセージを表示できる便利なツールです。ヘッダー下などに設置されるため、訪問者の目に入りやすく重要なお知らせやページ誘導に最適です。

Cocoon通知エリアの主な機能

• サイト全体に通知を表示
  ページごとではなく、サイト訪問者全員にメッセージを届けられます。
• 背景色・文字色・通知タイプの設定
  「通知（緑）」「注意（黄色）」「警告（赤）」など、重要度に応じて色分け可能。
• リンク設定が可能
  ボタンやリンクを設置して、特定のページに誘導できます。

通知エリアの活用シーン例

• 新着情報やキャンペーン告知
  サイト訪問者に最新情報を素早く伝えたいとき。
• CTA（Call to Action）の誘導
  商品ページや予約フォームへのクリックを促す、集客・コンバージョン向上に。

Cocoon通知エリアを上手に活用すると、訪問者に目立つ情報を届けながら、サイトの回遊率やクリック率を向上させることができます。

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

Cocoon通知エリアをカスタマイズする前に知っておきたい注意点

このカスタマイズは基本的に コピペで安全に導入でき、Cocoon標準環境で動作確認済み です。ただし、利用しているスキンやサーバー設定によっては挙動が変わる場合があります。作業前に以下のポイントを押さえておくと安心して進められます。

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

Cocoonの通知エリアを「右から左へ流れる」スライドアニメーションで動かす方法です。更新情報やキャンペーン案内などを目立たせたいときにぴったり。

実装イメージ

• CSSだけでOK（JavaScript不要）
• Cocoon通知エリアのメッセージが動いて目立つ
• 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;
  }
}

コード解説

• .notice-area：表示枠の設定
  はみ出したテキストを隠し、1行だけで流れるように。
• .notice-area-message：流れるテキスト本体
  右端の外側からスタートし、12秒かけて左へ流れる。
• @keyframes slideMessage：アニメーション本体
  テキストを右→左へ動かす仕組み。自分の幅ぶん左へ移動。
• PCだけ速度変更
  PCではゆっくり動かす設定。画面が広いので20秒に延長。

カスタマイズのヒント

• 流れる速度を変えたい
  animation-duration の秒数を変更します。
  例：animation-duration: 8s;（速い）／20s;（ゆっくり）
• 一度だけ流したい
  infinite を削除し、1回だけ再生されるようにします。
• 反対方向（左→右）に流したい
  translateX の値を逆にします。
  
  from { transform: translateX(-100%); }
to { transform: translateX(0); }

スライドアニメーションの仕組みをもっと知りたい方はこちら。

Cocoon通知エリアにボタンを追加する方法（有料公開）

Cocoonの通知エリアに「Check」などのボタンを追加して特定ページへ誘導できるようにする方法です。デザインを崩さず、通知のクリック率を高められます。

完成イメージ

実装手順

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

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

有料記事では「コピペでOKの完全コード」と「応用デザイン例」を公開中です。

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

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