初心者お知らせバーって何？
どんなことができる機能なの？
設定方法を知りたい…
そんな疑問に答えます。
お知らせバーはSWELL固有の機能です。
ページ上部の目立つエリアにお知らせを設置することで、誘導したいページへブログ訪問者を導くといった用途で使います。企業サイトなら問い合わせページへの導線。アフィリエイトブログならCVさせたい広告主のページなどへの導線といった使い方ができる便利な機能です。
本記事ではSWELLのお知らせバーの設定方法とカスタマイズTIPSを紹介します。
【基本知識】お知らせバーって何？
まずはお知らせバーの基本についてです。
重要はお知らせを分かりやすく伝える機能
上の画像はSWELLでお知らせバー機能を有効化したサンプルです。最上部の赤いパーツがお知らせバーです。
お知らせバーは各ページの最上部に表示されているので、とにかく目立ちますよね？重要なお知らせを伝える場合に有効な機能です。
お知らせバーの表示内容は簡単に設定できる
お知らせバーはカスタマイザーから設定する形式です。表示するテキストやリンク先の他、お知らせバーの配色などもカスタマイザーから設定できます。
リンク先URLは外部サイトでもOK
お知らせバーに設定するリンク先は、サイト内部のページだけでなくサイト外のURLも指定できます。企業サイトであれば新商品のPR。アフィリエイトブログであれば、成約記事といったサイト内部の記事を指定できます。
サイト外のURLを指定することもできるので、アフィリエイトブログ運営者は成約記事のURL以外にも広告主のアフィリンクを設置してCVを狙えます。
記事ごとにお知らせバーの内容を変更できる
記事ごとにお知らせバーの内容を変更するケースについてです。例えばアフィリエイトブログなら、記事ごとに別々のアフィリエイトリンクを設置したいですよね？
記事ごと以外にも、カテゴリーやタグごとにお知らせバーの内容を変更できれば便利。じつはSWELLにはお知らせバー内容を条件ごとに変更可能なカスタマイズ方法があります。
かんたお知らせバーの内容を記事ごとにカスタマイズする方法は次の記事で紹介しています。
お知らせバーの設定方法
SWELLのお知らせバーの設定を紹介します。
基本的にカスタマイザーからポチポチ設定するだけなので、お知らせバーの設置はそれほど難しくありません。
お知らせバーの基本設定
「外観」→「カスタマイズ」をクリックし、カスタマイザーを起動。
「サイト全体設定」→「お知らせバー」をクリック↓
お知らせバーの表示位置で「表示しない」以外を選択↓
| オプション | 解説 |
|---|---|
| 表示しない | お知らせバーを非表示にするオプション |
| ヘッダー上部に表示 | ヘッダーエリアの最上部にお知らせバーが表示されます。 |
| ヘッダー下部に表示 | ヘッダーエリアとメインビジュアルの間にお知らせバーが表示されます。 |
「表示内容の設定」で各オプションを入力↓
| オプション | 解説 |
|---|---|
| 表示タイプ | お知らせバーの表示スタイル。 |
| お知らせ内容 | お知らせバーに表示されるテキスト。 |
| リンク先のURL | お知らせバークリック時のリンク先URL |
表示タイプで「テキスト位置固定（ボタン配置）」を選択した場合は、「ボタンテキスト」オプションが追加表示されます。合わせて入力しましょう。
お知らせバーの任意の設定
お知らせバーの背景色、フォントカラーなど任意の設定です。
引き続きカスタマイザーでの設定です。
背景効果、カラー設定など配色などのオプションがあります↓
サイトデザインに合わせて、好みのオプションを選択しましょう！
「公開」をクリックし、設定を有効化します。以上の設定でお知らせバーの設定は終了です。
かんたお知らせバーが表示されているか確認しましょう！
FAQ
SWELLのお知らせバーに関する設定・仕様をFAQ形式でまとめました。
お知らせバーにアフィリエイトリンクを設置することは可能？
可能です。
アフィリエイトブログ運営者のサイトを見ていると、サイトで推している記事へのリンク以外にも、ASP指定のアフィリエイトリンクを設置しているブログをよく見かけます。
記事ページごとに、専用のお知らせバーを設定できる？
できます。
テンプレートを直接編集しなくても、以下のようなカスタマイズが実現できます↓
- 記事Ａには記事Ａ専用のお知らせバーを設定。
- 記事Ｂには記事Ｂ専用のお知らせバーを設定。
かんた記事ごとに異なるお知らせバーを設定する方法については次の記事で紹介しています。
お知らせバーの設定をしたのに表示されません。
次のポイントをチェックしましょう。
- カスタマイザーが「下書き」になっている。
- キャッシュを読み込んでいる。
お知らせバーの設定をしたのに、トップページに表示されません。
下層ページには表示されているのに、トップページに表示されないケースがあります。
ヘッダーで透過オプションを有効化している場合には、トップページ上にお知らせバーは表示されません。これはSWELLの意図した仕様です。
TIPS
透過トップページにもお知らせバーを表示させる
トップページで透過オプションを有効化している場合にPC表示でお知らせバーを表示させる方法についてです。
透過オプション有効時でもお知らせバー部分のHTMLコードはトップページに出力されるので、CSSを追加することで表示できます。
CSSはカスタマイザー内の追加CSSなどに設置してください。
お知らせバーの文字の大きさが「大きく」の場合。
追加するCSSはカスタマイザーの設定によって微妙に違います。お知らせバーの設定オプションで文字サイズの大きさを「大きく」に指定している場合は次のコードを追加します↓
@media (min-width: 960px) {
.home .c-infoBar {
display:block;
height:46px;
}
.home .l-header {
margin-top:46px;
}
}お知らせバーの文字の大きさが「普通」の場合。
お知らせバーの設定オプションで文字サイズの大きさを「普通」に指定している場合は次のコードを追加します↓
@media (min-width: 960px) {
.home .c-infoBar {
display:block;
height:42px;
}
.home .l-header {
margin-top:42px;
}
}お知らせバーの文字の大きさが「小さく」の場合。
お知らせバーの設定オプションで文字サイズの大きさを「小さく」に指定している場合は次のコードを追加します↓
@media (min-width: 960px) {
.home .c-infoBar {
display:block;
height:39px;
}
.home .l-header {
margin-top:39px;
}
}他のテーマとの比較
SWELLのお知らせバー相当の機能があるか、ブログ系テーマとの比較です。
比較一覧表
| テーマ名 | 機能の有無 | 個別記事の切り替え |
|---|---|---|
| AFFINGER7 | なし | なし |
| Cocoon | ある | なし |
| DIVER | ある | なし |
| JIN:R | なし | なし |
| SANGO | ある | なし |
| STORK19 | ある | なし |
| SWELL | ある | フィルターフックあり |
| THE THOR | ある | なし |
今回調査した限り、SWELLのお知らせバーと類似の機能を持つテーマは無料のCocoonをはじめかなり存在します。WordPressテーマ開発者も「これは良さそう」と思えば貪欲にテーマに取り入れているのかなという印象です。
基本的にサイトを通じて共通のお知らせを表示させるというのが主流。記事ページごとにお知らせを変更する仕組みがあるのはSWELLだけでした。
まとめ
WordPressテーマSWELLのお知らせバー機能について紹介しました。
コーポレートサイトを運営している事業者であれば、問い合わせや資料請求ページへのリンク。アフィリエイトブログ運営であれば、記事ごとにアフィリエイトリンクを設置するといった使い方ができます。
かんたぜひお知らせバーを活用してみてください！
本記事は記事執筆時に利用可能な最新バージョンのSWELL(2.7.6.1)を調査した内容です。異なるバージョンでは紹介した内容と異なる場合があります。