新型コロナウイルスに感染しない・広げないために|内閣官房新型コロナウイルス感染症対策推進室

メッセージ通知バーをヘッダーに設置する|WordPress・Cocoon

Cocoon_メッセージ通知バーをヘッダーに設置する WordPress

今回は、WordPressのCocoonでサイトの上部にメッセージ通知バーを設置する手順をご紹介します。

【↓通知バー設置前】
Cocoon_通知設定_非表示

【↓通知バー設置後】
Cocoon_通知設定_表示

通知バーはページ全体で常に表示されますので、訪問者に特定のメッセージをアピールしたいときに有効です。

現在、世界中で蔓延している新型コロナウィルスに関する情報を少しでも促したいと思い、
「内閣官房の新型コロナウイルス感染症対策」のサイトへのリンクを設定しました。

 

Cocoon:通知バーの設定

メガホンと女性

 

(1)WordPress管理画面(ダッシュボード)の「Cocoon設定」をクリックして下さい。
Cocoon設定

(2)Cocoon設定のメニュータブ一覧の「通知」をクリックして下さい。
Cocoon_通知

(3)「通知設定」の画面が表示されます。
Cocoon_通知設定の画面

 

Cocoon:通知設定の手順

ノートパソコンのアイキャッチ

★Cocoonの通知設定は6項目あります。

①通知表示
②通知メッセージ
③通知URL
④リンクの開き方
⑤通知タイプ
⑥色

Cocoon_通知設定

 

①通知表示

★通知エリアの表示と非表示を切り替えます「通知エリアの表示」のチェックを有効にして下さい。

②通知メッセージ

★通知エリアに表示させたいメッセージの文字列を入力して下さい。

③通知URL

★通知メッセージにリンクを埋め込むことができます。
転送したいサイトやページのURLを入力して下さい。

④リンクの開き方

★通知に設定したURLをクリックした時に、新しいタブで開くようにしたい場合はチェックを有効にして下さい。

⑤通知タイプ

★通知エリアの背景色を設定できます。
「緑色」「黄色」「赤色」から選択できます。

⑥色

★通知エリアの「背景色」と「文字色」が好きな色に設定できます。
⑤で背景色を設定していてもこちらが優先されます。

 

設定が終わったら「変更をまとめて保存」をクリックして下さい。
変更をまとめて保存

保存すると、上部のプレビュー欄に反映されますので実際の表示イメージが確認できます。

 

以上で通知エリアの設定は完了です。

あとは必要に応じて通知メッセージの変更や表示・非表示の管理をしましょう。

コメント