インフォメーションバーの設定方法
最終更新: 2026-03-28
インフォメーションバーの設定方法
> こんな質問に答えます:
> - ヘッダーの上にお知らせバーを表示したい
> - キャンペーン告知の帯を出したい
> - インフォメーションバーの設定は？
> 別名・よくある呼び方: お知らせバー、告知バー、ヘッダー上の帯、キャンペーンバー、インフォバー、情報バー
> 設定場所: 外観 → カスタマイズ → 「デザイン設定 - ヘッダー」→ 該当パターンのセクション →「インフォメーションバー部分」
> カスタマイザーで開く: パターン1の設定を開く
> このページのURL: https://lite-word.com/manual/header-info-bar/
ヘッダーの最上部に表示される細い帯。キャンペーン告知・お知らせ・セール情報などに使う。全パターン共通の機能。
設定手順
- 外観 → カスタマイズ を開く
- 「デザイン設定 - ヘッダー」 → 使用中パターンのセクションを開く
- 「インフォメーションバー部分」 を見つける
- 表示切替を 「表示する」 にする
- 「表示するテキスト」 にお知らせ内容を入力
- リンクにしたい場合は 「url」 にリンク先URLを入力（バー全体がクリックできるリンクになる）
- 背景色・テキスト色を調整
- 「公開」 で保存
設定項目一覧
| ラベル | 型 | デフォルト | 説明 |
|---|---|---|---|
| 表示切替 | radio | 表示しない | 「表示する」「表示しない」 |
| 表示するテキスト | text | サイトの説明文 | バーに表示するテキスト |
| url（リンクにする場合） | text | 空 | URLを入れるとバー全体がリンクになる |
| 背景色 | color | var(--color-main) |
バーの背景色 |
| テキスト色 | color | #ffffff | 文字の色 |
| フォントの指定 | select | 未指定 | フォントファミリー |
よくある質問
Q: インフォメーションバーをクリック可能にしたい
A: 「url」にリンク先を入力すると、バー全体が <a> タグになりクリックできるようになる。URLを空にするとテキスト表示のみ。
Q: バーの高さやフォントサイズを変えたい
A: カスタマイザーに高さ・フォントサイズの設定はない。CSSで .lw_information_bar をカスタマイズして調整する。
最終更新: 2026-03-16