悩んでいる人アフィンガーでインフォメーションバーはどうやって設定するのでしょうか?色などのカスタマイズの方法も教えてほしいです。今回はこの悩みに解決していきます。この記事の内容AFFINGERでインフォメーションバーを設定する方法インフォメーションバーのカスタマイズする方法この記事を書いている人Twitter(suguru0326)を運営中インフォメーションバーを使用することで、目立つ位置に読んでもらいたい記事のリンクを置くことができます。ブログを他のブログよりおしゃれに見せることもできますよね。上記の赤い枠がインフォメーションバーになります。このブログで使用しているテーマはAFFINGR6を使用しています。AFFENGERなら簡単にインフォメーションバーを設定できますので、この記事を読んでぜひ設定してみてくださいね。AFFINGERの評判についてAFFINGER5の購入前に評判やメリット・デメリットについて確認しておきたいという方は、【導入方法も解説】AFFINGER5を実際に使った感想【メリットとデメリット】を参考にしてみて下さい。AFFINGER6は現在β版になります。AFFINGER5を購入されると無償でアップデートが可能です。くじAFFINGER6(アフィンガー6)インフォメーションバーを設定する方法1ダッシュボードの外観からウジェットを開く2ヘッダー画像エリア上にカスタムHTMLを設置3カスタムHTMLにコードを入力インフォメーションバーのカスタマイズ方法1インフォメーションバーの色を変更する2インフォメーションバーの幅を変更する3インフォメーションバーの文字サイズを変更するインフォメーションバーの導入後の注意点まとめ:インフォメーションバーを設定してサイトを差別化しようAFFINGER6(アフィンガー6)インフォメーションバーを設定する方法それでは早速AFFINGER6のインフォメーションバーで設定する方法を紹介していきます。簡単に設定できるのでサクッと設定していきましょうすぐる下記のステップでおこないます。インフォメーションバーの設定方法ダッシュボードの外観からウィジェットを開くヘッダー画像エリア上にカスタムHTMLを設置カスタムHTMLにコードを入力する順番に解説していきます。1ダッシュボードの外観からウジェットを開く初めにダッシュボードの外観からウジェットをクリックします。ダッシュボードの外観からウジェットをクリックする2ヘッダー画像エリア上にカスタムHTMLを設置ウジェットの画面から『カスタムHTML』をヘッダー画像エリア上に設置します。class="huto">WordPressをはじめよう!【4月15日までお得なキャンペーン中!!】</span></a>これでインフォメーションバーの設定は完了です。次にインフォメーションバーのカスタム方法を解説していきます。下記の3つの項目に分けてカスタム方法を解説してきますね。カスタマイズの内容インフォメーションバーの色を変更するインフォメーションバーの幅を変更するインフォメーションバーの文字サイズを変更する1インフォメーションバーの色を変更するインフォメーションバーの色を変更はカスタマイズから変更が可能です。カスタマイズ⇒基本エリア設定⇒『ヘッダー画像エリア上/下ウィジェット』をクリックします。インフォメーションバーの色を設定する上記の部分でインフォメーションバーの背景色と文字色変更ができます。Eyedropperです。Eyedropperの使い方を解説で詳しく解説してるので気になった方は参考にしてみてください。2インフォメーションバーの幅を変更する次にインフォメーションバーの幅を変更したときの方法をかいせ次にインフォメーションバーの幅を変更したときの方法を解説していきます。インフォメーションバーの幅を変更するカスタマズ画面で追加CSSをクリックします。CSS内に以下のコードをコピーして入力しただければOKです。.st-content-width{padding:10px!important;}上記のコードの『10』の数字を大きくすると幅が広くなり、小さくすると狭くなります。お好み幅に変更してみくださいね。3インフォメーションバーの文字サイズを変更するインフォメーションバーの文字サイズを変更するのも追加CSSにコードを入力すれば簡単に設定できます。インフォメーションバーの文字サイズへ変更する上記の部分の文字の大きさとなります。以下のコードを追加CSSに追加してください。.st-content-width{font-size:14px;}上記コードの『14』を大きくすれば文字が大きく、小さくすれば文字が小さくなります。こちらも好みのサイズに設定してみてくださいね。インフォメーションバーの導入後の注意点インフォメーションバーを導入した後は、スマホで確認して表示が崩れたりしていないか必ずチェックしましょう。パソコンの画面で問題がないように見えても、スマホで表示すると文字が大きくなり2行になっていたり、幅が小さくなっている場合があります。思ってもみない所で、表示崩れをおこす可能性もあるのでしっかり確認してくださいね。スマホの確認は忘れがちになるので、しっかりと確認しましょう。すぐるまとめ:インフォメーションバーを設定してサイトを差別化しようご苦労様でした。今回はAFFINGERのインフォメーションバーの設定方法について解説してきました。AFFINGERは本当に細かい部分まで設定してカスタマイズが可能です。インフォメーションバーを設定して、他サイトにはないオリジナリティを出して収益化につなげてください。AFFINGERの導入に迷っている方は、こちらの記事でレビューしているので参考にしていただけると嬉しいです。最後まで読んでいただきありがとうござました。今回はこの悩みを解決していきます。今回はこの悩みを解決してきます。最近のブログはおしゃれなサイトもたくさん増えてきましたよね。そんな時にめちゃおしゃれに見える「インフォメーションバー」です。WordPressでアフィンガーをインストールしていざ記事を書き始めて装飾をしようと思ったら、スタイルタグがありません。こんな疑問に答えていきます。アフィンガーで”チェックマークのみ”の見出しを出したいんですが方法がわかりません。こんな質問にお答えしていきます。アフィンガー5を導入しました。今回はこの疑問を解決します。ワードプレスでブログを作りました。有料テーマを何にしようか迷い中です。AFFINGERを導入しました。アーカイブが表示されているサイトを見たのですが、どのように設置するのでしょうか。細かい設定方法も教えてください。この疑問にお答えしていきます。運営|SEO・ブログ・アフィリエイトが好きです|妻と娘、息子とのんびり暮らしています。