ウェブサイトに訪問した人に、優先的に伝えたい情報があるときは、アラートバーを利用することをお勧めします。
なぜなら、ウェブサイトやブログの上部にアラートバーを設置することで、アクセスした人が真っ先にその情報を目にすることになるからです。
この記事では、WordPressでアラートバーを設置する方法を紹介します。
目次
アラートバー（告知バー）とは？
アラートバーは、ウェブサイト上部や下部に表示される通知バーのことです。このバーを利用することで、重要な情報や特別なお知らせを訪問者に目立つ形で伝えることができます。
アラートバーは以下のような場面で役立ちます。
重要な情報の強調
アラートバーは、ウェブサイトのトップやヘッダーの目立つ位置に表示されます。そのため、重要な情報やお知らせを訪問者に注目して伝えることができます。
例えば、セールやキャンペーンの告知、重要なアップデートやイベントの案内など、訪問者にとって役立つ情報を目立つ形で提供できます。
緊急性の伝達
アラートバーは、緊急のお知らせや重要なメッセージを効果的に伝える手段です。
例えば、天災や重大なニュースが発生した場合、アラートバーを利用して訪問者に迅速に伝えることができます。これにより、訪問者はすぐに情報にアクセスできるため、必要な対策や行動を取ることができます。
コール・トゥ・アクションの促進
アラートバーは、訪問者に特定の行動を促すための効果的な手段です。
例えば、メーリングリストへの参加や特別なオファーへのアクセスなど、訪問者に対してアクションを起こしてもらうためのリンクやボタンを配置することができます。
このようなコール・トゥ・アクションは、ウェブサイトの目的達成やコンバージョンの増加につながる重要な要素です。
以上のように、アラートバーはウェブサイト上で重要な情報を効果的に伝えるための貴重なツールです。
適切に活用することで、訪問者の注目を引きつけ、重要なメッセージや行動を促すことができます。
アラートバーを設置する方法
アラートバーを作成＆設置するには主に、プラグインを使用する、テーマの機能を利用する、カスタムコーディングするという方法があります。それぞれについて紹介します。
プラグインを使用する
WordPressのプラグインは、ウェブサイトの機能を拡張するための便利なツールです。アラートバーを手っ取り早く作成するためには、プラグインを使用する方法がお勧めです。
以下に、おすすめのプラグインとその理由をご紹介します。
Easy Notice Bar
Easy Notice Bar は、無料で使えるアラートバー（告知バー）です。
テキストの入力、フォント サイズの選択、リンクの追加、色のカスタマイズなどの基本的な操作は可能です。
他の多くのプラグインとは異なり、Easy Notice Bar はフローティング バーのみを提供します。さまざまな種類のポップアップを作成することもできません。
ですから、複雑なことをしたい場合は向いていませんが、逆にいうと、シンプルに”臨時休業のお知らせ”のうような用途しか考えていない場合は、向いているとも言えます。
WPFront Notification Bar
WPFront Notification Barは、WordPress で通知バーを作成できるもう 1 つのシンプルな無料プラグインです。バーはページの上部または下部に配置できます。
バーを自動的に閉じるように設定したり、訪問者に閉じるボタンを追加したりできます。たとえば、バーの開始日と終了日を設定することで、バーが表示されるタイミングを構成することもできます。
これらのプラグインは、どちらもWordPressのプラグインディレクトリから無料で入手できます。ただし、基本的に英語なので、その点は注意が必要です。
有料のものであれば、日本語対応しているものや、もっといろいろ設定できるものもあります。（Themifyでも有料の告知バー：Anouncement bar プラグインがあります。）
いずれにしても、各プラグインの評価やレビューを確認し、ウェブサイトの要件やデザインに合ったプラグインを選択してください。
WordPressテーマの機能を利用する
一部のWordPressテーマには、アラートバーを作成するための組み込み機能が備わっている場合があります。ですからその機能を活用してアラートバーを作成する方法もあります。
例えば、Themify Ultoraテーマを使用すれば、有料のAnnouncement Barというアラートバープラグインが無料で使えます。以下にAnnouncement Barプラグインの特徴を説明します。
Announcement Bar
Announcement Barは、次のようなプラグインです。
指定した時間範囲でアナウンスを自動化およびスケジュールし、美しいデザイン プリセットまたは独自のスタイルとデザインを使用してアナウンス バーの外観をカスタマイズし、すぐに任意の WordPress テーマで動作させることができます。レスポンシブで Retina に対応したアナウンス バーは、デバイスやプラットフォームに関係なく、訪問者にコンテンツとメッセージを強調表示します。（Themify公式サイトより）
Announcement Barプラグインは、有料プラグインですが、Themify Ultoraテーマに限らず、Themifyの有料テーマを使用することで無料で利用できます。
テーマの機能を活用して、魅力的なアラートバーを作成してください。詳細情報やプラグインのデモは、Announcement Barの紹介ページ(公式サイト)で、ご覧いただけます。
カスタムコーディングする
アラートバーをより高度にカスタマイズするためには、HTMLとCSSのカスタムコーディングを行う方法があります。以下に、ChatGPTに聞いた、おすすめのHTML/CSSコーディング例を2つ紹介します。
簡潔なアラートバーのコーディング
<div class="alert-bar">
<p class="alert-message">重要なお知らせがあります！</p>
<a href="#" class="alert-link">詳細を確認する</a>
</div>
(HTML)
.alert-bar {
background-color: #ffcc00;
padding: 10px;
text-align: center;
}
.alert-message {
color: #333;
font-weight: bold;
}
.alert-link {
color: #333;
text-decoration: none;
}
.alert-link:hover {
text-decoration: underline;
}
(CSS)
このコーディング例では、簡潔なアラートバーを作成しています。.alert-barクラスでアラートバーの背景色や余白を指定し、.alert-messageクラスでメッセージのスタイルを設定しています。また、.alert-linkクラスでリンクのスタイルを指定しています。
スライドイン効果を持つアラートバーのコーディング
<div class="alert-bar-slide">
<p class="alert-message">重要なお知らせがあります！</p>
<a href="#" class="alert-link">詳細を確認する</a>
</div>
(HTML)
.alert-bar-slide {
background-color: #ff0000;
color: #fff;
padding: 10px;
text-align: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
animation: slide-in 0.5s ease-out forwards;
}
.alert-message {
font-weight: bold;
}
.alert-link {
color: #fff;
text-decoration: none;
}
.alert-link:hover {
text-decoration: underline;
}
@keyframes slide-in {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
(CSS)
このコーディング例では、スライドイン効果を持つアラートバーを作成しています。.alert-bar-slideクラスでアラートバーの背景色やテキストカラー、位置や幅を指定し、position: fixed;によって画面上部に固定されるようにしています。また、animationプロパティを使用してスライドインのアニメーション効果を追加しています。
これらのコーディング例を参考にして、独自のアラートバースタイルを作成してみてください。HTMLとCSSの基本知識が必要ですが、カスタムコーディングによって自由度の高いアラートバーを実現できます。
アラートバーを設置する方法のまとめ
この記事では、WordPressでアラートバーを作成する方法についてお伝えしました。
アラートバーはウェブサイトの重要な情報を訪問者に効果的に伝えるためのツールです。プラグインを使用した方法、テーマの機能を利用する方法、そしてカスタムコーディングする方法の3つを紹介しました。
それぞれの方法には利点と欠点がありますので、ウェブサイトの要件や目的に合わせて適切な方法を選択してください。
