サイトヘッダー下にお知らせバーを表示する方法

サイトヘッダー下にお知らせバーを表示する方法
2020.02.26

サイトのヘッダー下にキャンペーン情報やイチオシ情報を表示したい時に便利な「お知らせバー」を表示する方法について紹介します。

お知らせバーの表示サンプル

※この機能はyStandard v3.13.0から利用できる機能です。

お知らせバーの設定方法

お知らせバーはテーマカスタマイザーの「[ys]お知らせバー設定」から設定できます。

お知らせバーから設定する

お知らせテキスト・リンクURLの設定

テキストとURLの設定

「お知らせテキスト」に入力した文章がヘッダー下のに表示されます。

「お知らせテキストリンク」にURLを入力すると、お知らせバー部分がリンクになります。

もしリンク先を新しいタブで開きたい場合「お知らせリンクを新しいタブで開く」にチェックを入れます。

お知らせバーの文字色・背景色の設定

お知らせバーの文字色・背景色の設定

文字の色は「お知らせバー文字色」、背景色は「お知らせバー背景色」で変更できます。

文字の太さ設定

文字の太さ設定

文字の太さは「お知らせテキストを太字にする」で変更できます。

チェックを付けると太字に、外すと通常の太さになります。

ヘッダーメディアの使用時の注意点

ヘッダーメディアにサイトヘッダーを重ねる場合はお知らせバーは表示されません

ヘッダーメディアの設定で「[ys]ヘッダーメディアにサイトヘッダーを重ねる(PC)」にチェックを入れている場合、ヘッダーメディアが表示されるページにはお知らせバーは表示されません。

例えば、「[ys]ヘッダーメディアにサイトヘッダーを重ねる(PC)」と「[ys]ヘッダーメディアを全ページ表示する」の両方にチェックを付けている場合、全ページでお知らせバーが表示されません。

※設定には「(PC)」となっていますが、モバイル表示でもお知らせバーが非表示になります。