AFFINGER

AFFINGER6（アフィンガー6）流れるインフォメーションバーの作成方法

困ってる人
●アフィンガー5で流れるインフォメーションバーを作りたい。

●インフォメーションバーが動いていると目に留まるだよな。僕にもわかるように簡単に教えてほしい。

 

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

 

こんな方におすすめ

  • AFFINGER5で流れるインフォメーションバーを作りたい方
  • WordPress初心者
  • AFFINGER5をおしゃれにカスタマイズしたい方

 

本記事の信頼性

当ブログもAFFINGER5を使用しています。流れるインフォメーションバーの作り方を3分で解説できます。

 

ブロガーさんなら設定している方が多いのがインフォメーションバー。

 

普通にインフォメーションバーを設定するよりも動きがあって目に止まるように設定したいと思ってる方も多いはず。

 

動いているインフォメーションバーは目に止まって思わずクリックしたくなるので、収益UPにつながる可能性も増えますよね。

 

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

 

今回は上記赤枠内のインフォメーションバーを流れるように設定する方法を画像を使って解説します。

 

本記事を読めば、3分で流れるインフォメーションバーの設定ができるのでぜひ試してみて下さい。

 

AFFINGER5について

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

 

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

 

まずはインフォメーションバーを設定しよう

まずはインフォメーションバーを設定しよう

 

まずはAFFINGER5にインフォメーションバーを設定しましょう。

 

インフォメーションバーの設定方法は下記記事で詳しく解説しているのでご覧ください。

 

関連記事
AFFINGER6（アフィンガー6）のインフォメーションバー作成方法・カスタマイズも紹介

続きを見る

 

設定が完了してる方は、そのまま進んでください。

 

AFFINGER5（アフィンガー5）流れるインフォメーションバー作成方法

AFFINGER5（アフィンガー5）流れるインフォメーションバー作成方法

 

それではAFFINGER5の流れるインフォメーションバーの設定方法について解説します。

 

こんな感じで文字が流れるようになります。

 

簡単なんですぐに完了できますよ。

 

AFFINGER5 流れるインフォメーションバー設定手順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>

 

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

 

流れるインフォメーションバーの設定完了

 

上記画像のようにインフォメーションバーが動きました。

 

②スマホで流れる表示になっているか確認する

 

後は念のためにスマホ表示でもインフォメーションバーが流れるようになっているか確認しましょう。

 

うまくいってないと表示が崩れたりするので、そういった場合はコードに間違いがないか確認が必要です。

 

ちなみにHTMLでなくてもCSSでコード追加すれば流れる文字の表示は可能。

ただ、HTMLの方が圧倒的に簡単に設定できるので、今回はHTMLの紹介にさせて頂きました。

 


 

AFFINGER5（アフィンガー5）流れるインフォメーションバー設定の注意点

AFFINGER5（アフィンガー5）流れるインフォメーションバー設定の注意点

 

AFFINGER5に限ったことではないですが、流れるインフォメーションバーは読み込んだり表示したりするのに多少時間がかかります。

 

結果的にサイトスピードが遅くなってしまった、、なんてこともあるので、TOPページのスピードが必要以上に遅くなっていないか確認するようにしましょう。

 

サイトスピードはユーザーの利便性に関わる部分なのでSEOにも影響します。

 

Page Speed Insightsで自分のサイトスピードを無料調査できるので使用してない方は使ってみてください。

 

＞＞Page Speed Insights公式サイトへアクセス

 

まとめ：AFFINGER5で流れるインフォメーションバーを設定して収益UPしよう

まとめ：AFFINGER5で流れるインフォメーションバーを設定して収益UPしよう

 

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

 

AFFINGER5は稼ぎたいブロガーに最適な有料テーマです。

 

動くインフォメーションバーを設定してさらにクリック率を上げて収益UPを目指していきましょう。

 

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

 

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

 

関連記事

関連記事
【特典付き】AFFINGER6の評判は？本当の口コミを徹底レビュー

続きを見る

 

-AFFINGER