Cocoonの通知エリアをカスタマイズ！流れる文字アニメーションとボタンを設定する方法

Cocoonでは、テーマ標準機能を使って通知エリアを簡単に表示できます。

通知エリアは、サイト訪問者に重要なメッセージを伝えたり、特定のページへ誘導するための便利な機能です。

この記事では、以下の通知エリアのカスタマイズ方法を紹介します。

どちらもコードは貼り付けるだけ、作業時間は５分もかからない内容にまとめています。

サイトの目立つ部分に配置されるため上手に活用したいですね。

Cocoon通知エリアの設定方法

Cocoonの通知エリアの設定方法です。

まず、管理画面からCocoonの設定画面を開き、「通知」タブを選択します。

設定項目

通知エリアの各設定項目は以下の通りです。

通知表示

• 「通知エリアを表示する」を有効にすると、ヘッダー下に通知エリアが表示されます。
• 通知メッセージを入力し、「通知表示」を有効にしてください。

通知メッセージ

• 通知エリアに表示するメッセージを入力します。
• 訪問者に知らせたい情報をわかりやすく記述しましょう。

通知URL

• 通知エリアにリンクを設定する場合は、ここにURLを入力します。
• 例: https://turicco.com/

リンクの開き方

• 通知リンクを新しいタブで開く場合は、target="_blank"を有効にします。

通知タイプ

• 通知の種類を選択できます。
  • 通知（緑色）
  • 注意（黄色）
  • 警告（赤色）
• 選択するタイプによって背景色が変わり、重要度も変わります。

通知エリア背景色

• 通知エリアの背景色を自由に設定できます。
• デフォルトの色を変更したい場合は、ここで指定してください。

通知エリア文字色

• 通知エリアのテキストカラーを設定できます。
• 読みやすい配色を選びましょう。

設定後の確認

すべての設定が完了したら、「変更を保存」ボタンをクリックし、サイトで通知エリアが正しく表示されているか確認してください。

これでCocoonの通知エリアの設定は完了です。以下は通知エリアのカスタマイズを紹介します。

Cocoonの通知エリア｜メッセージをスライド表示する

実装イメージ

• 通知メッセージが右から左へスムーズにスライド
• PCではスライド速度を遅く、スマホでは少し速めに
• CSSで実装可能

実装方法

以下の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でのスライド速度 */
	}
}

CSSの解説

.notice-area（通知エリアのスタイル）

.notice-area {
	overflow: hidden; /* はみ出た部分を隠す */
	white-space: nowrap; /* 文字を折り返さず1行で表示 */
}

この .notice-area クラスは、通知メッセージを表示するコンテナの役割を果たします。

• overflow: hidden;
  • 子要素（.notice-area-message）がコンテナよりも大きくなってはみ出した場合に見えなくする。
  • これにより、スライドするメッセージが表示領域の外から出現し左側に消えていく動きを作れる。
• white-space: nowrap;
  • 通知メッセージのテキストを改行させず、1行で表示するようにする。これがないと、長いメッセージが複数行に折り返されてしまいスライドアニメーションが意図した通りに動かなくなる。

.notice-area-message（通知メッセージのスタイル）

.notice-area-message {
	display: inline-block;
	padding-left: 100%; /* 初期位置を画面の右端に設定 */
	animation: slideMessage 12s linear infinite; /* アニメーション適用 */
}

この .notice-area-message クラスは、流れる通知メッセージのスタイルを指定しています。

• display: inline-block;
  • 通知メッセージをインラインブロック要素として扱うことで、横方向のサイズ調整をスムーズにおこなう。
• padding-left: 100%;
  • メッセージの初期位置を画面の右端（100% の位置）に設定し、画面の右端からメッセージが流れてくるように見える。
• animation: slideMessage 12s linear infinite;
  • slideMessage というアニメーションを適用。
  • 12s → メッセージが左端に到達するまでに 12秒。
  • linear → 一定の速度で移動（加減速なし）。
  • infinite → 無限ループする。

@keyframes slideMessage（スライドアニメーションの定義）

@keyframes slideMessage {
	to {
		transform: translateX(-100%); /* 左へ移動 */
	}
}

この @keyframes ルールは、メッセージの移動アニメーションを定義しています。

• to
  • to はアニメーションの最終状態を定義する（0% の省略形）。
• transform: translateX(-100%);
  • メッセージを 左方向へ 100% 分 移動させる。
  • つまり、padding-left: 100% で右端にいたメッセージが、画面の左端に向かって流れていく。
  • これにより、通知メッセージが画面右から左へスライドする動きになる。

PC向けのスライド速度調整（1023px以上）

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

これはメディアクエリを使って、画面の横幅が 1023px以上（PC画面）の場合にスライドの速度を変更する処理です。

• @media screen and (min-width: 1023px)
  • 画面幅が 1023px 以上（PC向け）になった場合に、指定したCSSが適用される。
• animation-duration: 24s;
  • PCでは animation-duration を 24秒 に変更し、スライドのスピードを ゆっくり にする。
  • モバイル（デフォルトでは12秒）よりも 2倍遅く なる。

---

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

Cocoonの通知エリア｜メッセージにボタンを追加する

こちらは、通知エリアのメッセージの横に「Check」ボタンを表示する方法です。

実装イメージ

Cocoonの通知エリアにボタンを追加する方法はいくつかありますが、メッセージ内容をカスタマイズするためのフィルターフックを利用することでシンプルに実装可能です。

実装手順は以下の２ステップ。２ヶ所にコードを設定するだけなので作業時間は５分ほどです。

以下、有料公開です。コピペで実装できる具体的なコードを掲載します。

特定商取引法に基づく表記
サイト名	Turicco
サイトURL	https://turicco.com/
お問い合わせ	https://turicco.com/contact/
購入方法	コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。
納品方法	記事公開
販売価格	200円
お支払い 方法	クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済
	※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。
返金・キャンセルについて	codoc株式会社利用規約 第10条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。