重要な告知をページ上部に表示できる、お知らせバーの設定方法

重要な告知をページ上部に表示できる、お知らせバーの設定方法
記事上のウィジェットエリア

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

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

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

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

カスタマイザーの起動

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

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

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

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

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

ヘッダー設定

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

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

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

お知らせバーの表示設定

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

ヘッダー上部に表示

お知らせバー上部表示

ヘッダー上部に表示

お知らせバー下部表示

お知らせ内容テキストの設定

表示位置が決まったら、お知らせ内容を設定しましょう。

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

お知らせ内容の設定
  • お知らせ内容」の欄に、実際に告知として表示したいテキストを入力してください。
  • リンク先」にURLを入力すると、お知らせバー全体がクリックできるようになり、ここで設定されたURLへのリンクとなります。
  • お知らせバーの文字の大きさ」から、テキストのフォントサイズを3段階で変更できます。
  • お知らせ内容の表示方法」で「横に流す」を選択すると、お知らせテキストが画面の右から左へと流れていくアニメーション効果を適用できます。

お知らせバーのデザイン設定

最後に、デザインを設定しましょう。
上述の設定項目のすぐ下に、以下のような設定項目があります。

画像

文字色・背景色を自由に選択してご利用ください。

背景効果について

お知らせバーの「背景効果」を設定することで、単色の背景に少しだけ効果をつけることができます。

背景効果:なし

背景効果:なし

背景効果:グラデーション

背景効果:グラデーション

背景効果:ストライプ

背景効果:ストライプ
記事下のウィジェットエリア

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

目次
目次