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

Cocoon通知エリアは、サイト全体にメッセージを表示したり特定のページに誘導する便利な機能。ごくシンプルでデザインは単調です。

• キャンペーンやお知らせを目立たせたい
• もっと動的にしたい

そんな方に向けて、この記事では通知エリアの設定とコピペで実装できるカスタマイズ方法を解説します。

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

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

Cocoon通知エリアとは？機能と活用シーン

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

主な機能

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

活用シーン

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

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

Cocoon通知エリアの基本設定方法

Cocoon通知エリア｜カスタマイズの注意点と特徴

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

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

Cocoon通知エリア｜CSSで実現するスライドアニメーション

通知エリアのメッセージを右から左へスムーズに流す方法です。

実装イメージ

• スライドするテキストメッセージ
• PCはゆっくり、スマホは速め
• CSSのみで実装可能

実装手順

以下の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 {
   to {
   transform: translateX(-100%); /* 左へ移動 */
   }
}

/* 1023px以上（PC） */
@media screen and (min-width: 1023px) {
   .notice-area-message {
   animation-duration: 24s; /* PCでのスライド速度 */
   }
}

簡単に解説

• .notice-area：通知メッセージのコンテナ
  • overflow: hidden;：はみ出た文字を隠す
  • white-space: nowrap;：改行せず1行で表示
• .notice-area-message：流れるメッセージ本体
  • padding-left: 100%;：初期位置を右端に設定
  • animation: slideMessage 12s linear infinite;：スライドアニメーション適用
• @keyframes slideMessage
  • メッセージを左方向に100%移動させる
• メディアクエリ
  • 画面幅1023px以上（PC）でスライド速度を遅く設定

スライドする仕組みはCSSのアニメーションを使用しています。詳しくは以下の記事で解説しているので、ご覧いただくとさらに理解が深まります。

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

Cocoonの通知エリアに、テキストの横にボタンを表示する方法です。例えば「Check」ボタンを追加すれば、特定ページへの誘導やクリック促進が簡単にできます。

実装イメージ

実装手順

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

• PHPでボタンを追加
• CSSでボタンのデザインを調整

具体的な実装コードや応用例は、有料記事でコピペ可能な形で公開しています。

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

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