【徹底解説】AFFINGER6でインフォメーションバーを設置する方法

アフィンガーでサイト上部にお知らせ情報を流したい。どうやってカスタマイズすれば「インフォメーションバー」を表示できるの？

こんな疑問を解決していきます。

この記事では、アフィンガーで次の画像のような「インフォメーションバー」の作成方法を解説していきます。

こんな感じのインフォメーションバー（お知らせエリア）が5分ほどで作れます。

ゆう

インフォメーションバーは、おすすめの記事やお知らせ情報ページに誘導するのに効果的なので、まだやってないはサクッと設置しておきましょう！

本記事の内容

• AFIINGERでインフォメーションバーを設置する方法
• インフォメーションバーのカスタマイズ方法
• 流れるインフォメーションバーにする方法

AFFINGER6を検討中の方

AFFINGER6でインフォメーションバーを設置する方法

アフィンガーでインフォメーションバーを設置する手順は次の2つ。

• ウジェットにHTMLを書く(コピペ)
• リンク先のURLを書く
• 表示テキストを書く

HTMLも1クリックでコピペできるようにしたから一瞬でできるよ！

ゆう

ウジェットにHTMLを書く

ウジェットの【ヘッダー画像エリア上】に以下のHTMLをコピペしましょう。

クリックでコピーできます↓

<a href="リンク先のURL">
<strong>表示したいテキスト</strong>
</a>

リンク先のURLを書く

<a href="リンク先のURL">の「リンク先のURL」を移動先のURLに変更してください。

表示テキストを書く

<strong></strong>の間に表示したいテキストを書いてください。

<strong></strong>を消すと細文字になるよ

ゆう

以上でヘッダー画像エリアの上にインフォメーションバーが表示されるので、実際に画面を切り替えて確認してください！

インフォメーションバーのカスタマイズ方法

ここからは設置したインフォーメーションバーのカスタマイズ方法を解説します。

カスタマイズしていくのは次の5つです。

• 色・デザイン
• フォント設定
• 幅の変更
• アイコンを表示
• 流れるインフォメーションバーにする

それでは順に方法を説明していきます。

色・デザインを変更する

インフォメーションバーの背景色・テキスト色は以下から設定できます。

ここで設定できる内容は次の3項目

• 背景色
• テキストカラー
• ストライプデザイン変更

この項目を設定おけば基本デザインはOKです。

幅(高さ)を変更する

インフォメーションバーの高さを変更したい場合は、以下を追加CSSに記述すればできます。

#st-header-top-widgets-box .st-content-width {
	padding: 20px;
}

20pxの部分を任意の数値に調整して使ってください。

アイコンを表示する

インフォメーションバーにはテキストの前にアイコンを表示することもできます。

アイコンを表示したいときは次のコードをテキストの前に貼り付けて使ってください。

[st-i class="表示したいアイコン" ]

アフィンガーにはオリジナルアイコンが用意されています。

アイコンは【FontAwesome不要】AFFINGER6のアイコン一覧と使い方でまとめているので参考にしてください。

流れるインフォメーションバーにする

インフォメーションバーのテキストは簡単に流れる動きをつけることもできます。

方法は以下のショートコードst-mqでHTMLコードをサンドイッチするだけ。

↓こんな感じですね。

marqeeタグは非推奨です

流れる文字のHTMLとして<marquee>タグを説明しているブログも多いです。

しかし、現在のHTMLの記法として、<marquee>タグは廃止されており、一部のブラウザのみ使用可能になっています。

上記で説明したように、AFFINGERには流れる文字にするショートコードがあります。基本的にはショートコードst-mqを使っておくのが無難です。

インフォメーションバーの活用例

インフォメーションバーを設置する主な目的は、「ユーザーに伝えたい情報」を目立たせるのに効果的です。

インフォメーションバーを活用例をいくつか挙げておきますね。

おすすめ記事を設置する

ブログの中で特におすすめしたい記事があるときは、インフォメーションバーに表示しておくとユーザーの目に留まりやすい！

サイドバーにおすすめ記事を載せておく方法もありますが、スマホだとサイドバーは表示されません。トップページも必ずしもユーザーが検索ページから飛んでくれるとは限りません。

インフォメーションバーならPC、スマホ問わず見てもらえる確率が上がります。読んでもらいたい記事があるときは、どんどんインフォメーションバーを活用していきましょう！

セール情報や新着情報をお知らせする

ユーザーに伝えたいセール情報を表示しておくのもおすすめ。

例えば、「楽天スーパーセール」や「Amazonプライムデー」はセール自体馴染み深いのでクリックされやすいですよ。

ブログの記事と関係ない内容でも「セール中だったんだ」という軽いノリで見る人も多いです

まとめ：インフォメーションバーを設置して回遊率を上げよう

今回の記事はAFFINGER6でインフォメーションバーを設置する方法の紹介でした。

まとめると、インフォメーションバー設置は
→ウジェットの「ヘッダー画像エリア上」にHTMLを記載でできます。

インフォメーションバーを設置しておくと見てもらいたいページに誘導しやすいので、設置していない人は是非設置しておきましょう！

AFFINGER6を検討中の方