【AFFINGER6】インフォメーションバーの設置方法（HTML不要！）

サイトの訪問者に向けて、トップメニュー付近に目立つようなお知らせを出したいと思ったことはありませんか？
AFFINGER6ではHTMLを使わずに、目立つインフォメーションバーを簡単に表示することができます！

特にAFFINGER6のインフォメーションバーは、右から左へ文字を動かしたり点滅させる機能も備えているので、かなり目立たせることができます！

前提条件

この記事は、AFFINGER6用のカスタマイズ方法です。
AFFINGER5や他のワードプレステーマでは不可能（または動作未確認）です。
また、AFFINGER6でもバージョンにより動作や設定が異なる場合があります。

【WordPress】6.7.1
【テーマ：AFFINGER6EX】20250203

なお当ブログ自体は別のテーマを使用していますが、姉妹サイト「UEテク」はAFFINGER6で作っています。完成例としてご覧ください。

インフォメーションバーの設置方法

AFFINGER6のインフォメーションバーは、ウィジェットから設定できます。

「外観」－「ウィジェット」－「ヘッダーインフォメーション」に”20_AFFINGERインフォメーション”を設定します。ドラッグアンドドロップで設置可能です。

”20_AFFINGERインフォメーション”の細かい設定をしていきます。

タイトル

基本的に反映されません。

内容

表示される文字列を入力します。

URL

内容の文字列をクリックされた時に遷移するURLを入力します。
URLが設定されるとリンクだと分かるよう文字に下線が付き、URLを空欄にすると下線が非表示になります。

文字設定

太字にしたりテキスト色を変えたりできます。
また、文字を点滅させたり、右から左へ文字を流す設定も可能です。

たったこれだけで完成です！

応用編

デフォルト機能でも目立たせることができますが、さらに目立たせるようにカスタマイズも可能です！

背景を変える

背景色を変えたり、背景をストライプ柄に変更する設定もあります。
「外観」－「カスタマイズ」－「サブエリア」－「インフォメーションエリア」と進みます。

背景色

インフォメーションエリアの背景色を設定します。グラデーション設定時は左側の色になります。

背景色（右）

グラデーション設定時は右側の設定になります。
ストライプデザイン設定時は背景色と背景色（右）の色が交互に表示されます。

文字色

文字色を設定します。ただし、ウィジェットの文字色の方が優先されます。

ストライプデザインに変更

ストライプデザインを未チェックにすると、グラデーションがかかります。
グラデーションをかけずに、背景色を1色にしたい場合は、背景色と背景色（右）の両方に同じ色を設定しましょう。

ストライプデザインをチェックした例はこんな感じ。

文字の大きさを変える

文字の大きさは15pxに設定されていますが、より文字を大きくすることで目立たせることができます。
逆にそこまで目立たなくて良い場合は、文字を小さくしても良いでしょう。

「外観」－「カスタマイズ」－「追加CSS」にて、以下のCSSをコピペするだけで文字の大きさを変えられます！
コピペ後、30pxの部分を好みの大きさに変更してください。

#st-header-top-widgets-box .st-content-width p{
font-size:30px;
}

文字を縁取りする

「外観」－「カスタマイズ」－「追加CSS」にて、以下のCSSをコピペするだけで文字を縁取りできます！

#st-header-top-widgets-box .st-content-width p{
text-shadow:
	2px 2px 0 #000,
	-2px -2px 0 #000,
	-2px 2px 0 #000,
	2px -2px 0 #000,
	0px 2px 0 #000,
	0-2px 0 #000,
	-2px 0 0 #000,
	2px 0 0 #000;
}

2pxの部分は縁取りの大きさで、#000は縁取り部分の色を黒に設定しています。
太字で縁取りしたければ3～5pxに設定、白色で縁取りしたければ#FFFにするなど、好みに応じて設定してください。