●僕でもわかるようにAFFINGER6でインフォメーションバーを作成する方法について教えてほしい。
今回はこんなお悩みを解決していきます。
こんな方におすすめ
- AFFINGER6でインフォメーションバーを作りたい方
- ブログをおしゃれにカスタマイズしたい方
- AFFINGER6に関する疑問を解決したい方
本記事の信頼性
ブログをおしゃれに見せることができるインフォメーションバーです。AFFINGERならおしゃれなインフォメーションバーが簡単に作成できます。
インフォメーションバー完成図
上記赤枠がインフォメーションバーですね。インフォメーションバーは、
- ブログをおしゃれに見せる
- 他記事への誘導
- 外部プラットフォームへのリンク
などが可能になります。
収益化UPを目指したいにはインフォメーションバーを作成することで成約UPにもつながるチャンスにもなります。
今回はAFFINGER6のインフォメーションバーの作成方法について詳しくご紹介していきます。
本記事を読めば、簡単にインフォメーションバーを作成できるので参考にしてみて下さい。
AFFINGER6の評判について
AFFINGER6の購入前に評判やメリット・デメリットについて確認しておきたいという方は、AFFINGER6の特典14個付きレビュー評判を徹底解説を参考にしてみて下さい。
前置きが長くなりましたが、それでは早速紹介していきます。
目次
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（アフィンガー6のインフォメーションバー導入後の注意点
AFFINGER6（アフィンガー6のインフォメーションバー導入後の注意点
AFFINGER6のインフォメーションバーを導入した後は、スマホで表示崩れがないか必ずチェックしましょう。
パソコン上だと問題なく表示されていてもスマホで見ると文字が大きくて2行になっていたり、幅が小さくなったなど思ってもみない所で問題が発生したりします。
当ブログもスマホで表示崩れがあったので、確認しておけば安心です。カスタマイズをいじった後はパソコン、スマホ色んなデバイスで異常がないか確認する習慣が大事ですね。
まとめ：AFFINGER6でインフォメーションバーを設定しておしゃれにサイト運営しよう
まとめ：AFFINGER6でインフォメーションバーを設定しておしゃれにサイト運営しよう
今回はAFFINGER6のインフォメーションバーの作成方法について紹介しました。
AFFINGER6は細かい設定も簡単に調整できます。インフォメーションバーを始め、多くの個所をカスタムでき、当ブログではそのやり方を詳しく解説してるので、良い感じのサイトにしたい方は設定してみましょう。
>>AFFINGER6のカスタマイズ方法まとめ【目的別にデザインを設定しよう】
まだAFFINGER6の導入を迷ってる方は、こちらの記事でレビューしているので参考にしてみて下さい。
-
【特典付き】AFFINGER6の評判は？本当の口コミを徹底レビュー
続きを見る
本記事が参考になれば幸いです。最後まで読んで頂きありがとうございました。
それでは本日はこの辺りで。
※当サイトはAFFINGER通常版からAFFINGER PACK3を購入し、収益がグンと伸びましたので、収益をさらに伸ばしたい方は、参考に以下もどうぞ。
-
【AFFINGER PACK3】AFFINGER6 EX版を徹底レビュー【感想を公開】
続きを見る
関連記事AFFINGER6（アフィンガー6）の使い方はこれでOK【徹底解説します】
