PR AFFINGERカスタマイズ

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

6月 13, 2023

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

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

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

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

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

ゆう

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

本記事の内容

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

AFFINGER6を検討中の方

AFFINGER6の導入を検討中の方は「AFFINGER6を4年使用した感想・レビュー」も読んでみてください。

実際にAFFINGERを4年利用した経験をもとに、本音でレビューしました。メリット・デメリットを包み隠さず感想を書きましたので、きっと役に立つと思います。

\今なら当サイト限定の豪華特典付き/

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を検討中の方

AFFINGER6の導入を検討中の方は「AFFINGER6を4年使用した感想・レビュー」も読んでみてください。

実際にAFFINGERを4年利用した経験をもとに、本音でレビューしました。メリット・デメリットを包み隠さず感想を書きましたので、きっと役に立つと思います。

  • この記事を書いた人
  • 最新記事

シャイニーゆう

ブログ歴4年|月収収益6桁達成
30代前半サラリーマン&子育てパパ
副収入で生活を楽にしたいという方向けにブログの魅力を発信中!

-AFFINGERカスタマイズ