インフォメーションバーを設置すると、ユーザーの目に留まりやすくおすすめ記事へ誘導できる確率がグンと上がります。
本記事ではそんなインフォメーションバーの設置の仕方を5～10分で完了できるように解説しています。
AFFINEGER6を導入している方はぜひインフォメーションバーを設置してみましょう。
本記事はこんな方向け
- AFFINEGER6を導入しているが、インフォメーションバーの設置方法が分からない
- インフォメーションバーのカスタマイズ方法を教えてほしい
- インフォメーションバーの使い方を教えてほしい
＼当ブログテーマ／
もくじ
AFFINGER6でインフォメーションバーを設置する方法
さっそくAFFINGER6でインフォメーションバーを設置していきましょう。
設置の仕方は以下３ステップです。
- 手順①：カスタマイズからウィジェット追加
- 手順②：3種類のHTMLコードから選択
- 手順③：インフォメーションバーの設置完了
手順①：カスタマイズからウィジェット追加
WordPress管理画面で、以下の手順に沿ってウィジェットを追加しましょう。
①：「外観」
②：「カスタマイズ」
③：「ウィジェット」
④：「ヘッダー画像エリア上のウィジェット」
⑤：「ウィジェットを追加」
⑥：「00_STINGERカスタムHTML」
手順②：3種類のHTMLコードから選択
インフォメーションバーの種類は3種類あります。
以下3種類の中から1つ選択して、テキスト欄にコードを入力します。
コードを入力できたら、URL（赤太文字）とテキスト（黒太字）の部分を任意のものに変更しましょう。
テキストのみ
<p><a href="http://example.com">これはお知らせテキストです</a></p><i class="fas fa-wifi"></i>
流れるテキスト
<div class="st-marquee"> <p><a href="http://example.com">これは流れるダミーテキストです</a></p> </div>
流れるインフォメーションバーはサイトスピードが落ちるのでおすすめしません
揺れるテキスト
<p class="st-horizontal animated animated huto">
<a href="http://example.com">
<i class="st-svg st-svg-exclamation-circle"></i>
横揺れするテキスト
<i class="st-svg st-svg-angle-double-right"></i>
</a>
</p>
アイコンを変更したい場合は、以下の部分のコードを変更します。
アイコンコードについては以下の記事で取得できますよ。
手順③：インフォメーションバーの設置完了
HTMLコードを入力し、満足のいくインフォメーションバーが表示できたら「公開」をクリックしましょう。
これでインフォメーションバーの設置は完了です！
インフォメーションバーのカスタマイズ方法
インフォメーションバーを設置できたら、お好みでカスタマイズしてみましょう。
カスタマイズ内容は以下2点です。
- インフォメーションバーの色を変更
- インフォメーションバーの幅を変更
順番に見ていきましょう。
インフォメーションバーの色を変更
インフォメーションバーの色を変更してみましょう。
まずは以下の手順でヘッダー画像エリアの設定変更画面を表示します。
①：「外観」
②：「カスタマイズ」
③：「基本エリア設定」
④：「ヘッダー画像エリア上／下ウィジェット」
設定変更画面の「ヘッダーエリア上」項目でインフォメーションバーの設定を変更が可能です。
設定変更したら忘れずに「公開」をクリックしましょう～
インフォメーションバーの幅を変更
インフォメーションバーの幅を変更してみましょう。
以下の操作で追加CSS画面を表示させましょう。
「外観」→「カスタマイズ」→「追加CSS」
コード入力欄に以下のコードを貼り付けましょう。
/*インフォメーションバー*/
#st-header-top-widgets-box .st-content-width{
padding:7px!important;
}
「padding:7px!important」の数字の部分を変更することでインフォメーションバーの幅も調整できます。
幅を調整して「公開」をクリックすれば完了です！
まとめ：インフォメーションバーを設置して、おすすめ記事へ誘導しよう
インフォメーションバーを設置すると、ユーザーの目に留まりやすくおすすめ記事へ誘導できる確率がグンと上がります。
インフォメーションバーの設置は10分でできるので、ぜひ導入してみてください。
まだAFFINGER6を導入していない方はこちらからどうぞ！
＼特典付き／
