Cocoon通知エリアをカスタマイズする方法｜流れるお知らせ・CTAボタン・ヘッダー上表示

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

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

Cocoonの通知エリアは、サイトを開いた直後に表示される目立つ場所です。

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

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

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

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

を順番に紹介していきます。

• 「少しサイトの雰囲気を変えたい」
• 「Cocoonをもっとサイトっぽく見せたい」

そんな方でも試しやすい内容なので、ぜひ気になるものから使ってみてください。

Cocoon通知エリアとは？クリック率が上がる理由

WordPressテーマCocoonに標準搭載されている「お知らせバー機能」で、ヘッダー直下に表示されます。

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

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

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

なお、通知エリアだけでなく、サイト全体の導線を整えることでクリック率はさらに伸びます。トップページの設計もあわせて見直したい方は、こちらも参考にしてください。

通知エリアは「入口」、トップページは「回遊の起点」です。この2つを組み合わせると、クリックされる流れを作れます。

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

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

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

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

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

さらに通知エリアを活用したい方は、

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

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

Cocoon通知エリアをクリックされやすいデザインにする

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

完成イメージ

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

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

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