Cocoon通知エリア（お知らせバー）のカスタマイズ方法｜流れるアニメーション・ボタン化・ヘッダー上表示

• 「Cocoonの通知エリア、なんとなく地味かも…」
• 「自然に目を引く感じにしたい」
• 「お知らせやCTAをもっと見てもらいたい」

そんな時におすすめなのが、通知エリアを流れるお知らせ風にカスタマイズする方法です。

実はここを少し工夫するだけでも、

• 重要なお知らせに気づいてもらいやすくなる
• クリックされやすい見た目に調整できる
• サイト全体がおしゃれに見える

など、サイトの印象や導線が変わります。

この記事では、実際に当サイトでも使っている通知エリアカスタマイズを一式コピペOKで分かりやすくまとめました。

ぜひ気になるものから使ってみてください。

Cocoon通知エリア（お知らせバー）とは？クリック率が上がる理由

Cocoonでは標準機能として搭載されており、お知らせバーとして利用するユーザーも多くいます。

この位置はユーザーが最初に目にするため、自然にクリックされやすい導線になります。

• ファーストビュー直下で視認性が高い
• 全ページ共通で表示できる
• リンク・CTA導線を設置できる

つまり、「見せたい情報を確実に届けられる場所」です。

【重要】やりすぎは逆効果（失敗パターン）

• スライドが速すぎて読めない
• 文字が長すぎて視認性が悪い
• ボタンを目立たせすぎて違和感が出る

通知エリアは「短く・シンプルに・目立たせすぎない」がポイントです。

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

CSSで作る｜Cocoon通知エリアのスライド表示（コピペOK）

まずは、通知エリアを右から左へ流れるアニメーションに変更します。

実装イメージ

実際の動きはこちら。

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

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

CSS

以下の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アニメーションの基本解説はこちら。

ここまでで、通知エリアを流れるアニメーションに変更できます。

このままでも十分使えますが、通知エリアをもっと目立たせたい場合はボタン風デザインや配置変更を組み合わせるのがおすすめです。

• ボタン風デザインの追加（CSS）
• デザイン調整（CSS）
• ヘッダー上への移動（PHP）

functions.phpの編集に慣れていない方は、こちらの記事も参考にしてください。

Cocoon通知エリアにボタン風デザイン追加｜クリックされやすいデザインにする

次に、クリック率をさらに高めるボタン風デザイン追加カスタマイズです。

完成イメージ

ここから先は、実際に当サイトでも使っているクリックされやすい通知エリアの完成版コードをまとめています。

そのまま実装しやすい形で整理しました。

カスタマイズ全体の流れ

1. 登録：codocコードクへ会員登録（初回のみお願いします）
2. 入力：有料エリアの内容をご自身で入力してください
3. 確認：プレビューで表示確認して完了です

販売者情報は 「特定商取引法に基づく表記」をご確認ください。