インフォメーションバーとは
まだまだAFFINGER6には慣れない日々を送っていますが、記事そっちのけでトップページのレイアウトにこだわってしまう事はないでしょうか?
ありまくりです💦
インフォメーションバーとは、ヘッダー部分とヘッダーメニューの間に伝えたい文字を入力し表示させる事を言います。
こんな感じだった当サイトのヘッダーですが、インフォメーションバーを表示させることにより、こうなりました。
おわかりでしょうか?
「りおんぶろぐへようこそ～」の文字が表示されました。
今はまだブログを始めたばかりで適切な文章は思いつかないのですが、非常に目立つ位置に表示させることができますので、訪問者の方の目に留まりやすいと思います。
AFFINGER6でインフォメーションバーを表示させる方法
WordPressの左メニューから「外観」→「ウィジェット」と進みます。
左の一番上に「STINGERカスタムHTML」がありますのでクリックします。
そしてその中間あたりに「ヘッダー画像エリア上のウィジェット」と言う項目がありますのでクリックし、ウィジェットを追加します。
すると右から2列目の一番下に「ヘッダー画像エリア上のウィジェット」があり、クリックすると「STINGERカスタムHTML」が開きます。
青く表示されたところに入れたい文字を普通に日本語で書き込むと、インフォメーションバーに表示させる事ができます。
少し他のブログを調べてみましたが、HTMLコードでなければ表示できないと書いている方もいらっしゃいました。
<span class="huto">りおんぶろぐへようこそ～</span>
書かれていた通りに貼り付けてみますと、こちらも表示させることができました。
色んなカスタマイズをするには、HTMLで入力した方がいいかもしれません。
インフォメーションバーの色を変更する方法
WordPress左メニューから「外観」→「カスタマイズ」→「基本エリア設定」→「ヘッダー画像上／下ウィジェト」をクリックします。
この3つで色を変更できます。
こんな感じですね。
ヘッダーエリア上の背景色は左側、そして右、3つ目が文字の色です。
意外と簡単に変更できますので、色々試してみてはいかがでしようか?
当サイトはシンプルに行きます💦
流れるインフォメーションバー
先ほどのカスタムHTMLに下記を貼り付けると流れます。
<div>
<marquee>
りおんぶろぐへようこそ～
</marquee>
</div>
こちらはHTMLで大丈夫です、りおんぶろぐへようこそ～をお好きな文字に変えて下さい。
流れるインフォメーションバーはサイトが重くなる場合がありますので、ご注意下さい。
インフォメーションバーの幅の変更の方法
「外観」→「カスタマイズ」→「追加CSS」へ移動します。
/*インフォメーションバーの幅を変更*/ #st-header-top-widgets-box .st-content-width{ padding:10px!important; }
上記の数字10を変更すると、幅が広くなったり狭くなったりします。
インフォメーションバーにURLを追加する方法
インフォメーションバーをクリックしたら、読んで欲しい記事へと移動させる方法です。
<a href="表示させたい記事URL"><strong><i class="fa fa-angle-double-right"></i>クリック部分のタイトル<i class="fa fa-angle-double-left"></i></strong></a>
先ほどのカスタムHTMLに貼り付けるとリンクできます。
アフィリエイト等、見てほしい記事に飛ばせることができます。
稼ぐに特化したWordPressテーマ【AFFINGER6】
まとめ
以上が今回の記事内容になります。
トップページが少しおしゃれになった気がしますよね。
訪問者の方の目に留まりやすいのもメリットのひとつと言えます。
URLを設定する事によって、読んで欲しい記事への誘導がしやすくなります。
他にもAFFINGER6のレイアウトについて記事にしていますので、ご参照頂けますと嬉しいです。
-
-
【AFFINGER6】ヘッダー&フッターのレイアウトをカスタマイズ！
続きを見る
-
-
【AFFINGER6】で「合わせて読む」のブログカードを設定する方法
続きを見る
当サイトもまだまだ始めたばかりですが、これからも自分が疑問に思う事をわかりやすく訪れて下さった方に解説できるよう精進します💦
お読み頂きまして、ありがとうございました。
