【AFFINGER6 】　流れるインフォメーションバーを設定する方法

インフォメーションバーを設定する方法です。

人は動く物に目を惹かれる傾向にあります。

 

ですので、ブログの中にインフォメーションバーを置くことで注目を引くことが出来。

その記事を読んでもらいやすくなります。

 

インフォメーションバーを設定する方法

 

「ダッシュボード」⇒「外観」⇒「ウィジェット」をクリック

 

 

左上の「00_STINGERカスタムHTML」

から「ヘッダー画像エリア上のウィジェット」を選び「ウィジェットを追加」をクリック

 

すると右のウィジェットの一番下にある

「ヘッダー画像エリア上のウィジェット」に「00SYINGERカスタムHTML」が追加されています。

 

 

カスタムHTMLにコードを入力

 

「保存」⇒「完了」

 

ここまででこんな感じになります。

 

 

インフォメーションバーをカスタマイズ

色を変更する

 

インフォメーションバーの色を変更はカスタマイズから変更が可能です。

 

「カスタマイズ」⇒「基本エリア設定」⇒「ヘッダー画像エリア上/下ウィジェット」の順にクリック

 

 

 

 

幅を変更する

色の変更が出来ましたら。

メニューの一番下の「追加CSS」をクリックします。

 

 

そこに下記のコードを入力してください。

 

 

 

数字の１０の部分を変更すると幅が変更されます。

 

文字サイズを変更する

 

先ほどの「追加CSS」に文字サイズを変更する

コードを追加します。

 

18の数字を変更してもらうと文字の大きさが変わります。

 

お疲れ様でした。

これで完成です。

 

インフォメーションバーの確認

全てが完了しましたら。

「プレビュー」をクリックして確認しましょう。

確認をして大丈夫であれば。スマホでもどのように表示されているか確認しましょう。

PCで上手く表示されていてもスマホでは上手く表示されていない場合があります。

 

スマホでの確認方法

 

「プレビュー」画面で右クリックをします。

「検証」をクリックします。

こんな感じでスマホの画面表示が出てきます。

サイズがおかしい場合は、

赤枠部分をクリックすると、表示サイズが変わります。

 

これで確認してOKであれば完了となります。