たった10分で流れる文字（インフォメーションバー）を作る方法【AFFINGER6】

今回はこんなお悩みを解決します！

インフォメーションバーとはどんなやつかというと…


こんなイメージです👇

インフォメーションバー設置イメージ

流れるインフォメーションバー

流れるインフォメンションバー

こんな感じの流れる文字が作れますよ！


では、さっそく作り方を見ていきましょうー。

＼当ブログの WordPressテーマ／

『AFFINGER6』とは「稼ぐ」に特化した WordPressの有料テーマです。

＼当ブログ限定６特典付き／

AFFINER6の詳細を見る

AFFINGER6で流れる文字（インフォメーションバー）を作る方法

流れる文字（インフォメーションバー）の作成手順は、下記の3ステップです。

初心者でも簡単で、5分〜10分で作成できますよ！

• HTMLコードを追加する
• 流れる文字（インフォメーションバー）のデザインを編集する
• 流れる文字（インフォメーションバー）の表示を確認する

HTMLコードを追加する

まずは、HTMLコードを設置しましょう。

• WordPress管理画面の『外観』>>『カスタマイズ』
• カスタマイズ画面の『ウィジェット』>>『ヘッダー画像エリア上のウィジェット』>>『カスタムHTML』

• WordPress管理画面の『外観』をクリック
• 外観の『カスタマイズ』をクリック

• 『ウィジェット』をクリック

• 『ヘッダー画像エリア上のウィジェット』をクリック

• 『カスタマイズHTML』をクリック

• 『内容』の箇所にHTMLコードを入力
• 下部の『完了』ボタンをクリック
• 上部の『公開』ボタンをクリック

HTMLコードは下記をコピペして、赤文字を編集してください。

当サイトのHTMLコード

• 上記HTMLコードをコピペ
• 赤文字のURL箇所を遷移させたいURLに編集しましょう
• 赤文字のテキスト箇所を表示させたいテキストに編集しましょう

上記２箇所を希望のURL、テキストに編集して公開すれば作成完了です！

当サイトの設定した画面

こんな感じで表示できてればOKです。

コードのテンプレ

表示を変更したい場合

• <strong></strong>　
  • 太文字にするコードです、削除すると通常フォントに変更できます。
• <i class="fa fa-angle-double-right"></i>　
  • アイコンのコードです、赤文字の箇所を変更すればアイコンを変更できます。
• <div><marquee>表示させたいテキスト</marquee></div>　　
  • 流れる文字のコードです、削除すれば固定表示に変更できます。

＼トップブロガーさんも使ってる／

AFFINER6の詳細を見る

流れる文字（インフォメーションバー）のデザイン編集

次に、デザインやテキストの編集方法を紹介していきます。

• WordPress管理画面の『外観』>>『カスタマイズ』
• カスタマイズ画面の『基本エリア設定』>>『ヘッダー画像エリア上 / 下ウィジェット』

• WordPress管理画面の『外観』>>『カスタマイズ』
• 『基本エリア設定』をクリック

• 『ヘッダー画像エリア上 / 下ウィジェット』をクリック　

• 背景色の編集ができます。
• 文字色を編集ができます。

この手順で、背景やテキストの色を編集できるので、希望のデザインにしちゃいましょう。

流れる文字（インフォメーションバー）のデザインイメージ

ストライプデザイン

• 『ヘッダーエリア上の背景色』を白に設定
• 『ヘッダーエリア上の背景色（右）』を赤に設定
• 『ヘッダーエリア上の文字色』を青に設定

『ストライプデザインに変更』にチェックをすると、①と②の色でストライプ背景が反映されます！

グラデーション背景

• 『ヘッダーエリア上の背景色』を白に設定
• 『ヘッダーエリア上の背景色（右）』を黄色に設定
• 『ヘッダーエリア上の文字色』を赤に設定

『ストライプデザインに変更』のチェックを外すと①が左箇所の背景色、②が右箇所の背景色でグラデーションの背景になります！

①と②を同色にすればグラデーションはなくなりますよ。

＼トップブロガーさんも使ってる／

AFFINER6の詳細を見る

流れる文字（インフォメーションバー）の表示を確認しよう

設定が完了したら、PCとスマホの表示がそれぞれ問題ないか、確認しましょう。

PCの表示

スマホの表示

ちゃんと表示がされない場合は、コードが間違ってないか確認してみましょう。

流れる文字（インフォメーションバー）のメリット・デメリット

流れる文字（インフォメーションバー）のメリット、デメリットをまとめました。

ご確認の上、作成するかどうか検討してみてください！

流れる文字（インフォメーションバー）のメリット

流れる文字（インフォメーションバー）のメリットは以下の通りです。

• サイトトップのヘッダー上に配置できるので視認率が高い
• オシャレに情報を訴求できる
• 記事や外部サイトへの誘導ができる

＼トップブロガーさんも使ってる／

AFFINER6の詳細を見る

流れる文字（インフォメーションバー）のデメリット

流れる文字（インフォメーションバー）は以下の通りです。

• サイトの表示速度に影響が出る

文字を動かす為、サイト速度に影響し動作が重くなる可能性があります。

実際に確認してみて、動作が重くなるようであれば、流れる文字ではなく固定するのがオススメです。

>>AFFINGER6をチェックしてみる

まとめ：AFFINGER6でインフォメーションバーを作る方法

今回は、流れる文字（インフォメーションバー）の作り方、メリット、デメリットを解説しました。

デメリットも理解した上で、うまく活用していきましょう！

まだAFFINGER6を導入してない方は、まずは詳細をチェックしてみてはいかがでしょう。

＼当ブログ限定６特典付き／

AFFINER6の詳細を見る

今回は以上でーす。

最後までご覧いただき、ありがとうございました！