AFFINGER

AFFINGER5(アフィンガー5)のインフォメーションバー作成方法・カスタマイズも紹介

困ってる人
●アフィンガー5でインフォメーションバーてどうやって作るの?

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

 

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

 

こんな方におすすめ

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

 

本記事の信頼性

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

 

ブログをおしゃれに見せることができるインフォメーションバー。

 

AFFINGERならおしゃれなインフォメーションバーが簡単に作成できます。

 

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

 

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

 

インフォメーションバーはブログをおしゃれに見せるだけでなく、他記事への誘導や外部プラットフォームへのリンクなども作成可能。

 

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

 

今回はAFFINGER5のインフォメーションバーの作成方法について画像を使って解説します。

 

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

 

AFFINGER5の評判について

AFFINGER5の購入前に評判やメリット・デメリットについて確認しておきたいという方は、AFFINGER5の評判・メリットデメリットを徹底解説【実際に使った感想をレビュー】を参考にしてみて下さい。

 

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

 

AFFINGER5(アフィンガー5)インフォメーションバーを設定する方法

AFFINGER5(アフィンガー5)インフォメーションバーを設定する方法

 

それでは早速AFFINGER5のインフォメーションバーを作成する方法について解説します。

 

簡単なので、サクッとできちゃいますよ。

 

下記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/"><strong><i class="fa fa-angle-double-right"></i>WordPressブログを始める(12/3まで超お得なキャンペーン中)<i class="fa fa-angle-double-left"></i></strong></a>と入力しています。

 

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

 

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

 

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

 

AFFINGER5 インフォメーションバー カスタマイズ方法

AFFINGER5インフォメーションバー カスタマイズ方法

 

インフォメーションバーを設定した後はお好みでカスタマイズできます。

 

下記3つに分けてカスタム方法を紹介しますね。

 

AFFINGER5のインフォメーションバーカスタマイズ方法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』を変更すれば文字を大きくできたり小さくしたりできます。

 

好みのサイズに設定してみてください。


 

AFFINGER5(アフィンガー5)インフォメーションバー導入後の注意点

AFFINGER5(アフィンガー5)インフォメーションバー導入後の注意点

 

AFFINGER5のインフォメーションバーを導入した後は、スマホで表示崩れがないか必ずチェックしましょう。

 

パソコン上だと問題なく表示されていてもスマホで見ると文字が大きくて2行になっていたり,幅が小さくなったなど思ってもみない所で問題が発生したりします。

 

僕自身スマホで表示崩れがあったので、確認しておけば安心です。

 

カスタマイズをいじった後はパソコン、スマホ色んなデバイスで異常がないか確認する習慣が大事ですね。

 

まとめ:インフォメーションバーを設定しておしゃれにサイト運営しよう

まとめ:インフォメーションバーを設定しておしゃれにサイト運営しよう

 

今回はAFFINGER5のインフォメーションバーの作成方法について紹介しました。

 

AFFINGER5は細かい設定も簡単にカスタマイズできます。

 

インフォメーションバーがいいなと思った方はぜひ設定してみて下さい。

 

AFFINGER5の導入を迷ってる方は、こちらの記事でレビューしているので参考にしてみて下さい。

 

関連記事
AFFINGER5の特典10個付きレビュー!評判やメリット・デメリットを徹底解説

続きを見る

 

本記事が参考になれば幸いです。最後まで読んで頂きありがとうございました。

 

それでは本日はこの辺りで。

 

関連記事

AFFINGER5(アフィンガー)で簡単に記事コピーを防止できる設定方法

 

AFFINGER5でタブの設定&カスタマイズ方法!使い方も紹介【AFFINGER5初心者向け】

 

-AFFINGER

© 2021 Tetsu blog Powered by AFFINGER5