AFFINGER6（アフィンガー6）のインフォメーションバー作成方法を解説

困ってる人

●アフィンガー6でインフォメーションバーてどうやって作るの？

●僕でもわかるようにAFFINGER6でインフォメーションバーを作成する方法について教えてほしい。

今回はこんなお悩みを解決していきます。

こんな方におすすめ

AFFINGER6でインフォメーションバーを作りたい方
ブログをおしゃれにカスタマイズしたい方
AFFINGER6に関する疑問を解決したい方

本記事の信頼性

当ブログはAFFINGER6を使用しています。インフォメーションバーの作成方法について画像を使って解説できます。

ブログをおしゃれに見せることができるインフォメーションバーです。AFFINGERならおしゃれなインフォメーションバーが簡単に作成できます。

インフォメーションバー完成図

上記赤枠がインフォメーションバーですね。インフォメーションバーは、

ブログをおしゃれに見せる
他記事への誘導
外部プラットフォームへのリンク

などが可能になります。

収益化UPを目指したいにはインフォメーションバーを作成することで成約UPにもつながるチャンスにもなります。

今回はAFFINGER6のインフォメーションバーの作成方法について詳しくご紹介していきます。

本記事を読めば、簡単にインフォメーションバーを作成できるので参考にしてみて下さい。

AFFINGER6の評判について

AFFINGER6の購入前に評判やメリット・デメリットについて確認しておきたいという方は、AFFINGER6の特典14個付きレビュー評判を徹底解説を参考にしてみて下さい。

前置きが長くなりましたが、それでは早速紹介していきます。

1 AFFINGER6（アフィンガー6）インフォメーションバーを設定する方法
2 AFFINGER6でインフォメーションバーを変更する方法
3 AFFINGER6で流れるインフォメーションバーを作成する方法
- 3.1 手順①：HTMLコードを追加する
- 3.2 手順②：スマホでインフォメーションバーが動くか確認する
4 AFFINGER6(アフィンガー6)のインフォメーションバー導入後の注意点
5 まとめ：AFFINGER6でインフォメーションバーの作成は簡単

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

当サイトは<a href="https://tecchanblogs.com/blog-start-method/">WordPressブログを始める(12/3まで超お得なキャンペーン中)</a>と入力しています。

ちなみにWEBフォントの＞＞＜＜を使っていますが、他にもおしゃれなフォントはたくさんあります。

Font AwesomeでWEB上のアイコンフォントを作成できるので、他のフォントも気になった方はこちらのリンクからアクセスできます。

以上でインフォメーションバーの設定は完了です。では次にインフォメーションバーのカスタム方法について見ていきましょう。

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で流れるインフォメーションバーを作成する方法

続いて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>

これで流れるインフォメーションバーの設定ができました。