●僕でもわかるようにAFFINGER6でインフォメーションバーを作成する方法について教えてほしい。
今回はこんなお悩みを解決していきます。
こんな方におすすめ
- AFFINGER6でインフォメーションバーを作りたい方
- ブログをおしゃれにカスタマイズしたい方
- AFFINGER6に関する疑問を解決したい方
本記事の信頼性
ブログをおしゃれに見せることができるインフォメーションバーです。AFFINGERならおしゃれなインフォメーションバーが簡単に作成できます。
インフォメーションバー完成図
上記赤枠がインフォメーションバーですね。インフォメーションバーは、
- ブログをおしゃれに見せる
- 他記事への誘導
- 外部プラットフォームへのリンク
などが可能になります。
収益化UPを目指したいにはインフォメーションバーを作成することで成約UPにもつながるチャンスにもなります。
今回はAFFINGER6のインフォメーションバーの作成方法について詳しくご紹介していきます。
本記事を読めば、簡単にインフォメーションバーを作成できるので参考にしてみて下さい。
AFFINGERの全機能を開放
.
AFFINGERの全ての機能を使いたい方は、ACTION PACK3がお得です。
.
PACK3の商品一覧
.
上記プラグインがセットでついてきます。AFFINGER6の機能を全て活用し、収益速度を上げたい方はチェックしてみてください。
.
＼PACK3の概要なら／
＼PACK3の評判なら／
前置きが長くなりましたが、それでは早速紹介していきます。
目次
AFFINGER6（アフィンガー6）インフォメーションバーを設定する方法
AFFINGER6（アフィンガー6）インフォメーションバーを設定する方法
AFFINGER6のインフォメーションバーを作成する方法について解説します。
下記3ステップで完了です。
インフォメーションバー設定手順3つ
- ①外観カスタマイズからウィジェットを開く
- ②カスタムHTML画面に移動
- ③カスタムHTMLにコードを入力する
順番に見ていきましょう。
手順①：外観カスタマイズからウィジェットを開く
まず管理画面から外観⇒カスタマイズをクリックします。
AFFINGER管理画面：カスタマイズ
カスタマイズをクリックすると下記画面に移ります。
AFFINGERカスタマイズ画面：ウィジェット
カスタマイズ画面から『ウィジェット』をクリックして次に進みます。
手順②：カスタムHTML画面に移動
そのままどんどん進めていきましょう。
AFFINGERカスタマイズ画面：ヘッダー画像エリア上のウィジェット
ウィジェット画面⇒『ヘッダー画像エリア上のウィジェット』をクリック。
AFFINGERカスタマイズ：カスタムHTML
すると上記画面に移るので、『ウィジェットを追加』をクリックします。右にスライドバーが出てくるので『カスタムHTML』を選択して表示させます。
手順③：カスタムHTMLにコードを入力する
カスタムHTML内に下記コードを入力します。
HTMLコード
<a href="表示させたい記事URL"><strong><i class="fa fa-angle-double-right"></i>クリック部分のタイトル<i class="fa fa-angle-double-left"></i></strong></a>
入力するとこんな感じになります。
AFFINGERカスタマイズ：カスタムHTML
ちなみにWEBフォントの＞＞＜＜を使っていますが、他にもおしゃれなフォントはたくさんあります。
Font AwesomeでWEB上のアイコンフォントを作成できるので、他のフォントも気になった方はこちらのリンクからアクセスできます。
AFFINGER6でインフォメーションバーを変更する方法
AFFINGER6でインフォメーションバーを変更する方法
インフォメーションバーを設定した後はお好みでカスタムできます。
下記3つに分けてカスタム方法を紹介しますね。
AFFINGER6のインフォメーションバー変更方法3つ
- ①インフォメーションバーの色を変更する
- ②インフォメーションバーの幅を変更する
- ③インフォメーションバーの文字サイズを変更する
1つずつご説明しますね。
その①：インフォメーションバーの色を変更する
インフォメーションバーの色を変更するにはカスタマイズから可能です。
カスタマイズ⇒基本エリア設定⇒『ヘッダー画像エリア上／下ウィジェット』をクリックします。
インフォメーションバー：ヘッダーエリア色を変更するには？
上記部分でインフォメーションバ―背景色のカスタマイズと文字色の変更ができます。
ちなみに他のサイトを見て『この色マネしたい』なんて時に便利なのがColorpick Eyedropperです。
詳細な使い方は、【無料】Colorpick Eyedropperの使い方【Google chrome拡張機能】で詳しく解説してるので気になった方は参考にしてみてください。
その②：インフォメーションバーの幅を変更する
インフォメーションバーの幅を変更したい時の方法を紹介します。
インフォメーションバー幅を変更するには？
カスタマイズ画面から追加CSSをクリックします。
CSS内に以下のコードをコピーすればOKです。
CSS追加コード
/*インフォメーションバー*/
#st-header-top-widgets-box .st-content-width{
padding:7px!important;
}
上記コードの数字を大きくすれば幅が広くなり小さくすれば狭くなります。お好みのサイズに変更してみて下さい。
その③：インフォメーションバーの文字サイズを変更する
インフォメーションバーの文字サイズを変更するのも追加CSSにコードを追加すればOKです。
インフォメーションバーの文字を大きくするには？
上記部分の文字の大きさですね。追加CSSに下記コードを追加すればOKです。
CSSコードを追加
/*インフォメーションバー*/
#st-header-top-widgets-box .st-content-width{
font-size:12px;
}
上記コードの『12』を変更すれば文字を大きくできたり小さくしたりできます。
好みのサイズに設定してみてください。
>>【AFFINGER6】おすすめの文字サイズと色について解説【記事の見やすさUP】
AFFINGER6で流れるインフォメーションバーを作成する方法
AFFINGER6で流れるインフォメーションバーを作成する方法
続いてAFFINGER6での流れるインフォメーションバーを設定する方法を解説します。
こんな感じで文字が流れるようになります。
簡単なんですぐに完了できます。
AFFINGER6 流れるインフォメーションバー設定手順2つ
- ①HTMLコードを追加する
- ②スマホでインフォメーションバーが動くか確認する
順番に見ていきましょう。
手順①：HTMLコードを追加する
既にインフォメーションバーを設定してる方は、下記位置にHTMLコードを入力していると思います。
外観⇒カスタマイズ⇒ウィジェット⇒ヘッダー画像エリア上のウィジェット⇒カスタムHTMLの場所です。
上記箇所に設定したHTMLコードに以下コードを挿入すれば、インフォメーションバーを動くように変更出来ます。
流れるインフォメーションバーを設定する方法
<div>
<marquee>
インフォメーションバークリック部分のテキスト
</marquee>
</div>
当サイトだと下記のような感じですね。
動くインフォメーションバーの設定方法
流れるインフォメーションバーのコード
<a href="https://tecchanblogs.com/blog-start-method/"><div><marquee>
<strong><i class="fa fa-angle-double-right"></i>WordPressブログを始める(12/3まで超お得なキャンペーン中)<i class="fa fa-angle-double-left"></i></strong>
</marquee>
</div></a>
これで流れるインフォメーションバーの設定ができました。
流れるインフォメーションバーの設定完了
上記画像のようにインフォメーションバーが動きました。
手順②：スマホでインフォメーションバーが動くか確認する
後はスマホ表示でもインフォメーションバーが流れるようになっているか確認しましょう。
うまくいってないと表示が崩れたりするので、そういった場合はコードに間違いがないか確認が必要です。
ちなみにHTMLでなくてもCSSでコード追加すれば流れる文字の表示はできます。ただ、HTMLの方が簡単に設定できるので設定してみてください。
AFFINGER6(アフィンガー6)のインフォメーションバー導入後の注意点
AFFINGER6(アフィンガー6)のインフォメーションバー導入後の注意点
AFFINGER6に限ったことではないですが、流れるインフォメーションバーは読み込むのに多少時間がかかります。
結果的にサイトスピードが遅くなった、とならないようTOPページスピードを確認するようにしましょう。
サイトスピードはユーザーの利便性に関わる部分なのでSEOにも影響します。
Page Speed Insightsでご自身のサイトスピードを調査できるので使用してみてください。
-
【2025年版】Autoptimizeの使い方と設定方法【サイト速度高速化】
続きを見る
まとめ：AFFINGER6でインフォメーションバーの作成は簡単
まとめ：AFFINGER6でインフォメーションバーの作成は簡単
今回はAFFINGER6のインフォメーションバーの作成方法について紹介しました。
AFFINGER6は今回のような細かい設定も簡単に調整できます。当ブログではAFFINGER6の設定について詳しく解説してるので、他の個所を設定できてない方はチェックしてみてください。
>>AFFINGER6のカスタマイズ方法まとめ【目的別にデザインを設定しよう】
まだAFFINGER6の導入を迷ってる方は、こちらの記事でレビューしているので参考にご覧ください。
-
AFFINGER6の評判は本当？利用者のガチ評判を徹底レビュー
続きを見る
本記事が参考になれば幸いです。最後まで読んで頂きありがとうございました。
それでは本日はこの辺りで。
※当サイトはAFFINGER通常版からAFFINGER PACK3を購入し、収益が月6桁までグンと伸びましたので、収益をさらに伸ばしたい方は、参考に以下もどうぞ。
-
【AFFINGER PACK3】AFFINGER6 EX版を徹底レビュー【感想を公開】
続きを見る
-
AFFINGER6の評判は本当？利用者のガチ評判を徹底レビュー
続きを見る
関連記事AFFINGER6（アフィンガー6）の使い方はこれでOK【徹底解説します】