上部告知バー

このパーツの使いどころと実装ポイント

このパーツは、ページ最上部に固定で出すキャンペーン告知バーです。横一列の中央寄せで短いメッセージとリンクを並べ、右端に×の閉じるボタンを置いた構造になっています。CSSはdisplay:flexとjustify-content:centerで文言を中央に揃え、閉じるボタンだけposition:absoluteで右端に逃がしているのが特徴です。閉じる動作はab.hideクラスを付けてdisplay:noneにする最小構成で、軽い実装に保たれています。

向いている場面

• 期間限定セールや送料無料などの短期キャンペーン告知
• 新サービス開始や年末年始の営業案内など、全ページ共通で伝えたいお知らせ
• 採用募集や資料ダウンロードへの一言誘導

カスタマイズの勘所

文言は1行で読み切れる長さに抑えるのが基本です。背景色#1a1a2eとリンク文字のコントラストを確認し、ブランド色に変える際は文字が読める明度差を保ってください。一度閉じたら再表示しない挙動にしたい場合は、閉じた状態をlocalStorageに保存する処理を足すと、訪問のたびに邪魔をしません。固定表示にするならposition:fixedを加え、本文側に同じ高さの余白を確保すると重なりを防げます。

このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。