Cocoon通知エリアをカスタマイズ！スライド表示＆ボタンで誘導力強化

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

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

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

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

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

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

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

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

Cocoon通知エリアの主な機能

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

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

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

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

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

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

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

• スキンによる影響
  この記事のカスタマイズはスキン「なし」で検証済みです。お使いのスキンによってはCSSが重複し表示が崩れることがありますが調整は可能です。（スキンと併用できるかはお問い合わせください）
• 子テーマを利用
  コードは必ず子テーマに記述してください。親テーマに書くとアップデートで上書きされる可能性があります。
• バックアップの推奨
  念のため、編集前にバックアップを取っておくと安心です。特にPHP編集時にミスがあるとサイトが一時的に表示されなくなることがありますが、FTPソフトなどで復元できればすぐに解決できます。
  • 関連記事 バックアップ＆復元方法
    

• サーバー設定の影響
  WAF（セキュリティ設定）が有効だと保存エラーが出る場合があります。一時的にOFFにして作業し、終わったら元に戻してください。ベーシック認証を有効にしている場合も同様です。
  

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

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

実装イメージ

• CSSだけでOK（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;
  }
}

コード解説

• .notice-area
  通知エリア全体の枠を設定。
  テキストが横方向に流れるため、overflow: hiddenで外にはみ出た部分を隠し、white-space: nowrapで1行に固定しています。
• .notice-area-message
  実際に流れるメッセージ部分。
  最初は画面の右端（padding-left: 100%）からスタートし、animationで左方向へスライドしていくように指定しています。
• @keyframes slideMessage
  アニメーションの動きを定義。
  transform: translateX(0)（右端）から
  transform: translateX(-100%)（左端）まで移動させることで、テキストが右→左に流れます。
• @media screen and (min-width: 1024px)
  PCでは画面が広いため、流れる速度をゆっくり（20秒）に変更。
  モバイルよりも自然で読みやすくなります。

カスタマイズのヒント

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

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

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

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

完成イメージ

実装手順

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

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

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

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

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