ヘッダーに表示できる「お知らせバー」の設定方法

2019 12/17
ヘッダーに表示できる「お知らせバー」の設定方法
記事上のウィジェットエリア

SWELLでは、重要なお知らせ情報をユーザーに知らせるための「お知らせバー」という機能を実装しています。

お知らせバー
お知らせバー

ここでは、このお知らせバーの使い方ついて説明していきます。

目次前広告表示エリア
目次

カスタマイザーの起動

SWELLでは基本的にテーマカスタマイザーから全ての設定を行うことができます。

カスタマイザーの起動方法については以下の記事を参考にして下さい。

あわせて読みたい
【SWELLの設定】「テーマカスタマイザー」の使用方法
【SWELLの設定】「テーマカスタマイザー」の使用方法SWELLの設定やカスタマイズは、ほぼ全て「テーマカスタマイザー」機能で行うことができるように設計しました。「テーマカスタマイザー」機能はリアルタイムで設定が反映...

以下では、カスタマイザー上での操作について説明していきます。

お知らせバーの設定はカスタマイザー内の「ヘッダー設定」というメニューから設定できます。

ヘッダー設定

お知らせバーを表示する位置の設定

まずは表示させてみましょう。

「外観」>「カスタマイズ」>「ヘッダー設定」の下の方に、次のような設定項目があるかと思います。

お知らせバーの表示設定

ここで、ヘッダーの上部または下部に表示するかを選択してください。

ヘッダー上部に表示

お知らせバー上部表示

ヘッダー上部に表示

お知らせバー下部表示

お知らせ内容&リンク先の設定

表示位置が決まったら、お知らせ内容とクリックされた時の遷移先URLを設定しましょう。

先ほどの表示位置に関する設定項目のすぐ下に、次のような設定項目が並んでいます。

お知らせ内容&URLの設定
お知らせ内容&URLの設定

ボタンテキスト」に入力した内容は、後述する「ボタンあり」の設定を選択することでボタンとして表示されるようになります。

お知らせバーのデザインに関する設定

さらにその下に、デザインに関係する設定項目が並んでいます。

お知らせバーのデザインに関する設定
お知らせバーのデザインに関する設定
  • お知らせバーの文字の大きさ」から、フォントサイズを3段階で変更できます。
  • お知らせ内容の表示方法
    • 横に流す」を選択すると、お知らせテキストが画面の右から左へと流れていくアニメーション効果を適用できます。
    • 固定表示(ボタンあり)」を選択すると、ボタンを設置することができます。
  • お知らせバーの背景効果」によって、背景色を単色ではなくストライプ柄にしたりグラデーション効果をつけることができます。

各種カラー設定

色に関する設定もいくつか用意しています。

お知らせバーのカラー設定
お知らせバーのカラー設定
  • 文字色
  • ボタンの色
  • お知らせバーの背景色

を設定することができます。

お知らせバー設置例

ストライプ

背景効果:なし

グラデーション / ボタンあり

背景効果:グラデーション
記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
目次