Cocoon通知エリア｜スライド表示（流れる文字）＋CTAボタン追加カスタマイズ【コピペOK】

「Cocoonの通知エリア、もっと目立たせたい…」
「クリックされる導線を作りたい」

そんなときは、スライド表示＋ボタン追加のカスタマイズが効果的です。

通知エリアはファーストビュー直下に表示されるため、サイト内でもっとも視線が集まる場所のひとつ。ここを改善するだけで、クリック率や回遊率が大きく変わります。

• 読者を収益記事に自然に流せる
• 記事を読まなくてもクリックされる導線になる

この記事では、以下の2つをコピペだけで実装できる方法を解説します。

• スライドアニメーションで視線を引く方法
• CTAボタンを追加してクリック率を上げる方法

当サイトでも実際に使用している、収益導線に直結するカスタマイズです。

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通知エリアにボタン（CTA）を追加する方法

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

完成イメージ

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

実装手順

1. functions.php にコードを貼り付け（ボタンを追加）
2. CSSでボタンデザインを調整

このコードを使えば、「通知エリアにクリックされるボタン導線」をそのまま再現できます。

さらに、

• スマホでも崩れない設計
• クリックしやすいボタン配置
• デザイン調整方法

まで含めた「完成版コード」です。

functions.phpの編集はミスするとサイトが表示されなくなるため、確実に仕上げたい方は完成コードをご利用ください。

CTAボックスを使えば、通知エリア以外にも収益導線を作れます。

以下は有料コンテンツのご案内および特定商取引法に基づく表記です。